LCP, INP, CLS는 무엇을 의미하나요?
코어 웹 바이탈
이 세 가지는 Google이 페이지의 사용자 경험을 평가하는 데 사용하는 Core Web Vitals입니다. Largest Contentful Paint(LCP)는 로딩 성능, 즉 주요 콘텐츠가 표시되기까지 걸리는 시간을 측정합니다. Interaction to Next Paint(INP)는 응답성, 즉 클릭, 탭, 입력에 페이지가 얼마나 빠르게 반응하는지를 측정합니다. Cumulative Layout Shift(CLS)는 시각적 안정성, 즉 레이아웃이 얼마나 많이 움직이는지를 측정합니다. '양호' 기준은 LCP 2.5초 이내, INP 200밀리초 이내, CLS 0.1 이하입니다.
세 가지 지표 한눈에 보기
| 지표 | 측정 대상 | 양호 | 개선 필요 | 나쁨 |
|---|---|---|---|---|
| LCP | 로딩 | 2.5초 이하 | 최대 4초 | 4초 초과 |
| INP | 응답성 | 200ms 이하 | 최대 500ms | 500ms 초과 |
| CLS | 시각적 안정성 | 0.1 이하 | 최대 0.25 | 0.25 초과 |
위 기준은 Google의 Core Web Vitals 보고서 도움말에 따른 것입니다. 모바일과 데스크톱을 각각 따로 측정했을 때, 방문의 75번째 백분위수에서 세 지표가 모두 양호하면 페이지가 통과한 것으로 봅니다.
LCP: Largest Contentful Paint
LCP는 사용자가 페이지 로딩을 시작한 시점부터 화면에 보이는 영역에서 가장 큰 이미지, 동영상 또는 텍스트 블록이 렌더링될 때까지 걸리는 시간입니다. 대상 요소에는 <img> 요소, SVG 내부의 이미지, 동영상의 포스터 또는 첫 프레임, CSS 배경 이미지, 블록 수준 텍스트가 포함됩니다. 방문자가 페이지와 상호작용하면 브라우저는 새로운 후보를 더 이상 찾지 않습니다. LCP가 느린 원인은 대개 서버 응답 지연, 용량이 크거나 늦게 발견되는 히어로 이미지, 렌더링을 차단하는 CSS와 스크립트입니다.
INP: Interaction to Next Paint
INP는 방문 중 발생한 클릭, 탭, 키 입력을 추적하여 각 입력 후 브라우저가 다음 프레임을 그릴 수 있을 때까지 걸리는 시간을 측정합니다. 마우스 오버, 스크롤, 확대/축소는 포함되지 않습니다. 보고되는 값은 가장 느린 상호작용이며, 상호작용이 많은 페이지에서는 이상치를 제외합니다. INP는 2024년 3월에 First Input Delay(FID)를 대체하여 Core Web Vitals 지표가 되었습니다. FID가 첫 번째 상호작용만 살펴본 것과 달리 INP는 방문 전체를 다룹니다. INP가 나쁜 이유는 대개 긴 JavaScript 작업이 메인 스레드를 오래 점유하기 때문입니다.
CLS: Cumulative Layout Shift
CLS는 이미지나 광고가 위쪽에 로드되면서 텍스트가 아래로 밀리는 것과 같은 예기치 않은 레이아웃 이동을 합산하며, 방문 중 가장 크게 연속해서 발생한 이동 구간의 값을 보고합니다. 각 이동은 화면에서 얼마나 많은 영역이 얼마나 멀리 움직였는지에 따라 점수가 매겨집니다. 클릭, 탭, 키 입력 후 500밀리초 이내에 발생한 이동은 방문자가 페이지 변화를 예상하는 시점이므로 제외됩니다.
수치는 어디에서 오나요?
Search Console의 Core Web Vitals 보고서는 Chrome UX Report의 필드 데이터를 사용합니다. 최근 28일 동안의 실제 Chrome 방문 데이터를 유사한 페이지 그룹으로 묶고, 각 그룹을 가장 나쁜 지표 기준으로 평가합니다. Lighthouse와 같은 랩 도구는 실제 방문자 없이 페이지를 로드하므로 INP를 측정할 수 없으며, web.dev의 Web Vitals 개요에서 설명하듯 Total Blocking Time을 대용 지표로 사용합니다. 랩 점수는 문제를 디버깅하는 용도로, 필드 데이터는 최종 판단 기준으로 활용하세요.
Core Web Vitals는 순위에 영향을 주나요?
Google은 검색에서 성공하려면 양호한 Core Web Vitals를 달성할 것을 적극 권장하며, 페이지 경험은 핵심 랭킹 시스템이 보상하려는 요소와 일치한다고 설명합니다. 하지만 이것이 지름길은 아닙니다. 빠른 페이지라 하더라도 여전히 가장 좋은 답변이어야 합니다. 각 지표별로 무엇을 바꿔야 하는지는 Core Web Vitals 점수가 나쁠 때 어떻게 개선하나요?에서 확인할 수 있습니다.
AutoPSEO 활용 방법
AutoPSEO의 Core Web Vitals 보고서는 사이트 전체 또는 개별 URL의 Chrome UX Report 기록을 휴대폰, 데스크톱, 태블릿별로 불러와, LCP, INP, CLS(그리고 first contentful paint와 time to first byte)를 약 6개월간의 주간 데이터에서 75번째 백분위수 기준으로 차트에 표시합니다. 덕분에 어느 시점부터 지표가 나빠지기 시작했는지 확인할 수 있습니다.