LCP 4.2s→1.8s, CLS 0.18→0.02 달성한 Next.js App Router 최적화

Context

Next.js App Router의 Streaming 모델 도입으로 인한 레이아웃 시프트 발생 및 Client Component 비중 증가에 따른 메인 스레드 부하 증가 상황. 기존의 단순 최적화 방식으로는 LCP, CLS, INP 지표의 실질적 개선에 한계가 존재함.

Technical Solution

• LCP 최적화를 위해 단일 LCP 요소에 priority 속성을 부여하여 Lazy Loading을 배제하고 브라우저 Preload 우선순위 확보
• 외부 이미지 CDN 도메인에 대해 preconnect 및 dns-prefetch를 설정하여 DNS Lookup 및 TLS Handshake 시간 단축
• Viewport별 sizes 속성 정밀 정의를 통해 디바이스 크기에 최적화된 이미지 리소스 다운로드 유도
• Suspense Boundary의 Fallback으로 실제 렌더링될 컴포넌트와 치수가 동일한 Skeleton UI를 설계하여 Streaming 과정의 Layout Shift 원천 차단
• next/font의 adjustFontFallback 설정을 통해 Custom Font 로드 시 발생하는 FOUT 및 시각적 편차 제거
• Named Import 기반의 Tree-shaking 적용으로 번들 사이즈를 최적화하고 Client Component의 메인 스레드 점유 시간 감소