Next 성능 최적화 진단

지표 선택

느린 첫 화면인지, 클릭 반응인지, 라우트 전환인지 먼저 사용자 증상으로 나눈다.

하나의 최적화가 모든 지표를 고치지는 않는다

큰 이미지, 웹폰트, CSS 차단, 서버 응답 지연 중 어느 요소가 LCP인지 본다.

LCP element를 직접 확인한다

클라이언트 컴포넌트 번들, hydration, 무거운 이벤트 핸들러가 입력을 막는지 분석한다.

JS 실행 시간이 체감 반응을 좌우한다

fetch cache, database query, route handler, revalidate 정책이 TTFB에 미치는 영향을 본다.

서버 컴포넌트도 느릴 수 있다

최적화 전후 Lighthouse, Web Vitals, bundle analyzer, server timing을 같은 조건으로 비교한다.

수치가 없으면 개선 여부가 흐리다

LCP

첫 화면 주요 요소 이미지 크기, priority, preload, font display, 서버 응답을 함께 본다.

가장 큰 요소가 무엇인지 확인한다

INP

입력 반응 long task, 이벤트 핸들러, hydration, 상태 업데이트 범위를 줄인다.

상호작용 페이지에서 중요하다

TTFB

서버 응답 시작 느린 fetch, DB, dynamic rendering, cache miss를 추적한다.

Server-Timing 헤더가 도움이 된다

Bundle

클라이언트 JS 비용 use client 경계, 큰 라이브러리, dynamic import를 점검한다.

서버 컴포넌트로 보낼 수 있는 코드를 보낸다

LCP 요소 측정 도구에서 실제 LCP element가 무엇인지 확인한다.

번들 분석 큰 클라이언트 chunk가 어떤 import에서 왔는지 찾는다.

서버 시간 cache hit와 miss에서 TTFB가 어떻게 달라지는지 비교한다.