browser
Web Vitals.
LCP, INP, CLS 등 Core Web Vitals와 프론트엔드 최적화 관점
Web Vitals는 사용자 체감 품질을 수치화한 지표다. Google Core Web Vitals 3가지가 SEO, UX 기준으로 중요하다.
📊 Core Web Vitals (2024~)
| 지표 | 의미 | 좋은 기준 (대략) |
|---|---|---|
| LCP (Largest Contentful Paint) | 주요 콘텐츠 표시까지 | ≤ 2.5s |
| INP (Interaction to Next Paint) | 상호작용 응답 (FID 대체) | ≤ 200ms |
| CLS (Cumulative Layout Shift) | 레이아웃 흔들림 누적 | ≤ 0.1 |
📈 기타 유용 지표
- FCP (First Contentful Paint): 첫 텍스트/이미지
- TTFB (Time to First Byte): 서버/네트워크
- TBT (Total Blocking Time): 메인 스레드 장시간 blocking
🚀 개선 방향
- LCP: 이미지 최적화, preload, SSR/SSG, CDN
- INP: 긴 task 분할, debounce, Web Worker
- CLS: width/height 예약,
font-display, 동적 삽입 공간 확보
🔗 참고 자료
- Web Vitals (web.dev) — Core Web Vitals(LCP, INP, CLS) 정의와 임계값을 정리한다.
- Largest Contentful Paint (web.dev) — LCP 측정과 개선 방향을 설명한다.
- Interaction to Next Paint (web.dev) — INP(구 FID 대체) 지표를 다룬다.
- Cumulative Layout Shift (web.dev) — CLS 점수 산정과 흔들림 완화 방법을 설명한다.