Core Web Vitals 완전 가이드 2026
LCP·INP·CLS 개선으로 검색 순위 올리는 법

구글 PageSpeed Insights에서 빨간 점수를 받으셨나요? "페이지 경험"이 부족하다는 Search Console 경고를 보셨나요? 그 핵심에 바로 Core Web Vitals(핵심 웹 지표)가 있습니다.

Core Web Vitals는 구글이 2021년부터 검색 순위 신호로 공식 채택한 사용자 경험 지표입니다. 2024년 INP가 FID를 대체하면서 현재는 LCP · INP · CLS 3개 지표로 구성됩니다. 이 세 가지를 이해하고 개선하면 검색 순위 상승과 이탈률 감소, 두 마리 토끼를 잡을 수 있습니다.

① Core Web Vitals란?

Core Web Vitals(CWV)는 구글이 실제 사용자 경험을 측정하기 위해 선정한 핵심 성능 지표 모음입니다. 기술적인 속도 점수가 아니라, 실제 방문자가 페이지를 쓸 때 느끼는 체감 품질을 수치화합니다.

왜 SEO에 중요한가?

구글은 2021년 6월 '페이지 경험 업데이트(Page Experience Update)'를 통해 CWV를 검색 순위 신호로 공식 채택했습니다. 콘텐츠 품질이 동등한 경우, CWV 점수가 높은 페이지가 더 높은 순위를 가져갑니다.

또한 CWV 개선은 SEO를 넘어 전환율에도 직접 영향을 줍니다. 구글 데이터에 따르면 LCP가 1초 개선될 때마다 전환율이 평균 8% 향상됩니다. 느린 사이트는 검색 순위도 낮고 방문자도 이탈시킵니다.

2026년 현재 3가지 지표

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

LCP는 페이지에서 가장 큰 이미지나 텍스트 블록이 화면에 완전히 표시되는 시간입니다. 사용자가 "페이지가 로딩됐다"고 느끼는 시점과 가장 가깝습니다.

LCP 대상 요소

• 히어로 이미지 (메인 배너, 대표 이미지)
• 비디오 썸네일
• 배경 이미지가 있는 큰 블록
• 뷰포트 상단의 큰 텍스트 블록

LCP가 느린 주요 원인

1. 서버 응답 속도(TTFB) 느림 — 서버가 HTML을 보내는 데 걸리는 시간 자체가 길면 모든 지표가 나빠집니다
2. 이미지 크기 과다 — 원본 고해상도 이미지를 그대로 사용하는 경우
3. 렌더링 차단 리소스 — CSS·JS 파일이 페이지 렌더링을 막는 경우
4. 클라이언트 사이드 렌더링 — JavaScript로 콘텐츠를 생성하는 SPA 구조
5. 느린 웹폰트 로딩 — 외부 폰트가 텍스트 표시를 지연시키는 경우

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

INP는 2024년 3월 FID(First Input Delay)를 대체한 새 지표입니다. 사용자가 페이지에서 버튼을 클릭하거나 링크를 탭했을 때, 브라우저가 다음 화면으로 반응하는 속도를 측정합니다.

FID가 "첫 번째 클릭만" 측정했다면, INP는 페이지 방문 중 모든 상호작용의 전체 응답 시간을 측정합니다. 훨씬 엄격한 지표입니다.

INP가 느린 주요 원인

• 무거운 JavaScript 실행 — 클릭 이벤트 핸들러에서 복잡한 연산 수행
• 메인 스레드 차단 — 대용량 JS 파일이 메인 스레드를 점령
• 과도한 DOM 크기 — 요소가 너무 많으면 업데이트 시 연산이 느려짐
• 서드파티 스크립트 — 광고, 채팅 위젯, 분석 도구 등이 메인 스레드를 차지

INP 개선 방법

• JavaScript 실행을 requestIdleCallback 또는 Web Worker로 분리
• 이벤트 핸들러에서 무거운 연산을 비동기 처리
• 불필요한 서드파티 스크립트 제거 또는 지연 로드
• DOM 요소 수를 1,500개 이하로 유지
• React·Vue 등 SPA 프레임워크는 코드 스플리팅 적용

④ CLS — 누적 레이아웃 이동(Cumulative Layout Shift)

CLS는 페이지가 로딩되는 동안 콘텐츠가 얼마나 예상치 못하게 움직이는지를 측정합니다. 글을 읽다가 갑자기 광고가 삽입되어 내용이 밀려 내려가거나, 버튼 위치가 바뀌어 잘못 클릭하는 경험이 바로 높은 CLS입니다.

CLS가 높은 주요 원인

• 이미지에 크기 미지정 — width와 height 속성 없는 이미지는 로드 후 공간을 차지하며 레이아웃을 밀어냄
• 동적으로 삽입되는 콘텐츠 — 광고, 배너, 쿠키 동의창이 기존 콘텐츠 위에 삽입
• 웹폰트 FOUT/FOIT — 폰트 로딩 전후 글자 크기 변화로 텍스트가 이동
• 늦게 로드되는 서드파티 위젯 — 채팅 버튼, SNS 공유 버튼이 페이지 요소를 밀어냄

CLS 개선 방법

• 모든 이미지·비디오에 width와 height 속성 명시 (또는 CSS aspect-ratio 사용)
• 광고·배너 영역은 미리 공간 확보 (min-height 설정)
• 폰트에 font-display: swap 또는 optional 적용
• 동적 콘텐츠는 기존 콘텐츠 위가 아닌 아래에 삽입
• 애니메이션은 transform·opacity만 사용 (layout을 변경하는 속성 금지)

⑤ Core Web Vitals 측정 방법

CWV 데이터는 필드 데이터(실제 사용자)와 랩 데이터(시뮬레이션) 두 가지로 나뉩니다. 구글은 필드 데이터(CrUX)를 순위에 반영하므로, 랩 점수가 좋아도 실제 사용자 데이터가 나쁘면 SEO 효과가 없습니다.

1) Google PageSpeed Insights (권장)

pagespeed.web.dev에 URL을 입력하면 필드 데이터(실제 사용자 28일 평균)와 랩 데이터(Lighthouse)를 동시에 확인할 수 있습니다. 무료이며 가장 공식적인 도구입니다.

2) Google Search Console

[Core Web Vitals] 메뉴에서 사이트 전체 URL의 CWV 상태를 한눈에 파악할 수 있습니다. '미흡', '개선 필요', '양호'로 분류되며, 문제가 있는 URL 목록도 제공됩니다. 실제 방문자 데이터(필드 데이터) 기반입니다.

3) Chrome DevTools — Lighthouse

F12 → Lighthouse 탭에서 직접 측정합니다. 로컬 환경에서 상세한 개선 제안을 받을 수 있습니다. 단, 시뮬레이션 결과이므로 실제 사용자 데이터와 차이가 있을 수 있습니다.

4) 알아서(Alaseo) 진단 도구

alaseo.co.kr/diagnosis 에서 URL을 입력하면 Core Web Vitals를 포함한 SEO·AEO·GEO 전 영역을 한 번에 분석합니다. PageSpeed Insights API 기반 실제 데이터를 제공하며, 항목별 개선 우선순위를 시각적으로 확인할 수 있습니다.

⑥ 실전 개선 전략

이미지 최적화 — 가장 빠른 LCP 개선법

• WebP/AVIF 변환 — PNG 대비 30~50%, JPEG 대비 25~35% 파일 크기 감소
• 이미지 크기 명시 — <img width="800" height="450"> 또는 CSS aspect-ratio: 16/9
• 히어로 이미지 preload — <link rel="preload" as="image" href="hero.webp">
• 지연 로딩(Lazy Load) — 뷰포트 밖 이미지에 loading="lazy" 적용 (히어로 이미지 제외)
• CDN 사용 — 사용자와 가까운 서버에서 이미지 제공으로 응답 속도 단축

렌더링 차단 리소스 제거

• 중요하지 않은 CSS는 media 속성으로 조건부 로드
• JS 파일에 defer 또는 async 속성 추가
• Above-the-fold 콘텐츠에 필요한 CSS만 인라인으로 삽입 (Critical CSS)
• Google Fonts는 display=swap 파라미터 추가 및 preconnect 설정

서버 응답 속도(TTFB) 개선

• 캐싱 설정 — 정적 파일(이미지, CSS, JS)에 장기 캐시 헤더 설정
• 호스팅 업그레이드 — 공유 호스팅 → VPS 또는 클라우드로 전환
• Cloudflare 사용 — 무료 CDN으로 TTFB를 전 세계적으로 단축
• 데이터베이스 쿼리 최적화 — 워드프레스의 경우 플러그인 수 최소화

워드프레스 올인원 솔루션

개발 지식 없이 CWV를 빠르게 개선하려면 성능 최적화 플러그인이 가장 효과적입니다.

⑦ 업종별 Core Web Vitals 우선순위

업종마다 방문자가 많이 사용하는 기능과 문제가 되는 지표가 다릅니다.

의원·병원

• LCP 최우선 — 메인 대표원장 사진, 시설 이미지가 크고 느린 경우가 많음
• CLS 주의 — 진료 안내 팝업, 이벤트 배너가 갑자기 삽입되는 경우
• 모바일 INP — 예약 버튼 클릭 반응이 느리면 예약 이탈률 급등

쇼핑몰·이커머스

• LCP 최우선 — 상품 대표 이미지가 LCP 요소. 제품 카탈로그 이미지 최적화 필수
• INP 중요 — 장바구니 추가, 옵션 선택 등 상호작용이 많은 구조
• CLS — 상품 카드 레이아웃이 로딩 중 밀리는 현상 방지

로컬 비즈니스 (음식점·카페·미용실 등)

• 모바일 LCP 최우선 — 대부분 모바일로 접속. 대표 사진과 메뉴 이미지 WebP 변환
• CLS — 영업시간·위치 정보가 지도 위젯 로딩 후 밀리는 경우 많음

B2B·기업 사이트

• LCP 최우선 — 히어로 배너 이미지·동영상이 무거운 경우 많음
• INP — 견적 문의 폼, 자료 다운로드 버튼의 반응성
• TTFB — CMS 기반 사이트는 서버 응답 속도 개선이 핵심

⑧ 자주 묻는 질문 (FAQ)

Core Web Vitals가 구글 검색 순위에 영향을 미치나요?

네, 영향을 미칩니다. 구글은 2021년부터 CWV를 페이지 경험 신호로 공식 채택해 검색 순위에 반영하고 있습니다. 다만 콘텐츠 품질이 더 중요한 요소이므로, CWV는 동일 수준의 콘텐츠를 가진 페이지 간 순위 결정에 영향을 줍니다.

LCP, INP, CLS 중 가장 먼저 개선해야 할 항목은?

Google Search Console의 [Core Web Vitals] 메뉴에서 '미흡' 또는 '개선 필요'로 표시되는 항목부터 시작하세요. 일반적으로 LCP부터 개선하는 것이 효율적입니다. 이미지 최적화만으로도 LCP를 크게 개선할 수 있어 투자 대비 효과가 가장 큽니다.

워드프레스에서 CWV를 가장 쉽게 개선하는 방법은?

WP Rocket 또는 LiteSpeed Cache 플러그인 설치가 가장 효과적입니다. 이미지 지연 로딩, CSS/JS 최소화, 브라우저 캐시, Critical CSS 인라인 삽입 등 CWV 개선에 필요한 대부분의 기능을 자동으로 처리해 줍니다.

PageSpeed Insights 점수가 낮은데 SEO에 바로 영향을 주나요?

PageSpeed Insights의 랩 점수(시뮬레이션)는 SEO에 직접 반영되지 않습니다. 구글이 순위에 사용하는 것은 실제 사용자 데이터(필드 데이터)입니다. Search Console의 [Core Web Vitals] 탭에서 필드 데이터 상태를 확인하세요. 방문자가 많지 않은 사이트는 필드 데이터가 없을 수 있으며, 이 경우 CWV가 순위에 반영되지 않습니다.

CWV 개선 후 순위가 오르는 데 얼마나 걸리나요?

구글이 사이트를 재크롤링하고 필드 데이터를 수집하는 데 4~8주가 소요됩니다. 개선 후 바로 순위가 오르지 않더라도 4주 이상 기다려야 효과를 판단할 수 있습니다.