Core Web Vitals
구글이 웹사이트의 사용자 경험을 수치로 평가하기 위해 정의한 세 가지 핵심 성능 지표입니다.
세 가지 지표
| 지표 | 측정 대상 | 우수 기준 |
|---|---|---|
| LCP (Largest Contentful Paint) | 가장 큰 콘텐츠가 표시되는 시점 | 2.5초 이내 |
| INP (Interaction to Next Paint) | 상호작용에 대한 응답성 | 200ms 이하 |
| CLS (Cumulative Layout Shift) | 예상치 못한 레이아웃 이동 정도 | 0.1 이하 |
LCP는 뷰포트 안에서 가장 큰 이미지나 텍스트 블록이 렌더링되기까지 걸린 시간입니다. 사용자가 "페이지가 떴다"고 느끼는 시점에 해당합니다.
INP는 페이지 체류 기간 전체에서 발생한 클릭·탭·키보드 입력의 지연을 관찰하고, 그중 가장 긴 상호작용을 기준으로 값을 정합니다. 과거 지표였던 FID가 첫 입력의 '지연'만 봤던 것과 달리, INP는 입력부터 화면 반영까지의 전 구간을 봅니다.
CLS는 사용자가 읽던 문장이 갑자기 밀리거나 버튼 위치가 바뀌어 오클릭이 나는 현상을 수치화한 것입니다. 이동한 영역의 비율과 이동 거리를 곱해 누적합니다.
개선 방법
LCP
- 이미지 최적화 — 적절한 이미지 포맷 선택, 압축,
srcset으로 해상도별 제공 - 웹 폰트 로딩 전략 조정,
preload같은 Resource Hint 활용 - 서버 응답 시간(TTFB) 단축, CDN 적용
INP
- 긴 작업을 쪼개 메인 스레드 점유 시간 줄이기
- 불필요한 자바스크립트 실행 제거, 코드 스플리팅으로 초기 실행량 감소
- 무거운 연산은
requestIdleCallback이나 워커로 이관
CLS
- 이미지·동영상에
width/height또는aspect-ratio를 명시해 자리를 미리 확보 - 폰트 교체 시 레이아웃이 흔들리지 않도록
font-display조정 (FOUT 참고) - 기존 콘텐츠 위에 배너·광고를 끼워 넣지 않기
주의사항
- Core Web Vitals는 검색 순위 요소이므로 SEO에도 직접 영향을 줍니다.
- 개발 환경의 Lighthouse 점수(랩 데이터)와 실제 사용자 기기에서 수집한 필드 데이터(CrUX)는 다를 수 있습니다. 순위에 반영되는 것은 필드 데이터입니다.
- 지표 구성은 고정된 것이 아닙니다. FID가 2024년 INP로 대체된 것처럼 바뀔 수 있습니다.
핵심 정리
- LCP(로딩)·INP(응답성)·CLS(시각적 안정성) 세 축으로 사용자 경험을 측정합니다.
- 각각 2.5초 / 200ms / 0.1이 우수 기준입니다.
- 사용자 경험뿐 아니라 검색 순위에도 영향을 주므로 프론트엔드 최적화의 기준선이 됩니다.