Core Web Vitals는 실제 페이지 경험을 측정하는 Google의 지표이며 순위에도 반영됩니다. 통과란 초록색 점수 자체를 좇는 일이 아니라, 빠르게 로드되고 즉시 반응하며 사용하는 동안 화면이 튀지 않는 사이트를 만드는 것입니다. 이 가이드는 2026년 기준의 세 가지 지표와, 무엇보다 각 지표를 실제로 움직이는 수정 방법을 설명합니다.

요약(TL;DR)

  • 세 가지 Core Web Vitals는 LCP(로딩), INP(응답성), CLS(시각적 안정성)입니다. INP는 2024년에 FID를 대체해 Core Web Vital이 되었습니다
  • “양호” 기준: LCP 2.5초 미만, INP 200ms 미만, CLS 0.1 미만이며, 실제 방문의 75번째 백분위수에서 측정됩니다
  • 효과가 가장 큰 수정은 가장 큰 이미지나 텍스트 블록 최적화, JavaScript 축소 및 분할, 이미지·광고·임베드를 위한 공간 확보입니다
  • 랩 테스트만이 아니라 필드 데이터(실제 사용자)를 사용하세요. Google은 실제 성능으로 순위를 매기기 때문입니다

세 가지 Core Web Vitals (2026)

Largest Contentful Paint (LCP): 로딩

LCP는 가장 큰 가시 요소(보통 히어로 이미지, 배너, 큰 텍스트 블록)가 렌더링되기까지 걸리는 시간을 측정합니다. 양호: 2.5초 미만.

Interaction to Next Paint (INP): 응답성

INP는 방문 전체에 걸쳐 페이지가 사용자 상호작용에 얼마나 빠르게 반응하는지를 측정하며, 2024년에 기존 지표인 First Input Delay (FID)를 대체했습니다. 탭이나 클릭과 다음 시각적 업데이트 사이의 지연을 포착합니다. 양호: 200밀리초 미만.

Cumulative Layout Shift (CLS): 시각적 안정성

CLS는 로딩 중 페이지가 예기치 않게 얼마나 이동하는지(뒤늦게 로드된 이미지나 광고가 콘텐츠를 아래로 밀어내는 짜증나는 튐)를 측정합니다. 양호: 0.1 미만.

Google은 이 값들을 실제 방문의 75번째 백분위수에서 평가하므로, 가장 빠른 사용자뿐 아니라 대부분의 사용자가 좋은 경험을 해야 합니다.

LCP 개선하기

  • LCP 요소를 최적화하세요. 그것을 식별하고(대부분의 도구가 이름을 알려줍니다) 빠르게 로드되게 하세요: 이미지를 압축하고 올바르게 크기를 조정하며, 최신 포맷(WebP/AVIF)을 제공하고, 히어로 이미지의 지연 로딩은 피하세요.
  • 반응형 이미지를 제공하세요. 올바른 srcset을 사용해 기기가 거대한 파일 대신 적절한 크기의 파일을 내려받게 하세요. (반응형 이미지 다루기 가이드를 참고하세요.)
  • 서버 응답을 빠르게 하세요. 캐싱과 CDN으로 TTFB를 줄여 문서가 빠르게 도착하게 하세요.
  • 중요한 리소스를 프리로드하세요. LCP 이미지와 핵심 폰트를 미리 불러오고, 가능한 곳에서는 렌더링을 막는 CSS와 JavaScript를 제거하세요.
  • 빠른 이미지 파이프라인을 사용하세요. Cloudflare image transformations 같은 최적화 서비스로 이미지를 제공하면 즉석에서 크기 조정과 압축이 이뤄집니다.

INP 개선하기

  • JavaScript 실행을 줄이세요. 무거운 스크립트는 메인 스레드를 막고 응답을 지연시킵니다. JavaScript를 더 적게 배포하고 사용하지 않는 코드를 제거하세요.
  • 긴 작업을 분할하세요. 오래 실행되는 작업을 나눠, 브라우저가 청크 사이에 입력에 반응할 수 있게 하세요.
  • 중요하지 않은 작업은 미루세요. 상호작용 이후로 지연시키고, 크고 동기적인 핸들러는 피하세요.
  • 서드파티 스크립트를 점검하세요. 태그 매니저, 채팅 위젯, 애널리틱스는 INP 악화의 흔한 원인입니다. 효율적으로 로드하거나 필요 없는 것은 제거하세요.

CLS 개선하기

  • 이미지와 동영상에는 항상 너비와 높이를 설정하세요(또는 CSS aspect-ratio). 브라우저가 공간을 확보하도록 합니다.
  • 광고, 임베드, iframe을 위한 공간을 확보하세요. 로드될 때 콘텐츠를 밀어내지 않게 합니다.
  • 로드 후 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요.
  • 폰트를 프리로드하고 font-display를 적절히 사용하세요. 늦게 로드되는 폰트로 인한 레이아웃 이동을 줄입니다.

올바르게 측정하기

  • 랩 데이터보다 필드 데이터. Google은 Chrome User Experience Report 같은 실제 사용자(필드) 데이터로 순위를 매기며, 단일 랩 실행으로 판단하지 않습니다. 랩 점수가 완벽해도 필드 데이터가 나쁘면 통과하지 못합니다.
  • 75번째 백분위수를 주시하세요. 중앙값 개선만으로는 부족하며, 더 느린 4분의 1의 방문이 통과를 가로막습니다.
  • 실제 기기와 회선에서 테스트하세요. 빠른 데스크톱만이 아니라 특히 중급 모바일에서 확인하세요.

핵심 요약

  • 2026년의 세 가지 Core Web Vitals는 LCP, INP(FID를 대체함), CLS입니다.
  • 실제 방문의 75번째 백분위수에서 LCP 2.5초 미만, INP 200ms 미만, CLS 0.1 미만을 목표로 하세요.
  • 가장 큰 성과: LCP 요소와 이미지 최적화, INP를 위한 JavaScript 축소 및 분할, CLS를 위한 공간 확보로 레이아웃 이동 막기입니다.
  • 성공은 랩 점수만이 아니라 필드 데이터로 판단하세요.

전문적인 진단 받기

Core Web Vitals는 기술 SEO의 한 부분일 뿐입니다. 기술 SEO 감사 는 Core Web Vitals와 함께 크롤 예산, 색인 생성, 사이트 구조, JavaScript 렌더링, 구조화된 데이터를 다루며, 실제 순위 영향에 기반한 우선순위 실행 계획을 제공합니다. 속도가 주된 관심사라면 Cloudflare로 웹사이트 속도 높이기 가이드가 성능을 더 깊이 다룹니다.

자주 묻는 질문 (FAQ)

2026년의 세 가지 Core Web Vitals는 무엇인가요? 로딩을 위한 Largest Contentful Paint (LCP), 응답성을 위한 Interaction to Next Paint (INP), 시각적 안정성을 위한 Cumulative Layout Shift (CLS)입니다. INP는 2024년에 First Input Delay (FID)를 대체해 Core Web Vital이 되었습니다.

좋은 Core Web Vitals 점수는 어느 정도인가요? LCP 2.5초 미만, INP 200밀리초 미만, CLS 0.1 미만이며, 실제 사용자 방문의 75번째 백분위수에서 측정합니다. 가장 빠른 사용자뿐 아니라 대부분의 방문자가 이 값을 충족해야 합니다.

Core Web Vitals가 Google 순위에 영향을 주나요? 네. Google의 페이지 경험 신호의 일부입니다. 유일하거나 가장 강력한 순위 요인은 아니지만, 경쟁이 치열한 검색어에서는 좋은 페이지 경험이 의미 있는 이점이 되고 나쁜 경험은 발목을 잡습니다.

왜 랩에서는 통과하는데 Search Console에서는 실패하나요? Google이 단일 랩 테스트가 아니라 실제 사용자의 필드 데이터를 사용하기 때문입니다. 실제 기기, 회선, 75번째 백분위수는 빠른 테스트 장비가 숨기는 문제를 드러냅니다. 실제 조건에 맞춰 최적화하세요.

Core Web Vitals를 개선하는 가장 빠른 방법은? 보통 LCP 요소 최적화(가장 큰 이미지 압축 및 크기 조정, 지연 로딩 피하기)와 JavaScript 축소입니다. CLS의 경우 이미지에 치수를 설정하고 광고와 임베드를 위한 공간을 확보하세요.