핵심 웹 지표(Core Web Vitals): Google 속도 테스트를 통과하는 방법

2021년 Google은 핵심 웹 지표(Core Web Vitals)가 순위 요인이라고 발표했습니다. 이제 세 가지 구체적인 지표가 검색 순위에 직접 영향을 미칩니다. 최대 콘텐츠 페인트(LCP), 누적 레이아웃 이동(CLS), 다음 페인트까지의 상호작용(INP)입니다. 지표가 나쁜 사이트는 좋은 순위를 얻기 어렵고, 지표가 뛰어난 사이트는 순위에서 유리해집니다. 현대 SEO에서 Core Web Vitals 통과는 타협할 수 없는 조건입니다.

그 파급력은 큽니다. 이제 성능을 무시할 수 없습니다. 느린 웹사이트를 만들어 놓고 좋은 순위를 기대할 수는 없습니다. Google은 사용자 경험이 중요하다는 점을 분명히 했고, Core Web Vitals는 그 사용자 경험을 수치로 나타냅니다. Core Web Vitals 최적화는 더 이상 선택이 아니라, 경쟁력 있는 검색 가시성을 위한 필수 조건입니다.

핵심 웹 지표란 무엇이며 왜 중요한가

Core Web Vitals는 사용자 경험의 세 가지 측면을 측정합니다. 로딩 속도(LCP), 시각적 안정성(CLS), 반응성(INP)입니다. Google의 Web Vitals 페이지에서 각 지표를 자세히 정의하고 있습니다. 이 세 지표는 사용자가 웹사이트를 경험하는 방식에서 가장 중요한 측면을 대표합니다.

Google은 어떤 지표가 가장 중요한지 판단하기 위해 실제 사용자로부터 수조 개의 데이터 포인트를 수집했습니다. 그 결과가 Core Web Vitals입니다. 이 기준은 임의로 정한 것이 아니라, 실제 사용자가 웹사이트를 빠르고 반응성 있다고 느끼게 하는 요소를 근거에 기반해 측정한 것입니다.

Google의 공식 발표에서 Core Web Vitals가 검색 순위에 어떤 영향을 미치는지 설명합니다. Google은 Core Web Vitals를 여러 순위 요인 중 하나로 봅니다. 콘텐츠 품질과 관련성이 여전히 더 중요하지만, 관련성이 비슷한 두 사이트라면 Core Web Vitals 성능에 따라 순위가 갈립니다.

최대 콘텐츠 페인트(LCP): 로딩 속도 측정

최대 콘텐츠 페인트(LCP, Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠 요소가 사용자에게 보이기까지 걸리는 시간을 측정합니다. 이 요소는 이미지, 동영상, 제목, 텍스트 블록일 수 있습니다. LCP는 사용자가 주요 콘텐츠를 보고 페이지가 로드되었다고 인식하는 순간을 측정합니다.

Google의 권장 기준은 LCP 2.5초 미만입니다. LCP가 2.5초 미만인 페이지는 "좋음", 2.5~4초 사이는 "개선 필요", 4초를 넘으면 "나쁨"으로 분류됩니다. LCP가 3초를 넘으면 사용자는 페이지가 느리다고 느끼고, 4초를 넘으면 페이지를 떠나는 경우가 많습니다.

LCP가 느려지는 흔한 원인: 느린 서버 응답 시간, 렌더링을 차단하는 CSS와 JavaScript, 최적화되지 않은 이미지, 로드에 시간이 걸리는 큰 글꼴입니다. LCP를 개선하려면 서버 속도를 높이고(첫 바이트까지의 시간 / TTFB 단축), 렌더링 차단 리소스를 제거하고, JavaScript를 지연 로드하고, 이미지를 최적화·압축하고, 최신 이미지 형식(WebP)을 사용하고, 핵심 리소스를 미리 로드하세요.

PageSpeed Insights는 LCP 점수와 구체적인 권장 사항을 보여 줍니다. 주요 페이지에서 테스트를 실행하고, 영향도에 따라 권장 사항의 우선순위를 정한 뒤, 효과가 가장 큰 수정부터 적용하세요.

누적 레이아웃 이동(CLS): 시각적 안정성 측정

누적 레이아웃 이동(CLS, Cumulative Layout Shift)은 페이지가 로드되는 동안 페이지 요소가 예기치 않게 움직이는 정도를 측정합니다. 기사를 읽고 있는데 위쪽에 광고가 로드되면서 갑자기 텍스트가 아래로 밀려나는 것이 바로 레이아웃 이동입니다. CLS는 로드 중에 페이지 레이아웃이 얼마나 이동하는지를 수치화합니다.

Google의 권장 기준은 CLS 0.1 미만입니다. CLS 점수가 0.1 미만이면 "좋음", 0.1~0.25 사이는 개선이 필요하며, 0.25를 넘으면 "나쁨"입니다. 작은 레이아웃 이동도 누적됩니다. CLS 0.15는 로드 중에 페이지 요소가 뷰포트 높이의 총 15%만큼 이동했다는 뜻입니다. 사용자는 이를 성가시게 느끼고 불편을 겪습니다.

CLS가 높아지는 흔한 원인: 비동기로 로드되는 광고, 너비와 높이 속성이 지정되지 않은 이미지, 비동기로 로드되는 임베드(YouTube 동영상, 소셜 미디어 위젯), 갑자기 바뀌는 글꼴입니다. CLS를 개선하려면 HTML에서 이미지 크기(width, height 속성)를 지정하고, 광고가 로드되기 전에 공간을 확보하고, @font-face CSS에서 font-display: swap을 사용해 글꼴 교체로 인한 덜컹거림을 막고, 동영상과 임베드를 동기적으로 로드하거나 공간을 미리 확보한 상태로 로드하세요.

사이트의 모든 이미지에는 명시적인 width와 height 속성이 있어야 합니다. 이 속성은 이미지가 로드되기 전에 공간을 확보하라고 브라우저에 알려 줍니다. 크기 정보가 없으면 브라우저는 얼마만큼의 공간을 확보해야 할지 알 수 없어, 이미지가 도착할 때 레이아웃 이동이 발생합니다.

다음 페인트까지의 상호작용(INP): 반응성 측정

다음 페인트까지의 상호작용(INP, Interaction to Next Paint)은 사용자 상호작용(클릭, 탭, 키보드 입력)에 페이지가 얼마나 빠르게 반응하는지를 측정합니다. INP는 사용자가 페이지와 상호작용한 시점부터 페이지가 시각적으로 반응하는 시점까지의 시간입니다. 반응성이 좋은 페이지는 밀리초 단위로 반응하지만, 반응성이 나쁜 페이지는 몇 초가 걸립니다.

Google의 권장 기준은 INP 200밀리초 미만입니다. 200ms 미만이면 "좋음", 200~500ms 사이는 개선이 필요하며, 500ms를 넘으면 "나쁨"입니다. 사용자는 즉각적인 반응을 기대합니다. INP 500ms는 굼뜨게 느껴지고, INP 1초는 고장 난 것처럼 느껴집니다.

INP가 나빠지는 흔한 원인: 메인 스레드를 차단하는 무거운 JavaScript, 대용량 서드파티 스크립트, 비효율적인 이벤트 핸들러, request idle callback 미사용입니다. INP를 개선하려면 긴 JavaScript 작업을 더 작은 단위로 나누고, 중요하지 않은 JavaScript를 지연 로드하고, 사용하지 않는 스크립트를 제거하고, 이벤트 리스너를 최적화하고, 연산량이 많은 작업에는 웹 워커를 사용하세요.

INP는 JavaScript 전문 지식이 필요하기 때문에 Core Web Vitals 중 최적화하기 가장 어려운 지표인 경우가 많습니다. 팀에 JavaScript 최적화 역량이 부족하다면 성능 컨설턴트를 고용하거나 외부 성능 최적화 서비스를 이용하는 것을 고려하세요.

핵심 웹 지표는 어떻게 측정되나

Core Web Vitals는 실험실 데이터와 현장 데이터, 두 가지 방식으로 측정됩니다. 실험실 데이터는 PageSpeed Insights, Lighthouse 같은 도구를 통제된 환경에서 실행해 얻습니다. 현장 데이터는 사이트를 방문하는 실제 사용자에게서 수집됩니다. Google은 실제 사용자 경험을 나타내는 현장 데이터를 우선시합니다.

Google의 성능 학습 과정에서 실험실 지표와 현장 지표의 차이를 설명합니다. 실험실 데이터는 문제를 찾아내고 수정 사항을 테스트하는 데 도움이 됩니다. 현장 데이터는 실제 환경에서의 성능을 보여 줍니다. 실제 사용자가 느린 네트워크나 오래된 기기를 사용한다면, 실험실 점수는 훌륭해도 현장 점수는 나쁠 수 있습니다.

Google Search Console은 Core Web Vitals 현장 데이터를 보고합니다. 이 보고서는 Chrome 사용자 경험 보고서(CrUX)에서 집계한 실제 사용자 측정값을 보여 줍니다. 사이트의 실제 사용자 데이터가 충분하지 않으면 Google은 대신 Lighthouse의 실험실 데이터를 제공합니다.

기준값과 통과 점수

Google은 사용자 경험의 75번째 백분위수에서 기준을 충족하는 것을 "좋은" Core Web Vitals로 정의합니다. 즉 실제 사용자의 75%가 기준값 이상의 경험을 해야 한다는 뜻입니다. 기준값은 다음과 같습니다.

LCP: 2.5초 이하. CLS: 0.1 이하. INP: 200밀리초 이하. 이 기준값은 수조 건의 실제 사용자 상호작용 분석을 통해 과학적으로 검증되었습니다. 이 기준을 충족하는 페이지는 좋은 사용자 경험을 제공합니다.

다만 Google은 모든 페이지의 100%가 Core Web Vitals를 통과할 것을 요구하지 않습니다. 페이지의 75%가 통과하면 사이트 전체가 "좋은" Core Web Vitals를 갖춘 것으로 간주됩니다. 즉 트래픽이 많은 페이지 대부분이 빠르다면, 일부 느린 페이지가 있더라도 통과할 수 있습니다.

지표별 최적화: 실전 단계

LCP 최적화: 먼저 PageSpeed Insights로 TTFB(첫 바이트까지의 시간)를 측정하세요. TTFB가 느리다면(600ms 초과) 서버가 병목입니다. 호스팅을 업그레이드하거나, 백엔드 코드를 최적화하거나, 콘텐츠 전송 네트워크(CDN)를 사용하세요. TTFB는 양호한데 LCP가 느리다면 CSS나 JavaScript가 렌더링을 차단하고 있는 것입니다. 중요하지 않은 JavaScript는 지연 로드하고, 스크롤 없이 보이는 영역(above-the-fold) 콘텐츠의 핵심 CSS는 인라인으로 넣으세요.

CLS 최적화: 로드 중에 움직이는 요소가 있는지 사이트를 점검하세요. 브라우저 DevTools로 이동하는 요소를 찾아내세요. 모든 이미지에 width와 height 속성을 추가하세요. CSS에서 font-display: swap을 사용하세요. 광고, 임베드, 동적 콘텐츠를 위한 공간을 미리 확보하세요.

INP 최적화: Chrome DevTools의 Performance 탭으로 긴 JavaScript 작업(50ms 초과 작업)을 찾아내세요. 긴 작업을 나누세요. 중요하지 않은 JavaScript를 지연 로드하세요. 우선순위가 낮은 작업에는 requestIdleCallback을 사용하세요. 데스크톱 컴퓨터만이 아니라 실제 기기에서 테스트하세요.

핵심 웹 지표의 지속적인 모니터링

Google Search Console로 Core Web Vitals 성능을 모니터링하세요. Core Web Vitals 보고서는 사이트의 실제 사용자 지표와 그것이 Google 기준값과 비교해 어떤지를 보여 줍니다. 페이지는 좋음, 개선 필요, 나쁨으로 분류됩니다.

모니터링 알림을 설정하세요. Core Web Vitals가 하락하면 즉시 원인을 조사해야 합니다. 비효율을 초래한 새 코드 배포, 새 서드파티 스크립트, 이미지나 미디어 변경, 호스팅 문제 등이 원인일 수 있습니다.

모바일과 데스크톱을 따로 모니터링하세요. 모바일 기기는 일반적으로 프로세서와 네트워크가 더 느리기 때문에, Core Web Vitals가 데스크톱보다 모바일에서 더 나쁜 경우가 많습니다. 모바일 트래픽 비중이 큰 사이트라면 모바일 최적화를 우선하세요.

핵심 웹 지표와 SEO 전략

Core Web Vitals는 이제 백링크 및 콘텐츠 품질에 버금가는 핵심 순위 요인입니다. Core Web Vitals가 나쁜 사이트는 콘텐츠가 아무리 좋아도 좋은 순위를 얻기 어렵습니다. 따라서 성능 최적화는 나중에 생각할 일이 아니라 SEO 전략의 일부가 되어야 합니다.

순위를 두고 경쟁하는데 경쟁사의 Core Web Vitals가 더 좋다면, 경쟁사가 순위에서 유리합니다. 사이트가 느리고 반응성이 없다면 콘텐츠만으로는 이길 수 없습니다. 대등하게 경쟁하려면 경쟁사의 성능과 같거나 그보다 나아야 합니다.

결론

Core Web Vitals는 이제 SEO 성공에 필수입니다. LCP, CLS, INP를 최적화하면 검색 순위와 사용자 경험이 직접 개선됩니다. Core Web Vitals가 뛰어난 사이트는 관련성이 비슷하지만 지표가 나쁜 사이트보다 높은 순위를 차지합니다. 피해 갈 방법은 없습니다. 상위 순위를 원한다면 Core Web Vitals를 통과해야 합니다.

먼저 주요 페이지에서 PageSpeed Insights를 실행하세요. 가장 큰 병목을 찾아 먼저 해결하세요. 모바일 최적화를 우선하세요. Google Search Console에서 성능을 정기적으로 모니터링하세요. 저희 GEO SEO 진단을 활용해 사이트 전체의 Core Web Vitals 문제를 찾아내고 개선 상황을 지속적으로 추적하세요.