Performance

Next.js 성능 도구 선택

next/image, next/font, Script strategy, cache/revalidate, bundle analyzer는 LCP, INP, 전송 JS 크기를 서로 다른 지점에서 줄인다.

도구별 적용 지점

core web vitals

이미지

Image에 width/height, fill+sizes, preload, placeholder를 맞춰 LCP를 잡는다.

폰트

next/font로 self-hosting, display swap, variable className을 적용한다.

스크립트

Script strategy를 afterInteractive, lazyOnload, beforeInteractive로 구분한다.

캐싱

fetch cache, next.revalidate, revalidatePath, revalidateTag로 갱신한다.

Core Web Vitalsimage/font/scriptcache/revalidatebundle analyzer
도구별 적용 지점

@next/bundle-analyzer로 큰 클라이언트 청크를 찾고, Web Vitals가 나빠진 화면부터 이미지, 폰트, 스크립트, 캐시 설정을 하나씩 검증한다.