최적화는 코드 예시가 아니라 병목 신호와 연결될 때 의미가 있다
next/image, next/font, next/script, dynamic import는 각각 해결하는 문제가 다르므로 측정값을 보고 순서를 정한다.
| 측정 신호 | 우선 적용 | 수정 위치 | 검증 방법 |
|---|---|---|---|
| LCP가 큼 | next/image, priority 조정 | 대표 이미지 컴포넌트 | Lighthouse LCP 변화 |
| CLS가 큼 | next/font, 고정 치수 | layout, 이미지/카드 레이아웃 | Layout shift 기록 |
| JS 실행이 느림 | next/script 전략, dynamic import | 분석 스크립트, 차트/에디터 | Performance 탭 main thread |
| 서버 응답 반복 | fetch cache, ISR, revalidateTag | 데이터 페칭 함수 | Network/API 호출 수 |