Core Web Vitals는 구글이 웹페이지의 사용자 경험을 측정하기 위해 정의한 핵심 지표입니다. 2021년부터 구글 검색 순위 요소로 공식 반영되었으며, 페이지가 얼마나 빠르게 로드되고, 얼마나 빠르게 반응하며, 시각적으로 얼마나 안정적인지를 평가합니다.
이 글에서는 블랙글이 150개 이상의 프로젝트를 수행하며 축적한 경험을 바탕으로, Core Web Vitals의 세 가지 지표와 각각의 최적화 방법을 실전 중심으로 설명합니다. 블랙글의 구글 SEO 서비스에서도 기술적 SEO 점검 시 Core Web Vitals 분석을 필수적으로 진행합니다.
Core Web Vitals가 중요한 이유
구글은 검색 순위를 결정할 때 콘텐츠 품질뿐 아니라 사용자 경험도 함께 고려합니다. 아무리 좋은 정보를 담고 있어도 페이지가 느리게 로드되거나, 클릭해도 반응이 없거나, 화면이 갑자기 밀려버린다면 사용자는 이탈하게 됩니다.
Core Web Vitals는 이러한 사용자 경험의 핵심 요소를 수치화한 것입니다. 구글은 실제 사용자 데이터(CrUX: Chrome User Experience Report)를 기반으로 이 지표들을 측정하고, 검색 순위에 반영합니다. 특히 경쟁이 치열한 키워드에서는 콘텐츠 품질이 비슷할 때 Core Web Vitals 점수가 순위를 가르는 요소가 될 수 있습니다.
세 가지 핵심 지표
Core Web Vitals는 세 가지 지표로 구성됩니다. 각 지표는 사용자 경험의 서로 다른 측면을 측정합니다.
LCP (Largest Contentful Paint)
LCP는 페이지에서 가장 큰 콘텐츠 요소가 화면에 렌더링되는 시간을 측정합니다. 사용자가 "이 페이지가 로드되었구나"라고 인식하는 시점과 가장 가깝습니다.
기준:
- 좋음: 2.5초 이내
- 개선 필요: 2.5초 ~ 4초
- 나쁨: 4초 초과
LCP 요소가 되는 것들:
- 이미지 (img 태그, background-image)
- 비디오의 포스터 이미지
- 큰 텍스트 블록
주요 원인과 해결 방법:
느린 서버 응답 시간이 가장 흔한 원인입니다. 서버가 HTML을 전송하는 데 오래 걸리면 그 이후 모든 과정이 지연됩니다. CDN을 사용하여 사용자와 가까운 서버에서 콘텐츠를 전송하고, 서버 사이드 캐싱을 적용하면 개선됩니다.
렌더링 차단 리소스도 문제가 됩니다. CSS와 JavaScript 파일이 로드될 때까지 브라우저가 페이지 렌더링을 시작하지 못합니다. 중요하지 않은 CSS는 비동기로 로드하고, JavaScript는 defer나 async 속성을 활용하세요.
최적화되지 않은 이미지는 LCP를 크게 저하시킵니다. WebP나 AVIF 같은 차세대 이미지 포맷을 사용하고, 적절한 크기로 리사이징하세요. 또한 LCP 요소가 될 가능성이 높은 메인 이미지에는 preload를 적용하여 우선 로드되도록 합니다.
INP (Interaction to Next Paint)
INP는 사용자가 페이지와 상호작용(클릭, 탭, 키 입력)한 후 화면이 업데이트되는 데 걸리는 시간을 측정합니다. 2024년 3월부터 기존의 FID(First Input Delay)를 대체하여 Core Web Vitals의 공식 지표가 되었습니다.
기준:
- 좋음: 200ms 이내
- 개선 필요: 200ms ~ 500ms
- 나쁨: 500ms 초과
주요 원인과 해결 방법:
무거운 JavaScript 실행이 가장 큰 원인입니다. 메인 스레드가 JavaScript를 처리하느라 바쁘면 사용자 입력에 즉시 반응하지 못합니다. 큰 JavaScript 번들을 작은 청크로 분할하고, 사용자 상호작용이 필요한 코드만 우선 로드하세요.
긴 작업(Long Tasks)을 분할해야 합니다. 50ms 이상 걸리는 작업은 긴 작업으로 분류되며, 이 동안 브라우저는 사용자 입력에 반응하지 못합니다. 큰 작업을 여러 개의 작은 작업으로 나누고, requestIdleCallback이나 setTimeout을 활용하여 작업 사이에 브라우저가 사용자 입력을 처리할 틈을 주세요.
서드파티 스크립트 관리도 중요합니다. 분석 도구, 광고, 소셜 위젯 등 서드파티 스크립트가 메인 스레드를 점유하는 경우가 많습니다. 꼭 필요한 스크립트만 유지하고, 가능하면 웹 워커로 오프로드하세요.
CLS (Cumulative Layout Shift)
CLS는 페이지 로딩 중 예기치 않게 레이아웃이 이동하는 정도를 측정합니다. 버튼을 클릭하려는 순간 갑자기 광고가 로드되면서 다른 곳을 클릭하게 되는 경험을 수치화한 것입니다.
기준:
- 좋음: 0.1 이하
- 개선 필요: 0.1 ~ 0.25
- 나쁨: 0.25 초과
주요 원인과 해결 방법:
크기가 지정되지 않은 이미지가 가장 흔한 원인입니다. 이미지가 로드되기 전에는 브라우저가 공간을 얼마나 확보해야 할지 모릅니다. 모든 이미지와 비디오에 width와 height 속성을 명시하거나, CSS의 aspect-ratio를 활용하세요.
동적으로 삽입되는 콘텐츠도 문제입니다. 광고, 배너, 쿠키 동의 팝업 등이 페이지 로드 후 삽입되면 기존 콘텐츠가 밀려납니다. 동적 콘텐츠가 들어갈 공간을 미리 확보해두거나, 화면 상단보다는 하단에 삽입하세요.
웹폰트 로딩으로 인한 레이아웃 이동도 있습니다. 웹폰트가 로드되면서 텍스트 크기가 변하면 레이아웃이 밀립니다. font-display: swap을 사용하고, 대체 폰트와 웹폰트의 크기 차이를 최소화하세요. size-adjust, ascent-override 같은 CSS 속성을 활용하면 폰트 간 크기 차이를 조정할 수 있습니다.
측정 도구
Core Web Vitals를 측정하고 개선점을 파악하는 데 유용한 도구들입니다.
PageSpeed Insights는 가장 기본적인 도구입니다. URL을 입력하면 실제 사용자 데이터(필드 데이터)와 시뮬레이션 결과(랩 데이터)를 함께 보여줍니다. 각 지표별 점수와 구체적인 개선 제안을 확인할 수 있습니다.
Google Search Console의 "코어 웹 바이탈" 보고서는 사이트 전체의 Core Web Vitals 상태를 모니터링합니다. 어떤 페이지가 "좋음", "개선 필요", "나쁨"에 해당하는지 한눈에 파악할 수 있고, 문제가 있는 URL 그룹을 확인할 수 있습니다.
Chrome DevTools의 Lighthouse 탭에서도 Core Web Vitals를 측정할 수 있습니다. 개발 과정에서 실시간으로 성능을 점검하기에 유용합니다. Performance 탭에서는 더 상세한 타임라인 분석이 가능합니다.
Web Vitals 확장 프로그램은 Chrome 브라우저에 설치하면 방문하는 모든 페이지의 Core Web Vitals를 실시간으로 보여줍니다.
실전 최적화 우선순위
모든 것을 한 번에 최적화하기는 어렵습니다. 블랙글에서 프로젝트를 진행할 때 적용하는 우선순위입니다.
첫째, 가장 큰 영향을 주는 요소부터 해결합니다. PageSpeed Insights의 "기회" 섹션에서 절약할 수 있는 시간이 가장 큰 항목을 먼저 처리하세요. 대부분의 경우 이미지 최적화와 JavaScript 지연 로딩이 상위에 있습니다.
둘째, 템플릿 레벨에서 해결합니다. 개별 페이지가 아닌 템플릿을 수정하면 같은 템플릿을 사용하는 모든 페이지가 개선됩니다. 블로그 포스트 템플릿, 상품 페이지 템플릿 등 반복 사용되는 템플릿을 우선 최적화하세요.
셋째, 필드 데이터를 기준으로 판단합니다. 랩 데이터(시뮬레이션)는 참고용이고, 실제 검색 순위에 영향을 미치는 것은 필드 데이터(실제 사용자 경험)입니다. Search Console의 Core Web Vitals 보고서를 주기적으로 확인하세요.
마무리
Core Web Vitals는 기술적 SEO의 핵심 영역으로, 사용자 경험과 검색 순위에 직접적인 영향을 미칩니다. LCP, INP, CLS 각 지표의 의미를 이해하고 체계적으로 개선하면, 사용자에게 더 나은 경험을 제공하면서 검색 순위에서도 이점을 얻을 수 있습니다.
Core Web Vitals 최적화는 기술적 SEO 체크리스트의 중요한 부분입니다. 전체적인 기술적 SEO 점검과 함께 진행하면 더 효과적입니다.
웹사이트의 Core Web Vitals 상태가 궁금하시거나 최적화가 필요하시다면, 블랙글의 전문가 팀이 도와드릴 수 있습니다. 무료 상담을 통해 현재 상태를 진단받아 보세요.