LightHouse로 성능 분석해보기

앞서 성능 최적화는 크게 로딩 최적화와 렌더링 최적화로 나뉜다고 했다. 진행하고 있는 프로젝트에서 홈페이지의 성능을 분석하고 어떤 것부터 해야 하는지 우선순위를 정하자.

로딩 최적화

개선 방법

1. Enable text compression (6,567 KiB)
   HTML, CSS, JS 등의 텍스트 리소스를 Gzip/Brotli 압축 안 한 상태

   • 서버 설정에서 Gzip 또는 Brotli 압축 활성화
     ex) Nginx, Express compression 미들웨어

2. Minify JavaScript (3,364 KiB)
   JS 코드에 불필요한 공백, 주석 포함

   • 빌드 시 Terser, esbuild 등으로 최소화(minify)
     vite, webpack 자동 처리 확인

3. Reduce unused JavaScript (3,765 KiB)
   실제 사용하지 않는 JS 코드도 함께 다운로드됨

   • 코드 스플리팅, tree-shaking, lodash → lodash-es, moment → dayjs 같은 경량화 라이브러리 사용

4. Preconnect to required origins (450ms)
   외부 리소스 도메인 연결 시 지연 발생

   • <link rel="preconnect" href="https://example.com" />로 DNS/TCP 핸드셰이크 미리 수행

5. Serve images in next-gen formats (541 KiB)
   JPEG/PNG보다 용량 큰 이미지 사용

   • WebP, AVIF 포맷으로 변환하여 제공
     ex) next/image, sharp, squoosh

6. Properly size images (656 KiB)
   너무 큰 이미지를 불필요하게 사용

   • <img width="300" height="300" /> 같이 이미지 사이즈 명시 + 리사이징

7. Eliminate render-blocking resources (690ms)
   CSS/JS가 초기 렌더링을 막고 있음

   • async/defer 스크립트 사용, font-display: swap 적용, critical CSS 분리

8. Avoid serving legacy JavaScript to modern browsers (39 KiB)
   오래된 브라우저용 JS까지 함께 제공

   • 모던 빌드 분리 (module/nomodule) 전략 적용
     ex) vite, babel-preset-env

렌더링 최적화

개선 방법

1. Minimize main-thread work (2.7s)
   초기 렌더링 중 JS parsing, layout 등으로 메인 쓰레드가 오래 점유됨

   • JS 크기 줄이기 (코드 스플리팅)
   • 복잡한 연산은 Web Worker로 분리
   • React 컴포넌트 리렌더링 최소화 (memo, useMemo, useCallback)

2. Page prevented back/forward cache restoration (1 failure)
   뒤로가기 캐시(bfcache)가 작동 안 됨. 사용자는 항상 새로 로딩하게 됨

   • 페이지 이동 시 unload, beforeunload, window.location.href 사용 x
   • window.history.pushState로 soft navigation 활용 가능
   • SPA에서는 React Router의 <Link> 적극 활용

로딩 최적화 우선순위

1. Gzip/Brotli 압축 활성화 (Enable text compression)

2. JS 번들 크기 최소화 (Minify + Reduce unused JS)

3. 이미지 최적화 (WebP 변환, 리사이징)

4. preconnect, async, font-display 등 연결 & 블로킹 자원 제거

렌더링 최적화 우선순위

1. 메인 쓰레드 작업 분리 (Minimize main-thread work)

2. 컴포넌트 리렌더링 줄이기 (memo, useMemo, 상태 구조 정리)

3. back/forward cache 활용 가능하게 수정