성능 병목은 느린 지표를 리소스, 렌더링, 서버, 자바스크립트로 나눠 찾는다
점수만 낮다고 바로 최적화하지 않는다. 어떤 지표가 나쁜지 먼저 보고, 그 지표를 흔드는 병목 후보를 좁힌다.
| 나쁜 신호 | 가능한 병목 | 확인 도구 | 첫 개선책 |
|---|---|---|---|
| LCP 느림 | 이미지, 서버 응답, render-blocking CSS | Lighthouse, Network | next/image, 캐시, critical CSS 축소 |
| CLS 큼 | 이미지 크기 미지정, 폰트 교체 | Performance, Web Vitals | width/height, next/font |
| INP/TBT 나쁨 | 긴 JS 실행, 무거운 컴포넌트 | Performance flame chart | dynamic import, memo, 작업 분할 |
| TTFB 느림 | DB 쿼리, 서버 액션, 외부 API | 서버 로그, DB slow query | 인덱스, 캐싱, select 축소 |