[샘플] CWV 개선 플로우
PSI/Lighthouse(랩)와 실사용(필드)을 분리해서 보고, “가장 큰 병목 1~2개”부터 제거하는 템플릿입니다.
지표(예시)
- LCP: 느림 (대표 이미지/폰트)
- INP: 나쁨 (무거운 JS/서드파티)
- CLS: 변동 (레이아웃 예약 없음)
병목 원인
- hero 이미지 용량 과다 / 미리 로드 없음
- 웹폰트 늦게 로딩 / FOUT 처리 없음
- 불필요 JS/태그 매니저 과다
변경
- 이미지 webp/avif + 적정 크기
- 중요 리소스 preload
- 서드파티 지연 로딩/삭제
- 캐시/헤더 최적화
재측정
- PSI/Lighthouse 전후 비교
- 실사용 데이터(누적) 확인
- 회귀 테스트(주요 페이지)