Core Web Vitals이란?
Core Web Vitals은 구글이 정의한 세 가지 핵심 웹 성능 지표입니다. 2021년부터 구글 검색 순위에 직접적으로 반영되고 있으며, 2026년 현재 그 중요성은 더 커졌습니다.
쉽게 말해, "사용자가 내 사이트를 얼마나 쾌적하게 경험하는가"를 숫자로 측정한 것입니다. 세 가지 지표가 모두 "양호(Good)" 기준을 통과해야 구글이 긍정적으로 평가합니다.
1. LCP (Largest Contentful Paint) — 로딩 속도
LCP는 페이지에서 가장 큰 콘텐츠 요소가 화면에 표시되는 데 걸리는 시간입니다. 보통 메인 이미지, 히어로 배너, 큰 텍스트 블록이 이에 해당합니다.
기준
- 양호: 2.5초 이내
- 개선 필요: 2.5초 ~ 4초
- 나쁨: 4초 초과
개선 방법
- 이미지 최적화: WebP 또는 AVIF 포맷 사용. 원본 5MB 이미지를 200KB 이하로 압축합니다.
- 서버 응답 시간 단축: CDN 사용, 서버 캐싱 설정, 호스팅 업그레이드.
- 렌더링 차단 리소스 제거: CSS와 JavaScript를 최적화하여 브라우저가 빠르게 렌더링할 수 있게 합니다.
- 프리로드 활용: 히어로 이미지나 중요 리소스에
<link rel="preload">를 적용합니다.
2. INP (Interaction to Next Paint) — 상호작용 반응성
INP는 2024년 3월에 FID(First Input Delay)를 대체한 지표입니다. 사용자가 버튼을 클릭하거나 입력했을 때, 화면이 실제로 반응하기까지의 시간을 측정합니다.
FID는 첫 번째 상호작용만 측정했지만, INP는 페이지 전체 수명 동안의 모든 상호작용을 측정합니다. 더 실질적인 사용자 경험을 반영합니다.
기준
- 양호: 200밀리초 이내
- 개선 필요: 200ms ~ 500ms
- 나쁨: 500ms 초과
개선 방법
- JavaScript 최적화: 무거운 JS 파일을 분할(Code Splitting)하고, 사용하지 않는 코드를 제거합니다.
- 지연 로딩(Lazy Loading): 화면에 보이지 않는 요소의 JS를 나중에 로드합니다.
- 메인 스레드 차단 방지: 긴 작업(Long Task)을 작은 단위로 분할하여 브라우저가 사용자 입력에 빠르게 반응할 수 있게 합니다.
- 서드파티 스크립트 관리: 광고, 분석 도구, 채팅 위젯 등 외부 스크립트를 비동기로 로드합니다.
3. CLS (Cumulative Layout Shift) — 레이아웃 안정성
CLS는 페이지가 로딩되는 동안 콘텐츠가 예기치 않게 이동하는 정도를 측정합니다. 글을 읽고 있는데 갑자기 광고가 삽입되면서 내용이 밀려나는 경험, 버튼을 누르려는데 위치가 바뀌어서 다른 곳을 클릭하는 경험이 CLS가 나쁜 사이트에서 발생합니다.
기준
- 양호: 0.1 이하
- 개선 필요: 0.1 ~ 0.25
- 나쁨: 0.25 초과
개선 방법
- 이미지와 비디오에 크기 지정:
width와height속성을 반드시 명시합니다. 또는 CSS의aspect-ratio를 사용합니다. - 광고 영역 예약: 광고가 로드되기 전에 해당 영역의 크기를 미리 확보합니다.
- 웹폰트 최적화:
font-display: swap을 사용하고, 폰트를 프리로드합니다. - 동적 콘텐츠 처리: AJAX로 로드되는 콘텐츠의 영역을 미리 확보하거나, 기존 콘텐츠 아래에 삽입합니다.
Core Web Vitals 측정 도구
현재 내 사이트의 Core Web Vitals을 측정할 수 있는 도구들입니다.
- Google PageSpeed Insights — 가장 기본적인 도구. URL을 입력하면 바로 분석 결과를 보여줍니다.
- Google Search Console — "페이지 경험" 보고서에서 전체 사이트의 Core Web Vitals 상태를 확인합니다.
- Chrome DevTools — Lighthouse 탭에서 상세한 성능 분석이 가능합니다.
- Web Vitals 확장 프로그램 — Chrome 확장 프로그램으로 실시간 측정이 가능합니다.
야무진SEO의 성능 최적화 접근법
야무진SEO가 제작하는 모든 사이트는 Core Web Vitals 최적화를 기본으로 포함합니다.
- 정적 사이트 우선: 불필요한 서버 사이드 렌더링을 줄이고, 정적 HTML을 최대한 활용합니다.
- 이미지 파이프라인: 모든 이미지를 WebP로 변환하고, 반응형 이미지(srcset)를 적용합니다.
- 최소 JS 원칙: 꼭 필요한 JavaScript만 사용하고, 나머지는 제거하거나 지연 로딩합니다.
- CDN 배포: 한국 사용자에게 최적화된 CDN을 통해 빠른 응답 속도를 보장합니다.
단순히 예쁘기만 한 사이트가 아니라, 빠르고 안정적인 사이트가 구글에서 높은 순위를 차지합니다.