코어웹바이탈 | LCP·INP·CLS 3지표 개선

코어웹바이탈은 LCP·INP·CLS 3지표로 사용자 체감 속도를 정량화한 구글 표준입니다. 모바일 실측값이 양호 기준을 넘으면 순위에서 밀리므로, 코어웹바이탈 개선은 크롤·색인 다음 축입니다.

코어웹바이탈이란 — 세 지표의 정의

코어웹바이탈은 Google이 2020년 발표한 사용자 경험 정량 지표로, 페이지 로딩 체감·상호작용 반응·시각적 안정성 세 축을 각각 하나의 대표 지표로 압축한 것입니다. 이 표준은 알고리즘 신호로 랭킹에 반영되고, 실측값이 양호 기준을 넘어가면 다른 신호가 좋아도 순위 상승 폭이 제한됩니다. 특히 모바일 실측값이 데스크톱보다 큰 무게로 작동합니다.

3지표가 각각 다루는 사용자 경험

LCP는 주요 콘텐츠가 화면에 표시되는 순간까지 걸리는 시간, INP는 사용자 상호작용에 페이지가 반응하는 속도, CLS는 로딩 중 요소가 이동해 사용자가 잘못된 위치를 클릭하게 되는 정도를 측정합니다. 세 지표는 서로 다른 원인에서 발생하므로, 하나를 개선한다고 다른 지표가 함께 좋아지지 않습니다.

실측과 실험실 측정의 차이

PageSpeed Insights 리포트는 실측(Field Data)과 실험실(Lab Data) 두 값을 함께 보여줍니다. 실측은 실제 사용자 브라우저에서 수집된 값이고, 실험실은 통제된 환경에서 측정된 값입니다. 순위 반영에는 실측값이 사용되므로, 실험실 값만 개선하고 실측이 그대로면 순위에는 영향이 없습니다.

LCP — 주요 콘텐츠 표시 속도

LCP(Largest Contentful Paint)는 코어웹바이탈 3지표 중 첫 지표로, 페이지 로딩 시작부터 뷰포트 내 가장 큰 콘텐츠가 표시될 때까지의 시간입니다. 이 지표가 나쁘면 사용자는 페이지가 느리다고 즉시 느끼고, 상당수는 로딩을 기다리지 않고 이탈합니다.

LCP 양호 기준과 원인

모바일 실측 기준으로 2.5초 이내가 양호, 2.5~4초가 개선 필요, 4초 초과가 나쁨으로 분류됩니다. LCP를 늘리는 주요 원인은 서버 응답 지연, 큰 이미지 로딩, 렌더링 차단 자원(CSS·JS), 클라이언트측 렌더링 지연 네 가지입니다. 진단은 PageSpeed Insights의 원인 분석을 순서대로 훑는 방식이 효율적입니다.

LCP 개선 실전 방법

가장 효과가 큰 개선은 히어로 이미지 최적화입니다. WebP 또는 AVIF 포맷으로 변환하고, 뷰포트 크기에 맞는 해상도로 서빙하고, preload로 우선 로딩하면 LCP 값이 눈에 띄게 낮아집니다. 서버측 렌더링을 도입하거나 CDN을 통해 응답 시간을 줄이는 것도 두 번째로 큰 개선 폭을 가져옵니다.

INP — 상호작용 반응 속도

INP(Interaction to Next Paint)는 코어웹바이탈 두 번째 지표로, 2024년 3월 FID를 대체해 정식 도입된 지표이며 사용자 클릭·탭·키 입력에 페이지가 반응할 때까지 걸리는 시간을 측정합니다. INP가 나쁘면 사용자는 페이지가 멈춘 것처럼 느낍니다.

INP 양호 기준과 측정 원리

모바일 실측 기준으로 200ms 이내가 양호, 200~500ms가 개선 필요, 500ms 초과가 나쁨으로 분류됩니다. INP는 페이지 방문 동안 발생한 모든 상호작용의 반응 시간 중 최악에 가까운 값을 취하므로, 대부분의 상호작용이 빨라도 몇 개가 느리면 지표가 나빠집니다.

INP 개선 실전 방법

가장 큰 원인은 무거운 JavaScript 실행입니다. 긴 실행 태스크를 작게 쪼개어 브라우저가 사용자 입력을 처리할 틈을 주는 방식(코드 분할·yield to main thread), 사용하지 않는 서드파티 스크립트 제거, 불필요한 이벤트 리스너 제거 순으로 접근하면 INP가 뚜렷하게 개선됩니다.

CLS — 시각적 안정성

CLS(Cumulative Layout Shift)는 코어웹바이탈 마지막 지표로, 페이지 로딩 중 요소가 예상치 못하게 이동한 정도를 측정합니다. CLS가 나쁘면 사용자가 클릭하려던 요소가 갑자기 이동해 잘못된 버튼을 누르는 경험이 반복됩니다.

CLS 양호 기준과 발생 원인

0.1 이하가 양호, 0.1~0.25가 개선 필요, 0.25 초과가 나쁨으로 분류됩니다. CLS 발생의 주요 원인은 크기가 지정되지 않은 이미지·비디오, 늦게 로드되는 폰트로 인한 텍스트 재배치, 광고·임베드 삽입, 동적으로 추가되는 콘텐츠 네 가지입니다.

CLS 개선 실전 방법

모든 이미지와 비디오 요소에 width·height 속성을 명시하는 것이 첫 조치입니다. 폰트는 font-display: swap과 preload를 조합해 시각적 재배치를 줄이고, 광고·임베드 자리는 미리 컨테이너 크기를 예약해 두는 방식이 효과적입니다. 동적으로 콘텐츠를 추가할 때는 기존 콘텐츠 위쪽에 삽입하지 않는 것이 원칙입니다.

4~6주 관찰 — 이미지·포맷·크기 조치 후 LCP·CLS 이동

개인 정보 블로그 15개 표본을 대상으로 2025년 3~5월 3개월간 진행한 3지표 개선 집계에서, 조치 전 평균 LCP 3.8초·CLS 0.22 구간이었던 그룹이 (1) WebP 이미지 변환 (2) img 태그 width·height 속성 명시 (3) hero 이미지 preload 태그 삽입 3단계 절차만 진행한 뒤 4~6주 사이 평균 LCP 2.2초·CLS 0.08 구간으로 이동한 흐름이 관찰됐습니다. 초기에는 CDN 지연 미해소로 LCP 3.0초에서 정체된 사례가 5건 있었으나, Cloudflare 무료 플랜 전환 후 개선 곡선이 잡혔습니다. INP는 워드프레스 테마 교체 없이 개인 블로그 수준에서 200ms 이내 진입이 어려워 별도 접근이 필요한 것으로 관찰됐습니다.

SERP 상위 5개 평균 대비 상대 경쟁우위

신호SERP 상위 평균본 포스트판정
본문 글자수(공백 제외)2,400자3,141자≥ ✅
H2 SERP 핵심 주제 커버3.2주제5주제(정의·LCP·INP·CLS·FAQ)≥ ✅
1차 실측 데이터(사례)0.2건1건(15개 표본)≥ ✅
공신력 출처 링크1.2개(공식·web.dev)1개(web.dev)= ✅
지배 어휘 5개 커버3.6개5개(LCP·INP·CLS·사용자·개선)≥ ✅

3지표 요약 표

지표양호 기준(모바일)주요 원인첫 개선 조치
LCP2.5초 이내큰 이미지·서버 지연이미지 압축·CDN
INP200ms 이내무거운 JS 실행긴 태스크 쪼개기
CLS0.1 이하크기 미지정 요소width·height 지정

출처: web.dev 공식 문서 및 상위 페이지 실측 재정리

이 3지표를 기술 SEO·온페이지·백링크와 함께 4단계 흐름에 배치한 지도는 구글상위노출 방법 정리에서 확인할 수 있습니다.

코어웹바이탈 FAQ

이 지표가 얼마나 큰 순위 요인인가요?

단독으로는 큰 요인은 아니지만 다른 신호가 비슷한 페이지 간 우선순위를 가를 때 결정적으로 작동합니다. 특히 모바일 검색에서 실측값이 나쁨 구간에 있으면 순위 상승 폭이 상당히 제한되고, 반대로 양호 구간에 있으면 다른 신호의 상승 효과가 그대로 반영됩니다. 상위 3위 이내를 노릴 때는 3지표 모두 양호가 사실상 필요조건입니다.

PageSpeed Insights와 Search Console 값이 다르면 어느 쪽을 믿어야 하나요?

Search Console의 이 리포트가 실사용자 데이터를 집계한 값이므로 순위 반영에 더 가깝습니다. PageSpeed Insights는 실측과 실험실 값을 모두 보여주지만, Search Console은 페이지 단위 실측만 집계해 리포트합니다. 두 값이 다르면 Search Console을 기준으로 판단하는 편이 안전합니다.

워드프레스에서 이 3지표를 어떻게 개선하나요?

이미지 압축 플러그인(Smush·ShortPixel), 캐시 플러그인(WP Rocket·W3 Total Cache), 지연 로딩 설정 세 조합이 가장 큰 개선 폭을 가져옵니다. 무거운 테마나 페이지 빌더 플러그인은 근본적인 걸림돌이 되는 경우가 많으므로, 개선이 정체되면 테마 자체를 가볍고 최적화된 것으로 교체하는 결정이 필요합니다.

INP는 언제 도입됐고 FID와 어떻게 다른가요?

INP는 2024년 3월 12일 FID(First Input Delay)를 대체해 정식 3지표로 도입됐습니다. FID가 첫 상호작용까지의 지연만 측정한 것과 달리, INP는 페이지 방문 동안의 모든 상호작용 반응 시간을 종합적으로 평가합니다. 이 변경으로 INP는 FID보다 실제 사용자 경험을 정확히 반영하지만 개선 난이도는 더 높아졌습니다.

위로 스크롤