병목 위치에 따라 이미지, 폰트, 스크립트, 데이터, 렌더링 전략을 다르게 쓴다
모든 최적화를 한꺼번에 적용하면 원인을 잃는다. 병목 위치를 고른 뒤 한 가지 전략을 적용하고 다시 측정한다.
| 병목 위치 | 대표 원인 | 적용 전략 | 주의점 |
|---|---|---|---|
| 이미지 | 큰 hero, 원본 크기 전송 | next/image, sizes, priority | priority 남발 금지 |
| 폰트 | 외부 요청, 폰트 교체 | next/font, subset | 레이아웃 이동 확인 |
| 스크립트 | 서드파티 JS, 큰 라이브러리 | next/script, dynamic import | 필수 스크립트 지연 금지 |
| 데이터 | 중복 fetch, 느린 DB | cache, revalidate, index | 최신성 요구 확인 |
| 렌더링 | 큰 클라이언트 컴포넌트 | server component, memo, virtualization | 상태 경계 재검토 |