웹 성능 측정 Core Web Vitals 개선 방법

Core Web Vitals 3가지 지표와 개선 방법:

1. LCP (Largest Contentful Paint) — 2.5초 이내:

• 히어로 이미지에 priority / fetchpriority="high"
• 서버 응답 시간 단축 (캐싱, CDN)
• 렌더 블로킹 리소스 제거

2. INP (Interaction to Next Paint) — 200ms 이내:

• 메인 스레드 블로킹 줄이기
• 무거운 작업은 Web Worker로
• 이벤트 핸들러 최적화

3. CLS (Cumulative Layout Shift) — 0.1 이하:

• 이미지/비디오에 width/height 명시
• 폰트 로딩 시 레이아웃 이동 방지 (font-display: optional)
• 동적 콘텐츠에 고정 높이 확보

측정: Chrome DevTools → Lighthouse, PageSpeed Insights