성능 병목 진단 우선순위

현상 재현

느린 화면, 네트워크 조건, 사용자 동작을 고정해 같은 조건에서 측정한다.

scenario

LCP가 느린지, INP가 나쁜지, TTFB가 긴지 먼저 구분한다.

web vitals

Performance는 메인 스레드, Network는 waterfall, analyzer는 JS 크기를 보여준다.

tool match

이미지, 동적 import, 캐시, 서버 쿼리 개선 뒤 같은 조건으로 다시 측정한다.

repeat

LCP

hero 이미지, 서버 응답, CSS blocking을 먼저 본다. next/image priority와 크기 지정, CDN 캐시를 함께 확인한다.

largest content

INP

큰 JS 번들, 긴 task, 불필요한 hydration이 후보가 된다. Client Component 범위를 줄이고 event handler 비용을 분리한다.

interaction

TTFB

DB 쿼리, 서버 fetch, 캐시 미스, middleware 비용을 점검한다. Route Segment cache와 revalidate 정책이 지표에 반영된다.

서버 경로

측정 URL 보고서마다 정확한 URL, 기기, 네트워크 조건이 남는다.

전후 비교 최적화 전후 동일 지표를 한 표로 남긴다.

실사용 랩 지표와 RUM 또는 Speed Insights의 필드 데이터를 구분한다.

LCP: 4.1s -> 2.2s
change: image dimensions + cache revalidate + dynamic import chart