최적화(Optimization)란? 기법 ? Lighthouse

fejigu·2022년 10월 7일
lighthouse최적화최적화기법
1

사용자 친화 웹

목록 보기
5/5
post-thumbnail

이번에는 최적화의 개념과 기법을 학습하고 Lighthouse라는 툴을 사용하여 개선 방향을 잡는 법에 대해 학습했다. 아직 코드 작성도 수월하지 않는 나에게 최적화를 고려하는 것이 쉽지 않았지만 이미 만들어진 코드를 어떤 방식으로 최적화할 수 있을지 판단하는 방법을 어느 정도 알게 된 것 같다.

최적화

최적화란

일반 ver : 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것
컴퓨터 공학 ver : 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것
웹 개발 ver : 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것

최적화의 필요성 및 효과

1) 이탈률 감소 : 화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다.
2) 전환율 증가 : 웹 사이트를 방문한 사용자 중 실제 서비스 이용자로 전환되는 비율이 증가한다.
3) 수익 증대 : 이탈률 감소, 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지고, 곧 수익 증대를 의미한다.
4) 사용자 경험(UX) 향상 : 최적화는 효과적인 UX 개선 수단이다.

최적화 기법

🔎 HTML, CSS 코드 최적화하기

1. HTML 최적화 방법

1) DOM 트리 가볍게 만들기 : DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다. 

// 수정 전
<div>
	<ol>
		<li> 1번째 </li>
		<li> 2번째 </li>
		<li> 3번째 </li>
	</ol>
</div>
// 수정 후 : 불필요한 div 요소 제거
<ol>
	<li> 1번째 </li>
		<li> 2번째 </li>
		<li> 3번째 </li>
</ol>

2) 인라인 스타일 사용하지 않기 : 스타일 속성을 중복으로 작성하게 되는 경우가 생기며, 가독성이 떨어지고 파일 크기를 증가시킨다. 또한 리플로우를 계속해서 렌더링 완료 시점을 늦춘다. 

//수정 전
<div style="margin: 10px;"> 인라인 스타일 </div>
<div style="margin: 10px;"> 사용하지 않기 </div>
//수정 후 : class와 CSS로 대체
<div class="margin10"> 인라인 스타일 </div>
<div class="margin10"> 사용하지 않기 </div>
.margin10 {
	margin: 10px;
}

2. CSS 최적화 방법

1) 사용하지 않는 CSS 제거하기
2) 간결한 셀렉터 사용하기

🔎 리소스 로딩 최적화하기

1. CSS 파일 불러오기

화면을 렌더링할 때는 DOM 트리와 CSSOM 트리가 필요한데, CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.

<head>
	<link href="style.css" rel="stylesheet" />
</head>

2. JavaScript 파일 불러오기

JavaScript 파일을 다운받아와서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단되므로, JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

<body>
  ...
	<script src="script.js" type="text/javascript"></script>
</body>

🔎 브라우저 이미지 최적화하기

페이지의 대부분의 용량은 이미지 파일과 같은 미디어 파일이 차지하므로 용량을 줄이거나, 요청의 수를 줄이는 것을 우선적으로 고려한다.

1. 이미지 스프라이트

여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법

→ 네트워크 로딩 시간 단축, 관리 용이 ex) 네이버 메인 화면 카테고리 아이콘.

2. 아이콘 폰트 사용하기

아이콘을 이미지로 사용하는 것이 아니라 아이콘 폰트 사용해서 용량을 줄인다.

Font Awesome
1) CDN으로 사용하기
Font Awesome에 가입하면 키트를 발급해주는데, 이 키트를 HTML 파일에서 요소에 넣어주기만 하면 CDN으로 Font Awesome을 사용할 수 있다.
2) Font Awesome 모듈 설치하기

Font Awesome 사용법

// 핵심 패키지 설치
npm i --save @fortawesome/fontawesome-svg-core

// 아이콘 패키지 설치 
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

// Font Awesome React 구성 요소 설치
npm i --save @fortawesome/react-fontawesome@latest

3. WebP 또는 AVIF 이미지 포맷 사용하기

HTML의 태그를 이용하면 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

🔎 CDN 사용하기

CDN은 콘텐츠를 빠르고 효율적으로 제공하기 위해 설계되었다.

→ CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져옵니다. 그러므로 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라집니다.

캐시 관리

🔎 캐시 사용하기

캐시는 다운로드 받은 데이터나 값을 미리 복사해 놓은 임시 장소이며,
데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.

브라우저 캐시를 활용하면 얻을 수 있는 효과

1) 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음
2) 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라짐.
3) 로딩이 빨라진 만큼 빠른 사용자 경험 제공 가능

🔎 캐시 검증 헤더와 조건부 요청

캐시 검증 헤더

캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더 : Last-Modified,Etag

조건부 요청 헤더

캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더 : If-Modified-Since,If-None-Match

트리쉐이킹(Tree Shaking)

🔎 트리쉐이킹이란

말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다.

1. JavaScript 파일의 크기

JavaScript 파일 크기의 증가, 요청 횟수의 증가는 그만큼 파일이 오고 가는 동안 화면 표시가 늦어진다는 것을 뜻한다. 파일 크기를 가능한 줄이는 것이 최적화에 도움이 된다.

2. JavaScript 파일의 실행 시간

🔎 JavaScript 트리쉐이킹

1) 필요한 모듈만 import 하기
2) Babelrc 파일 설정하기
: Babel은 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리로,아래와 같이 작성하면 ES5로 변환하는 것을 막을 수 있다.

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}

3) sideEffects 설정하기
웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다. 이 때 sideEffects를 설정하여 사이드 이펙트가 생기지 않을 것이라고 알려줄 수 있다.

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

4) ES6 문법을 사용하는 모듈 사용하기
트리쉐이킹이 적용되지 않는 라이브러리가 있다면 해당 라이브러리가 어떤 문법을 사용하고 있는지 확인해볼 필요가 있다.

🔎 Lighthouse

Lighthous는 사이트를 검사하여 성능 측정을 할 수있는 도구이다.

Chrome 개발자 도구에서 실행하기

1) 크롬에서 검사하고 싶은 페이지의 url을 입력합니다.
2) 개발자 도구를 엽니다.
3) lighthouse 탭을 클릭합니다.

Node CLI에서 실행하기

npm install -g lighthouse
lighthouse <url>
lighthouse --help

Lighthouse 분석 결과 항목

1) Performance: 웹 성능을 측정
2) Accessibility: 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인
3) Best Practices: 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인
4) SEO : 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인
5) PWA (Progressive Web App): 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인

profile
fejigu
console.log(frontendjigu( ☕️, 📱); // true
이전 포스트

[사용자 친화 웹] Figma로 KREAM 어플 클론하기

0개의 댓글