왜 Lighthouse 점수가 중요한가
Lighthouse 점수는 단순한 숫자가 아닙니다. Google 검색 순위에 직접 영향을 주고, 사용자 이탈률과도 밀접한 관계가 있습니다. 페이지 로딩이 3초를 넘기면 53%의 사용자가 이탈합니다.
5가지 핵심 최적화
1. next/image로 이미지 최적화
모든 이미지를 next/image 컴포넌트로 교체하세요. 자동으로 WebP 변환, 지연 로딩, 반응형 크기 조정을 처리합니다. sizes 속성을 명시하면 불필요한 이미지 다운로드를 방지할 수 있습니다.
2. 폰트 최적화
next/font를 사용하면 폰트 파일을 빌드 타임에 최적화하고, FOUT/FOIT 문제를 해결합니다. display: swap과 unicode-range 서브셋팅으로 로딩 성능을 극대화하세요.
3. 동적 임포트로 코드 스플리팅
초기 로딩에 필요 없는 컴포넌트는 next/dynamic으로 지연 로딩합니다. 특히 GSAP, Chart.js 등 무거운 라이브러리가 포함된 컴포넌트에 효과적입니다.
4. 서버 컴포넌트 활용
Next.js App Router의 서버 컴포넌트는 클라이언트에 JavaScript를 보내지 않습니다. 데이터 fetching은 서버 컴포넌트에서, 인터랙션만 클라이언트 컴포넌트에서 처리하세요.
5. ISR로 캐싱 전략
자주 변경되지 않는 페이지는 ISR(Incremental Static Regeneration)을 적용합니다. revalidate 값을 적절히 설정하면 빌드 시 정적 생성 + 주기적 업데이트를 동시에 달성할 수 있습니다.
결과
이 5가지를 적용하면 대부분의 Next.js 프로젝트에서 Lighthouse Performance 90+ 달성이 가능합니다.