performance audit
웹 성능 감사 우선순위 지도
성능 개선은 먼저 기준선을 잡고, 지표가 가리키는 병목을 분리한 뒤, 사용자 영향이 큰 작업부터 처리한다. 개선 후에는 접근성과 회귀 방지도 같이 확인한다.
01
Baseline
Lighthouse와 Web Vitals로 현재 값을 기록한다.
02
Separate
네트워크, 렌더링, 스크립트 병목을 나눠 본다.
03
Prioritize
가장 큰 리소스와 렌더 차단 요소부터 줄인다.
04
Access
키보드 이동, 레이블, 색 대비가 유지되는지 본다.
05
Guard
예산과 CI 측정으로 성능 회귀를 막는다.
| 지표 | 의심 병목 | 우선 작업 | 재측정 기준 |
|---|---|---|---|
| LCP | 큰 이미지, 서버 응답, 렌더 차단 CSS | 이미지 크기, preload, 캐시 개선 | 주요 페이지의 대표 콘텐츠 시간 |
| INP | 긴 JS 작업, 무거운 이벤트 처리 | 코드 분할, 작업 분리, 핸들러 경량화 | 클릭과 입력 반응 시간 |
| CLS | 이미지 크기 미지정, 늦은 광고 삽입 | 공간 예약, 폰트 전략, 레이아웃 고정 | 스크롤 전후 레이아웃 이동량 |
비교
개선 전후는 같은 URL과 네트워크 조건에서 본다.
영향
홈, 결제, 로그인처럼 핵심 경로를 먼저 측정한다.
회귀
예산 초과를 배포 전에 막도록 기준값을 저장한다.