라이트하우스는 웹앱 품질 측정도구이다. 웹앱의 성능, 접근성, SEO 등을 검사해주고, PWA 조건을 만족하는지도 검사해준다. 크롬 확장 프로그램으로 다운받아서 사용할 수 있고, 혹은 크롬 개발자 도구에서 Lighthouse 탭으로 들어가 사용할 수도 있다.
Performance
First Contentful Paint
- Eliminate render-blocking resources
- Ensure text remains visible during webfont load
Largest Contentful Paint
뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간
-
Reduce unused JavaScript
LightHouse에서는 SSR 을 하지 않으면 React.lazy()를, SSR을 하면 loadable-component와 같은 third-party-library를 사용하여 코드 스플리팅을 하기를 권하고 있다.
회사의 프로젝트는 NextJS 프로젝트로 SSR을 하고 있어 loadable-component를 적용해야 했으나 그에 앞서 webpack을 통한 코드 스플리팅을 먼저 체크해 보기로 했다.
<<< Webpack에 의한 코드 스플리팅 >>>
loadable-component를 적용시키고 다시 테스트 해보니 당황스럽게도 performance 점수가 10점 이상 하락한 것을 볼 수 있었다;;;; 정신을 차리고 검색을 해보니 nextJS는 이미 자체적으로 코드 스플리팅을 하기 때문에 loadable-component를 적용할 필요가 없다는 것을 알 수 있었다.
사실 이미 nextJS에서 코드 스플리팅을 적용하고 있다고 해도 loadable-component를 사용함으로써 추가적으로 성능이 더 개선되지 않을까? 하는 기대감을 가졌지만(ㅎㅎㅎㅎㅎ) 결과는 그렇지 못한 것 같다.
-
Avoid enormous network payloads
데이터 압축/축소, Webp 이미지의 사용, PRPL 패턴적용 등으로 이 문제를 해결 할 수 있다.
만약 otf 또는 ttf 타입의 폰트를 사용하고 있다면 woff형식을 사용함으로써 크기를 줄일 수 있다. WOFF(Web Open Font Format)는 웹 글꼴 형식으로, 압축된 형식이라 TTF나 OTF보다 빠르게 로드될 뿐만 아니라 메타 데이터로 라이센스 정보를 포함할 수도 있다고 한다.
다른 블로그에서 기존에 사용하던 TTF타입의 폰트를 WOFF로 바꿔, 2mb에서 600kb로 크기를 줄인 사례를 보았는데 나의 경우에는 이미 WOFF 타입을 사용하고 있을 뿐만 아니라 TTF타입 이나 WOFF타입이나 크기의 차이가 거의 없다는 것이 함정.
WebP는 구글에서 만든 이미지 포맷으로 웹사이트의 페이지를 보다 빠르게 읽을 수 있도록(웹고속화) 개발된 새로운 이미지 압축 포맷이다. 크롬을 비롯해 대부분의 브라우저가 Webp를 지원하지만 IE와 같이 지원하지 않는 브라우저도 있으므로 Webp 이미지를 적용할 때는 다음과 같이 쓴다.
<< webp 이미지 쓰는법 >>
PRPL 패턴으로 네트워크 속도 개선하고 코드 캐싱하기
Push (or preload) the most important resources.
중요한 리소스는 <link rel="preload" ...> 처럼 preload를 붙여 미리 로드해올 수 있다.
Render the initial route as soon as possible.
Pre-cache remaining assets.
서비스워커를 활용해서 HTML, CSS 등을 캐싱할 수 있다.
Lazy load other routes and non-critical assets.
- Ensure text remains visible during webfont load
CSS의@font-face부분에font-display: swap를 넣어주면 폰트가 로딩되지 않았을 때나 폰트를 로드하지 못했을 때 시스템 폰트를 보여준다. 이렇게 넣어주지 않으면 폰트가 로드되지 않았을 때 글씨가 화면에 나타나지 않는다.
link 태그로 불러오는 웹 폰트일 경우,<link rel="preload" as="font">처럼preload를 넣어 주면 폰트를 먼저 불러오기 때문에 렌더링된 처음부터 폰트가 적용되어 있다.
만약 구글 폰트라면, url 뒤에&display=swap을 넣어주면 swap이 적용된다. 예시:<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
Cumulative Layout Shift
- Image elements do not have explicit width and height
