크롬 Lighthouse를 사용한 웹성능 개선하기

크롬에서 제공하는 Lighthouse는 웹의 성능, 접근성, SEO 등을 평가해주는 서비스입니다.

평가뿐 아니라 개선 방향까지도 제안해주기 때문에 웹사이트를 향상시키는 데 도움이 됩니다.

Lighthouse를 참고해서 성능에 대한 React App을 개선하는 방법들을 살펴보았습니다.

 

 

---

 

웹 성능 개선 적용 전후 비교

Lighthouse에서 성능 개선을 위해 제안해준 몇 가지를 적용해봤습니다.

다음과 같이 평가점수가 높아졌습니다.

 

Lighthouse 점수	전	후
모바일	17	53
데스크탑	71	92

 

적용해본 웹성능 개선 방법은 아래와 같습니다.

 

---

 

이미지 - WebP 이미지 형식 사용하기

• 전통적인 이미지 포맷인 PNG나 JPEG에 비해 25–35% 가량 파일 사이즈를 줄일수 있다.
• 지원하지 않는 브라우저를 위해 fallback 이미지 파일을 설정해주자.

 

포맷	투명	애니메이션	지원
PNG	O	X	모든 브라우저
JPEG	X	X	모든 브라우저
WebP	O	O	최신 브라우저

 

CanIUse 결과 (2021.2.11)

 

 

이미지 - Lazy Loading

• 이미지에 loading="lazy" 속성을 추가한다.
• 해당 내용이 스크린에 들어올 때 이미지를 페치해준다.
• 지원하지 않는 브라우저는 해당 속성을 무시하게 된다.

<img src="image.jpg" alt="..." loading="lazy">

 

CanIUse 결과 (2021.2.11)

 

 

이미지 - Responsive Images

Responsive Images는 세가지로 분류할 수 있다. Responsive images by MDN

1. 화면 크기에 따라 다른 사이즈의 이미지를 나타내는 방식
2. 화면 해상도에 따라 다른 사이즈의 이미지를 나타내는 방식
3. 화면 크기에 따라 아예 다른 이미지를 나타내는 방식

 

 

폰트

• font-display를 swap으로 설정한다.
• 폰트가 페치되기 전에 텍스트를 화면에 표시해준다.
• 이 속성은 모든 브라우저에서 지원되는 것은 아니다.

@font-face { font-family: Helvetica; font-display: swap; }

 

 

Code Splitting (React)

• lazy를 사용해서 코드를 쪼갠다. 이를 통해 화면에 필요한 components만 가져올수 있다.
• Suspense를 함께 사용하면 데이터가 fetch되기 전에는 falback으로 로딩을 표시할 수 있다.
• 무엇보다 react-router와도 연동된다! Code-Splitting by React

import React, { lazy, Suspense } from 'react';

const myComponent = lazy(() => import('./myComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <myComponent />
  </Suspense>
)

 

 

캐쉬

• 이미지, 폰트와 같이 거의 바뀌지 않는 자료는 캐쉬 기간을 1년 이상으로 설정해준다.