성능 지표는 병목 위치와 개선 작업을 연결해 읽는다
느린 웹 페이지는 로딩, 렌더링, 상호작용, 네트워크 중 어떤 지표가 나쁜지에 따라 개선 작업이 달라진다.
| 지표 | 의미 | 주요 병목 | 개선 작업 |
|---|---|---|---|
| LCP | 주요 콘텐츠가 보이는 시간 | 큰 이미지, 느린 서버, CSS 차단 | 이미지 최적화, preload, CDN |
| CLS | 레이아웃 이동 | 이미지 크기 미지정, 늦은 광고 | 고정 크기, reserved space |
| INP | 상호작용 응답성 | 긴 JS 작업, 과한 렌더링 | 코드 분할, 작업 쪼개기 |
| TTFB | 첫 바이트 응답 시간 | 서버 처리, DB, 캐시 부재 | 캐시, DB 튜닝, edge 배포 |
| Bundle | 다운로드와 실행 비용 | 큰 JS, 중복 의존성 | tree shaking, lazy loading |
성능 최적화는 “빠르게 만들기”가 아니라 나쁜 지표가 가리키는 병목을 먼저 찾는 일이다.