Core Web Vitals: 웹 성능 측정 및 개선 방법
빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평하나요? 아니면 Google 업데이트 이후 SEO 순위가 떨어졌나요? 원인은 사용자 경험을 측정하는 Google의 지표인 Core Web Vitals일 수 있습니다. 이 가이드에서는 Core Web Vitals이 무엇인지, 어떻게 측정하는지, 그리고 각 지표를 개선하는 구체적인 방법을 알아봅니다.
Core Web Vitals이란?
Core Web Vitals은 사용자 경험의 핵심 측면을 수치화하는 세 가지 지표입니다:
- Largest Contentful Paint (LCP): 가장 큰 콘텐츠 요소(이미지, 비디오 또는 텍스트 블록)가 화면에 표시되기까지 걸리는 시간입니다. 양호: ≤2.5초.
- Interaction to Next Paint (INP): 반응성을 측정합니다. 사용자 상호작용(클릭, 탭, 키 입력)부터 다음 프레임이 그려지기까지의 시간입니다. 양호: ≤200ms.
- Cumulative Layout Shift (CLS): 로딩 중 발생하는 예기치 않은 레이아웃 이동을 수치화합니다. 양호: ≤0.1.
이 지표들은 Google의 페이지 경험 신호의 일부이며 SEO와 사용자 만족도에 직접적인 영향을 미칩니다.
Core Web Vitals 측정 방법
실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 데이터(합성 테스트)는 디버깅에 도움이 되고, 필드 데이터(실제 사용자 모니터링)는 실제 경험을 반영합니다.
실험실 도구
- Chrome DevTools의 Lighthouse: 감사를 실행하고 개선 기회와 함께 점수를 확인하세요.
- WebPageTest: 필름스트립과 워터폴 차트를 활용한 고급 테스트.
- PageSpeed Insights: CrUX의 실험실 데이터와 필드 데이터를 결합합니다.
필드 도구
- Chrome User Experience Report (CrUX): 실제 사용자 지표의 공개 데이터셋입니다.
- web-vitals JavaScript 라이브러리: 분석을 통해 실제 사용자로부터 지표를 수집합니다.
- Search Console: Core Web Vitals 보고서에서 주의가 필요한 URL 그룹을 확인할 수 있습니다.
web-vitals 라이브러리를 사용해 분석 도구로 지표를 전송하는 방법은 다음과 같습니다:
import {onLCP, onINP, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use navigator.sendBeacon if available
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
LCP 개선하기
LCP는 종종 가장 영향력이 큰 지표입니다. 개선하려면:
- LCP 요소 최적화: LCP 요소(보통 히어로 이미지나 제목)를 식별하고 빠르게 로드되도록 하세요.
- 중요 리소스 사전 로드: 이미지, 폰트, 스타일시트에
<link rel="preload">를 사용하세요. - 최신 이미지 형식 사용: WebP 또는 AVIF를 폴백과 함께 제공하세요.
- 지연 로딩을 신중하게 적용: LCP 이미지는 지연 로딩하지 말고 우선순위를 높이세요.
- 서버 응답 시간 단축: CDN, 캐싱을 활용하고 백엔드를 최적화하세요.
- 렌더링 차단 리소스 제거: 중요하지 않은 CSS와 JavaScript는 지연시키세요.
예시: 히어로 이미지 사전 로드:
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
INP 개선하기
INP는 반응성을 측정합니다. 높은 INP는 주로 메인 스레드를 차단하는 긴 작업에서 발생합니다.
- 긴 작업 분할:
setTimeout,requestIdleCallback또는scheduler.yield()를 사용해 메인 스레드에 제어권을 양보하세요. - 이벤트 핸들러 최적화: 비용이 큰 작업에는 디바운스나 스로틀을 적용하세요.
- JavaScript 실행 감소: 코드 분할, 트리 셰이킹, 중요하지 않은 스크립트 지연 로드를 적용하세요.
- 대규모 DOM 업데이트 지양: DOM 변경을 일괄 처리하고 가상 DOM을 현명하게 사용하세요.
- CPU 집약적 작업에는 웹 워커 사용.
예시: scheduler.yield()를 사용한 제어권 양보(지원되는 환경에서):
async function handleClick() {
// Do some work
await scheduler.yield();
// Continue after yielding
}
CLS 개선하기
CLS는 시각적 안정성에 관한 것입니다. 예기치 않은 이동을 방지하세요:
- 이미지와 비디오에 항상 width와 height 속성 포함.
- 광고와 임베드에 공간 확보: CSS aspect-ratio나 고정 크기를 사용하세요.
- 사용자 상호작용 없이 기존 콘텐츠 위에 콘텐츠 삽입 지양.
- 애니메이션에는 레이아웃을 유발하는 속성 대신 CSS transform 사용.
- 폰트 사전 로드 및
font-display: swap을 사용해 보이지 않는 텍스트로 인한 이동을 방지하세요.
예시: aspect-ratio로 공간 확보:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
Core Web Vitals 비교
| 지표 | 측정 대상 | 양호 기준 | 일반적인 해결 방법 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤2.5초 | 이미지 최적화, 사전 로드, 서버 시간 단축 |
| INP | 반응성 | ≤200ms | 긴 작업 분할, JS 최적화, 워커 사용 |
| CLS | 시각적 안정성 | ≤0.1 | 크기 지정, 공간 확보, 동적 삽입 지양 |
도구와 워크플로
개발 워크플로에 Core Web Vitals 모니터링을 통합하세요:
- CI에서 Lighthouse를 실행해 성능 저하를 감지하세요.
- RUM(실제 사용자 모니터링)을 사용해 필드 데이터를 추적하세요.
- 성능 예산과 알림을 설정하세요.
- 서드파티 스크립트를 정기적으로 점검하세요. 이들은 종종 INP와 LCP에 영향을 미칩니다.
사이트에 업로드하기 전 이미지를 빠르게 최적화하려면 Image Compressor를 사용해 품질 손실 없이 파일 크기를 줄여보세요.
FAQ
Core Web Vitals의 현재 기준은 무엇인가요?
LCP는 양호 ≤2.5초, 개선 필요 ≤4초; INP는 양호 ≤200ms, 개선 필요 ≤500ms; CLS는 양호 ≤0.1, 개선 필요 ≤0.25입니다.
Core Web Vitals은 얼마나 자주 측정해야 하나요?
필드 데이터를 통해 지속적으로 측정하고, 중요한 코드 변경이 있을 때마다 실험실 도구로 측정하세요. 성능 저하에 대한 알림을 설정하세요.
사이트를 재구축하지 않고도 Core Web Vitals을 개선할 수 있나요?
네. 이미지 최적화, 사전 로드, 스크립트 지연 로드 등 많은 수정 사항을 점진적으로 적용할 수 있습니다.