[샘플] CWV 개선 플로우

PSI/Lighthouse(랩)와 실사용(필드)을 분리해서 보고, “가장 큰 병목 1~2개”부터 제거하는 템플릿입니다.

지표(예시)

  • LCP: 느림 (대표 이미지/폰트)
  • INP: 나쁨 (무거운 JS/서드파티)
  • CLS: 변동 (레이아웃 예약 없음)

병목 원인

  • hero 이미지 용량 과다 / 미리 로드 없음
  • 웹폰트 늦게 로딩 / FOUT 처리 없음
  • 불필요 JS/태그 매니저 과다

변경

  • 이미지 webp/avif + 적정 크기
  • 중요 리소스 preload
  • 서드파티 지연 로딩/삭제
  • 캐시/헤더 최적화

재측정

  • PSI/Lighthouse 전후 비교
  • 실사용 데이터(누적) 확인
  • 회귀 테스트(주요 페이지)
CWV 상담하기 목록으로