Core Web Vitals 완벽 가이드 —...
Core Web Vitals 완벽 가이드 — 페이지 속도가 SEO 순위에 미치는 영향
Core Web Vitals(LCP, INP, CLS)의 개념, 측정 방법, 개선 실전 팁까지. 기술 SEO의 핵심인 페이지 경험 최적화를 총정리합니다.
사이트 속도가 느리면 방문자만 떠나는 게 아닙니다. 구글 순위도 떨어집니다. 2021년부터 구글은 Core Web Vitals를 공식 랭킹 팩터로 사용하고 있고, 2026년 현재까지 그 중요성은 계속 커지고 있어요.
이 글에서는 Core Web Vitals의 세 가지 지표를 이해하고, 실제로 개선하는 방법까지 정리해보겠습니다.
Core Web Vitals란?
Core Web Vitals는 구글이 정의한 "사용자 경험 핵심 지표" 세 가지입니다. 쉽게 말해, 페이지가 얼마나 빨리 뜨고, 얼마나 빨리 반응하고, 화면이 얼마나 안정적인지를 측정합니다.
| 지표 | 측정 내용 | 좋음 기준 | 나쁨 기준 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | 가장 큰 콘텐츠가 화면에 표시되는 시간 | 2.5초 이하 | 4초 이상 |
| INP (Interaction to Next Paint) | 사용자 상호작용 후 화면 반영까지 시간 | 200ms 이하 | 500ms 이상 |
| CLS (Cumulative Layout Shift) | 페이지 로드 중 레이아웃이 밀리는 정도 | 0.1 이하 | 0.25 이상 |
이전에는 FID(First Input Delay)가 사용되었지만, 2024년 3월부터 INP로 완전히 대체되었습니다.
SEO 순위에 실제로 얼마나 영향을 줄까?
솔직히 말하면, Core Web Vitals는 콘텐츠 품질이나 백링크만큼 강력한 랭킹 팩터는 아닙니다. 하지만 "동점 상황"에서 결정적인 차이를 만듭니다.
예를 들어 두 페이지의 콘텐츠 품질과 백링크가 비슷하다면, Core Web Vitals 점수가 높은 페이지가 더 위에 노출됩니다. 경쟁이 치열한 키워드일수록 이 차이가 중요해져요.
또한 간접적인 효과도 큽니다:
- 이탈률 감소 — 페이지가 3초 안에 로드되지 않으면 53%의 모바일 사용자가 이탈합니다
- 체류 시간 증가 — 빠른 사이트에서 사용자는 더 오래 머무르고, 더 많은 페이지를 봅니다
- 크롤링 효율 — 빠른 사이트는 구글봇이 같은 시간에 더 많은 페이지를 크롤링합니다
LCP 개선하기 — 가장 큰 체감 효과
LCP는 보통 히어로 이미지, 큰 텍스트 블록, 또는 비디오가 화면에 나타나는 시간입니다. 가장 효과가 큰 개선 방법들입니다.
이미지 최적화
LCP 문제의 70% 이상이 이미지에서 발생합니다.
- 차세대 포맷 사용: JPEG/PNG 대신 WebP 또는 AVIF를 사용하세요. 같은 화질에 파일 크기가 30~50% 줄어듭니다
- 적절한 크기: 1920px 너비의 이미지를 모바일에서도 그대로 불러오면 낭비입니다.
srcset으로 반응형 이미지를 제공하세요 - 레이지 로딩 주의: LCP 대상 이미지는 레이지 로딩하면 안 됩니다. 첫 화면에 보이는 이미지는 즉시 로드하세요
서버 응답 시간 단축
- CDN 사용: 사용자와 가까운 서버에서 콘텐츠를 전달합니다. Cloudflare, AWS CloudFront 등이 대표적이에요
- 서버 사이드 캐싱: 데이터베이스 쿼리 결과를 캐시하면 TTFB(Time to First Byte)가 크게 줄어듭니다
- 호스팅 업그레이드: 공유 호스팅에서 VPS나 전용 서버로 바꾸면 즉각적인 효과를 볼 수 있습니다
렌더링 차단 리소스 제거
- 중요하지 않은 CSS와 JavaScript에
async또는defer속성을 추가하세요 - 첫 화면에 필요한 CSS는 인라인으로 삽입하세요(Critical CSS)
- 사용하지 않는 CSS/JS를 제거하세요. Chrome DevTools의 Coverage 탭에서 확인할 수 있습니다
INP 개선하기 — 반응성 높이기
INP는 버튼 클릭, 텍스트 입력, 드롭다운 열기 등 사용자 상호작용에 대한 응답 속도를 측정합니다.
| 문제 원인 | 해결 방법 |
|---|---|
| 무거운 JavaScript 실행 | 코드 분할(Code Splitting)로 필요한 코드만 로드 |
| 메인 스레드 블로킹 | Web Worker로 무거운 작업 분리 |
| 과도한 DOM 크기 | DOM 노드를 1,500개 이하로 유지 |
| 서드파티 스크립트 | 분석 도구, 광고 스크립트를 지연 로드 |
특히 워드프레스 사이트에서는 플러그인이 많을수록 INP가 나빠집니다. 꼭 필요한 플러그인만 유지하세요.
CLS 개선하기 — 레이아웃 안정성
CLS는 페이지가 로드되면서 요소들이 갑자기 밀리는 현상을 측정합니다. 읽고 있던 텍스트가 갑자기 아래로 밀리면 사용자 경험이 매우 나빠지죠.
주요 원인과 해결법:
- 이미지/비디오에 크기 지정:
width와height속성을 항상 지정하세요. CSSaspect-ratio를 사용하면 더 편합니다 - 광고 영역 미리 확보: 광고가 로드되기 전에 해당 영역의 크기를 CSS로 확보해두세요
- 웹폰트 최적화:
font-display: swap을 사용하되, 폰트 크기 차이가 크면font-display: optional도 고려하세요 - 동적 콘텐츠: 사용자 상호작용 없이 기존 콘텐츠 위에 새 콘텐츠를 삽입하지 마세요
Core Web Vitals 측정 도구
어떤 도구를 사용하느냐에 따라 결과가 다를 수 있습니다. 실험실 데이터(Lab)와 실제 사용자 데이터(Field)의 차이를 이해하는 게 중요합니다.
| 도구 | 데이터 유형 | 용도 |
|---|---|---|
| Google Search Console | Field (실제 사용자) | 구글이 실제로 보는 데이터, 가장 중요 |
| PageSpeed Insights | Lab + Field | 개선 제안과 실제 데이터를 함께 확인 |
| Chrome DevTools | Lab | 개발 중 실시간 디버깅 |
| Lighthouse | Lab | 종합적인 성능 감사 |
| Web Vitals Extension | Field (내 브라우저) | 빠른 현장 확인 |
가장 중요한 건 Google Search Console의 "페이지 경험" 보고서입니다. 여기서 "좋음"으로 분류되면 SEO 혜택을 받을 수 있어요.
우선순위 정하기
모든 걸 한 번에 개선할 필요는 없습니다. 효과 대비 노력이 적은 것부터 시작하세요.
- 이미지 최적화 — 가장 쉽고 LCP 개선 효과가 큼
- 레이아웃 크기 지정 — CSS 몇 줄로 CLS 해결
- 불필요한 스크립트 제거 — INP와 LCP 동시 개선
- CDN 적용 — 서버 응답 시간 대폭 개선
- 코드 분할 — 프레임워크 지원이 필요하지만 효과가 큼
핵심 정리
Core Web Vitals는 SEO의 "기본기"입니다. 이것만으로 1페이지에 올라가진 않지만, 경쟁 사이트와 비슷한 수준의 콘텐츠와 백링크를 가지고 있다면 결정적인 차이를 만듭니다.
좋은 콘텐츠를 만들고, 품질 높은 백링크를 구축하면서, 기술적 기반도 함께 다져야 구글 상위노출이라는 목표에 도달할 수 있습니다.
사이트의 기술 SEO 기반을 다진 후, 백링크 캠페인으로 오프페이지 SEO까지 강화해보세요.