PERF TOOLING

성능 도구는 병목 유형별로 골라야 원인이 보인다

Lighthouse 점수만으로는 충분하지 않다. Web Vitals, bundle analyzer, React Profiler, server timing은 각각 로딩, JS 무게, 렌더 비용, 서버 지연을 다른 각도에서 보여준다.

01

사용자 지표 확인

LCP, CLS, INP가 어느 페이지와 기기에서 나쁜지 먼저 본다.

field data
02

로딩 분석

Lighthouse/Performance 패널로 네트워크, 렌더 차단, 이미지 우선순위를 본다.

lab trace
03

JS 무게 확인

bundle analyzer로 큰 패키지와 중복 청크를 찾는다.

bundle cost
04

서버 지연 추적

server timing, 로그, tracing으로 DB/API/cache miss 시간을 분리한다.

백엔드 경로
LCP slow
큰 이미지/서버 TTFB/렌더 차단 Performance trace와 image priority, cache header를 함께 본다.
hero resource
CLS high
이미지·폰트·동적 UI 크기 미고정 Layout Shift 영역을 캡처해 aspect-ratio와 fallback 크기를 고정한다.
visual stability
INP bad
긴 JS task 또는 비싼 render React Profiler와 Performance long task로 클릭 후 병목을 찾는다.
interaction
Large JS
초기 번들 과다 dynamic import, server component 전환, dependency 대체를 검토한다.
First Load JS

운영 루프

전후 비교 최적화 전후 같은 URL과 기기 조건으로 측정해 개선 폭을 기록한다.
현장 데이터 실사용 RUM과 실험실 Lighthouse가 다르면 네트워크/기기 분포를 본다.
회귀 방지 bundle size와 Core Web Vitals 예산을 CI 또는 모니터링에 둔다.