Core Web Vitals: SEO 향상을 위한 측정 및 개선
Core Web Vitals이 웹사이트에 중요한 이유
빠르고 기능이 풍부한 웹사이트를 구축했지만, 사용자들은 여전히 느리다고 불평하고 검색 순위는 하락하고 있습니다. 원인은 Core Web Vitals일 수 있습니다. 이는 Google이 실제 사용자 경험을 정량화하는 지표 세트입니다. 2021년부터 이 지표들은 확인된 순위 요인이며, 이탈률과 전환율에 직접적인 영향을 미칩니다. 이를 무시하면 트래픽과 수익을 잃게 됩니다.
이 가이드에서는 각 지표의 의미, 정확한 측정 방법, 오늘 바로 구현할 수 있는 단계별 개선 방법을 배우게 됩니다.
Core Web Vitals이란?
Core Web Vitals은 로딩, 상호 작용, 시각적 안정성을 포착하는 세 가지 특정 지표입니다:
- Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(이미지, 텍스트 블록, 비디오)가 표시되는 시간을 표시합니다. 좋은 LCP는 2.5초 이하입니다.
- Interaction to Next Paint (INP): 응답성을 측정합니다. 모든 상호 작용(클릭, 탭, 키 입력)의 지연 시간을 기록하고 단일 값을 보고합니다. 좋은 INP는 200밀리초 이하입니다. INP는 2024년 3월에 First Input Delay (FID)를 대체했습니다.
- Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 페이지 로드 중 예상치 못한 레이아웃 이동을 정량화합니다. 좋은 CLS는 0.1 이하입니다.
이 지표들은 필드 기반이므로 실제 사용자 데이터에서 나오며, 실험실 테스트가 아닙니다. 그래서 Chrome User Experience Report (CrUX)와 PageSpeed Insights 같은 도구가 이를 사용합니다.
Core Web Vitals 측정 방법
완전한 그림을 얻으려면 실험실과 필드 데이터가 모두 필요합니다. 실험실 도구는 디버깅에 도움이 되고, 필드 데이터는 실제 사용자 경험을 보여줍니다.
필드 도구 (실제 사용자 데이터)
- PageSpeed Insights: URL을 입력하면 실험실과 필드 데이터를 모두 볼 수 있습니다. 필드 섹션은 CrUX에서 가져옵니다.
- Search Console: Core Web Vitals 보고서는 URL을 상태(나쁨, 개선 필요, 좋음)별로 그룹화합니다.
- Chrome UX Report (CrUX): BigQuery 또는 CrUX API를 통해 원시 데이터에 액세스하세요.
- web-vitals JavaScript 라이브러리: 이 경량 스크립트를 사이트에 추가하여 실제 사용자로부터 지표를 수집하고 분석 플랫폼으로 전송하세요.
실험실 도구 (합성 테스트)
- Lighthouse: Chrome DevTools에 내장되어 있습니다. 실행하여 실험실 점수와 기회를 확인하세요.
- WebPageTest: 필름스트립, 워터폴 차트, 사용자 지정 스로틀링을 통한 고급 테스트.
- Chrome DevTools Performance 패널: 런타임 성능을 기록하고 분석하세요.
빠른 시작을 위해 PageSpeed Insights를 사용하세요. 하나의 보고서에 실험실과 필드 데이터를 결합합니다.
단계별: LCP 개선
LCP는 종종 다음 단계로 가장 쉽게 개선할 수 있습니다:
- 이미지 최적화: 품질을 잃지 않고 이미지를 압축하세요. WebP 또는 AVIF와 같은 최신 형식을 사용하세요. Image Compressor와 같은 도구가 도움이 될 수 있습니다.
- LCP 요소 미리 로드: 히어로 이미지나 글꼴에
<link rel="preload">를 추가하세요. - 서버 응답 시간 단축: CDN을 사용하고, 캐싱을 활성화하고, 백엔드 코드를 최적화하세요. Nginx의 경우 Nginx Log Analyzer로 로그를 확인하여 느린 요청을 찾으세요.
- 렌더 차단 리소스 제거: 중요 CSS를 인라인하고, 비중요 JavaScript를 지연시키고,
async또는defer속성을 사용하세요. - CDN 사용: 사용자와 가까운 위치에서 자산을 제공하세요.
단계별: INP 개선
INP는 응답성을 측정합니다. 높은 INP는 종종 긴 JavaScript 작업에서 발생합니다.
- 긴 작업 분할:
setTimeout또는requestIdleCallback을 사용하여 메인 스레드에 양보하세요. - 이벤트 핸들러 최적화: 비용이 많이 드는 작업을 디바운스하거나 스로틀하세요.
- JavaScript 줄이기: 사용하지 않는 코드를 제거하고, 코드 분할하고, 비중요 스크립트를 지연 로드하세요.
- 웹 워커 사용: 무거운 계산을 메인 스레드에서 이동하세요.
- 큰 DOM 크기 피하기: 가능하면 DOM을 1,500개 노드 이하로 유지하세요.
단계별: CLS 개선
CLS는 시각적 안정성에 관한 것입니다. 다음 전술로 예상치 못한 이동을 방지하세요:
- 이미지와 비디오에 크기 속성 설정: 항상
width와height를 포함하세요. - 광고 및 임베드 공간 확보: CSS
aspect-ratio또는 고정 컨테이너를 사용하세요. - 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 꼭 해야 한다면 플레이스홀더를 사용하거나 이동을 애니메이션화하세요.
- font-display: swap 사용: 글꼴 로딩 중 보이지 않는 텍스트를 방지하세요(약간의 이동이 발생할 수 있음; 중요한 글꼴에는
font-display: optional을 고려하세요). - 글꼴 미리 로드: 늦게 로드되는 글꼴로 인한 레이아웃 이동을 줄이세요.
Core Web Vitals 지표 비교
| 지표 | 측정 대상 | 좋은 임계값 | 주요 해결책 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5초 | 이미지 최적화, 미리 로드, CDN |
| INP | 응답성 | ≤ 200ms | 긴 작업 분할, JS 줄이기 |
| CLS | 시각적 안정성 | ≤ 0.1 | 크기 설정, 공간 확보 |
모니터링 및 지속적인 개선
성능은 일회성 수정이 아닙니다. 시간이 지남에 따라 Core Web Vitals을 추적하려면 실제 사용자 모니터링(RUM)을 설정하세요. web-vitals 라이브러리를 사용하여 지표를 분석 플랫폼으로 전송하세요. 회귀에 대한 알림을 설정하세요. CI/CD 파이프라인에서 Lighthouse로 정기적으로 감사하여 문제가 프로덕션에 도달하기 전에 잡으세요.
FAQ
Core Web Vitals의 현재 임계값은 무엇인가요?
LCP의 경우 좋음은 ≤ 2.5초, 개선 필요는 ≤ 4.0초, 나쁨은 > 4.0초입니다. INP의 경우 좋음은 ≤ 200ms, 개선 필요는 ≤ 500ms, 나쁨은 > 500ms입니다. CLS의 경우 좋음은 ≤ 0.1, 개선 필요는 ≤ 0.25, 나쁨은 > 0.25입니다.
Core Web Vitals을 얼마나 자주 측정해야 하나요?
실제 사용자 데이터로 지속적으로 모니터링하세요. 중요한 코드 변경 후와 최소 월 1회 실험실 테스트를 실행하세요. Search Console의 필드 데이터는 매일 업데이트되지만 28일 이동 창을 반영합니다.
개발자 없이 Core Web Vitals을 개선할 수 있나요?
이미지 압축 및 캐싱과 같은 일부 수정은 플러그인이나 도구로 할 수 있습니다. 그러나 JavaScript 줄이기 및 서버 튜닝과 같은 더 깊은 최적화는 종종 개발자의 개입이 필요합니다.
사이트 속도를 높일 준비가 되셨나요? 무료 Image Compressor로 이미지를 압축하여 LCP를 빠르게 향상시키세요.