실제 사용자가 느끼는 페이지 품질을 재기 위해 구글이 정한 지표 모음. 그중 로딩·반응성·시각적 안정성을 대표하는 세 가지를 Core Web Vitals라고 부른다.
| 지표 | 재는 것 | '좋음' 기준 |
|---|---|---|
| LCP(Largest Contentful Paint) | 화면에서 가장 큰 콘텐츠(히어로 이미지, 큰 글 덩어리)가 그려지기까지 | 2.5초 이하 |
| INP(Interaction to Next Paint) | 클릭·탭·키 입력부터 다음 화면이 그려지기까지 | 200ms 이하 |
| CLS(Cumulative Layout Shift) | 로딩 중 콘텐츠가 예기치 않게 밀린 정도 | 0.1 이하 |
- INP는 2024년 3월에 FID(First Input Delay)를 대체했다. FID는 첫 입력의 대기 시간만 봐서, 첫 클릭만 빠르면 이후가 느려도 좋은 점수를 받았다. INP는 페이지에서 일어난 상호작용 전체를 보고, 입력 지연·핸들러 실행·화면 갱신까지 모두 포함한다
- 판정은 실제 방문 데이터(CrUX, Chrome User Experience Report)의 75번째 백분위(p75) 기준이다. 방문의 75%가 '좋음'이어야 통과다. 실험실 측정(Lighthouse)과 현장 데이터가 다를 수 있다
- 검색 순위 요소이지만 결정적이지는 않다. 비슷한 페이지 사이에서 우열을 가르는 정도로 보는 편이 맞다
무엇이 지표를 나쁘게 하나
- LCP: 큰 이미지가 늦게 발견되거나 다른 리소스와 대역폭을 다툼(하위 구간으로 나눠 원인을 찾는다) → preload, fetchpriority, 첫 화면 이미지에 lazy 금지(이미지 loading 속성), SSR(Server-Side Rendering)
- INP: 메인 스레드를 오래 잡는 긴 태스크 → 이벤트 루프, rAF(requestAnimationFrame) 안의 무거운 작업, useTransition으로 급하지 않은 업데이트 미루기
- CLS: 크기 없는 이미지·광고, 늦게 들어오는 웹폰트 →
width·height나 aspect-ratio로 자리 잡기
"반응이 400ms 안에 와야 몰입이 깨지지 않는다"는 도허티 임계도 INP와 같은 문제의식을 담고 있다. 지표 자체가 목표가 되면 엉뚱한 최적화로 흐르기 쉽다는 점(굿하트의 법칙)도 기억해 둘 만하다.