Next.js 최적화는 리소스 크기, 로딩 순서, 캐시 정책을 함께 본다
이미지, 폰트, 스크립트, 데이터 캐시, 코드 분할은 서로 다른 병목을 줄인다. 하나의 만능 해법처럼 쓰면 효과가 흐려진다.
| 기법 | 줄이는 병목 | 좋은 적용 | 검토 신호 |
|---|---|---|---|
| next/image | 이미지 전송량, LCP | width/height/alt, priority 제한 | LCP 이미지가 명확함 |
| next/font | 폰트 요청, CLS | display swap, 필요한 subset | 레이아웃 흔들림 감소 |
| next/script | 서드파티 JS 차단 | afterInteractive/lazyOnload 선택 | 메인 스레드 점유 감소 |
| fetch cache / ISR | 반복 DB/API 요청 | revalidate, tag/path 재검증 | 최신성과 캐시 수명 균형 |
| dynamic import | 초기 JS 번들 | 무거운 위젯 지연 로드 | 초기 번들 크기 감소 |