Google은 Core Web Vitals를 직접적인 순위 신호로 사용합니다. 2026년에는 세 가지 지표가 "좋음" 임계값을 정의합니다: LCP 2.5초 이하, INP 200밀리초 이하, CLS 0.1 이하. 셋 중 하나라도 놓치면 페이지 경험 신호를 잃습니다. 이 가이드는 각 지표가 실제로 무엇을 측정하는지, 가장 효과적인 수정 방법을 설명합니다.

LCP — Largest Contentful Paint (최대 콘텐츠풀 페인트)

LCP는 탐색 시작부터 뷰포트에서 가장 큰 가시적 요소의 렌더링이 완료될 때까지의 시간을 측정합니다. 실제로 LCP 요소는 거의 항상 히어로 이미지, 배경 이미지, 또는 큰 텍스트 블록입니다.

점수	LCP
좋음	≤ 2.5초
개선 필요	2.5–4.0초
나쁨	> 4.0초

주요 LCP 수정 방법

LCP 이미지를 동일 출처 또는 빠른 CDN에서 제공하세요. DNS 조회, TCP 핸드셰이크, TLS 협상마다 첫 바이트 전에 50~200ms가 추가됩니다.
WebP 또는 AVIF로 변환하세요. 400KB JPEG LCP 이미지는 90~120KB WebP가 됩니다 — 3G 연결에서 300ms를 절약합니다.
LCP 이미지에 fetchpriority="high"를 추가하세요. 브라우저에 다른 이미지와 비중요 리소스보다 이 요청을 우선시하도록 지시합니다.
LCP 이미지를 프리로드하세요. <link rel="preload" as="image" href="/hero.webp">는 HTML 파서가 <img> 태그에 도달하기 전에 프리로드 큐에 넣습니다.
LCP 이미지에 절대 레이지 로딩을 쓰지 마세요. 히어로 이미지에 loading="lazy"는 500ms 이상을 추가하는 흔한 실수입니다.
LCP 요소 위의 렌더링 차단 리소스를 제거하세요 — 중요하지 않은 스타일시트, <head> 내의 동기 스크립트.

INP — Interaction to Next Paint (다음 페인트까지의 상호작용)

INP는 2024년 3월 FID(First Input Delay)를 대체했습니다. 페이지 방문 중 모든 사용자 인터랙션 — 클릭, 탭, 키보드 입력 — 에서 최악의 인터랙션 지연을 측정합니다. INP는 입력부터 다음 렌더링 프레임까지의 전체 지속 시간을 캡처합니다.

점수	INP
좋음	≤ 200ms
개선 필요	200–500ms
나쁨	> 500ms

주요 INP 수정 방법

긴 태스크를 분리하세요. 50ms 이상의 JavaScript 태스크는 메인 스레드를 차단합니다. scheduler.yield()나 setTimeout(fn, 0)으로 청크 사이에 브라우저에 제어권을 반환하세요.
무거운 작업을 메인 스레드 밖으로 이동하세요. Web Worker는 사용자 인터랙션을 차단하지 않고 데이터 처리, 파서, 직렬화를 실행할 수 있습니다.
레이아웃 스래싱을 피하세요. DOM에 교차된 읽기/쓰기는 강제 동기 레이아웃을 유발합니다. DOM 읽기를 먼저 일괄 처리하고, 그다음 DOM 쓰기를 일괄 처리하세요.
서드파티 스크립트를 지연 로드하세요. 분석, 채팅 위젯, A/B 테스트 스크립트는 흔한 INP 킬러입니다. <script defer>나 load 이벤트 이후에 로드하세요.
React 하이드레이션 비용을 줄이세요. 인터랙션 시 하이드레이션되는 큰 React 트리는 수백 밀리초의 INP 스파이크를 유발합니다. Suspense 경계와 선택적 하이드레이션을 사용하세요.

CLS — Cumulative Layout Shift (누적 레이아웃 시프트)

CLS는 예상치 못한 레이아웃 이동을 측정합니다 — 사용자가 읽거나 클릭하려는 순간 요소들이 움직이는 것입니다. 점수는 각 이동의 뷰포트 영향 비율과 이동 거리를 곱한 모든 레이아웃 이동 점수의 합으로 계산됩니다.

점수	CLS
좋음	≤ 0.1
개선 필요	0.1–0.25
나쁨	> 0.25

주요 CLS 수정 방법

항상 이미지 너비와 높이를 지정하세요. 치수가 없으면 브라우저는 이미지가 로드될 때까지 공간을 확보하지 않아 이동이 발생합니다. width와 height 속성이나 CSS의 aspect-ratio를 사용하세요.
font-display: optional을 쓰거나 폰트를 프리로드하세요. 폴백 폰트가 그려진 후 스왑되는 웹 폰트는 레이아웃 이동을 유발합니다.
광고, 임베드, iframe을 위한 공간을 확보하세요. 콘텐츠가 로드되기 전에 고정 크기의 플레이스홀더 컨테이너를 삽입하세요.
기존 콘텐츠 위에 DOM을 삽입하지 마세요. 배너, 쿠키 안내, 페이지 맨 위에 삽입되는 동적 콘텐츠는 모든 것을 아래로 밀어냅니다.

Core Web Vitals 측정

랩 도구(Lighthouse, PageSpeed Insights)는 시뮬레이션된 점수를 제공합니다. 필드 데이터(Chrome 사용자 경험 보고서, Search Console)는 실제 사용자 경험을 반영합니다. Google은 순위 신호에필드 데이터를 사용합니다. 실제 방문의 75번째 백분위수가 임계값을 충족해야 합니다 — 중앙값이나 최선의 경우가 아닙니다.

우선순위

LCP를 먼저 수정하세요 — 인지 속도와의 상관관계가 가장 높고 순위 영향이 가장 큽니다. 그다음 INP — 인터랙티비티에 직접 영향을 미쳐 사용자가 느낄 수 있습니다. CLS는 마지막 — 보통 HTML 속성 변경만으로 수정 가능하며 아키텍처 작업이 필요 없습니다.