MEASURE · PRIORITIZE · VERIFY

성능 개선은 지표별 병목을 따로 잡는다

LCP, INP, CLS가 가리키는 원인이 다르므로 같은 개선 작업으로 묶지 않고 단계별로 검증합니다.

LCP≤ 2.5s초기 주요 콘텐츠와 이미지 경로를 확인합니다.
INP낮게긴 작업, 이벤트 처리, JS 실행 시간을 줄입니다.
CLS≤ 0.1이미지 크기, 광고 슬롯, 폰트 교체를 고정합니다.

1. 기준선

Lab 측정Lighthouse로 재현 가능한 수치를 남깁니다.
Field 비교실제 사용자 환경의 느린 구간을 확인합니다.

2. 리소스

이미지크기, 포맷, lazy loading을 먼저 봅니다.
번들초기 JS와 CSS를 필요한 만큼만 보냅니다.

3. 실행

렌더 차단critical CSS, defer, async를 적용합니다.
Long Task50ms 이상 작업은 쪼개거나 worker로 보냅니다.

4. 회귀 방지

예산이미지, JS, LCP 기준을 CI에 둡니다.
접근성개선 후 키보드와 대비를 다시 확인합니다.

성능 작업의 기준은 한 번 빠르게 만드는 것이 아니라, 느려지는 신호를 다시 잡아낼 수 있게 만드는 과정입니다.