Core Web Vitals: 측정 및 개선 방법
사용자는 빠르고 반응성 좋은 페이지를 기대합니다. Google의 Core Web Vitals(CWV)는 이러한 경험을 수치화합니다: Largest Contentful Paint(LCP)는 로딩을, Interaction to Next Paint(INP)는 상호작용성을, Cumulative Layout Shift(CLS)는 시각적 안정성을 측정합니다. 점수가 나쁘면 사용자 만족도가 떨어지고 검색 순위에 영향을 줄 수 있습니다. 이 가이드에서는 CWV를 정확하게 측정하고 일반적인 문제를 실용적인 단계로 해결하는 방법을 보여줍니다.
Core Web Vitals란?
Core Web Vitals는 실제 사용자 경험을 반영하는 세 가지 지표입니다:
- LCP: 가장 큰 콘텐츠 요소(이미지, 텍스트 블록)가 렌더링될 때까지의 시간. 좋음: ≤2.5초.
- INP: 사용자 상호작용부터 다음 페인트까지의 시간. 좋음: ≤200ms.
- CLS: 레이아웃 이동 점수의 합. 좋음: ≤0.1.
이 임계값은 페이지 로드의 75번째 백분위수에서 평가됩니다. 즉, 방문의 75%가 목표를 충족해야 합니다.
Core Web Vitals 측정 방법
실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 도구는 조건을 시뮬레이션하고, 필드 데이터는 실제 사용자로부터 수집됩니다.
실험실 도구
- Chrome DevTools의 Lighthouse: 성능, 접근성, SEO에 대한 감사를 실행합니다. 실험실 CWV 점수와 개선 기회를 제공합니다.
- WebPageTest: 사용자 정의 네트워크 조건과 기기 에뮬레이션을 통한 고급 테스트.
필드 도구
- Chrome UX Report (CrUX): 실제 사용자 지표의 공개 데이터 세트. PageSpeed Insights 또는 BigQuery를 통해 액세스할 수 있습니다.
- web-vitals JavaScript 라이브러리: 실제 사용자로부터 CWV를 수집하여 분석 도구로 전송합니다.
필드 데이터를 사용하여 실제 문제를 식별한 다음, 실험실 도구로 디버깅하고 수정 사항을 확인하세요.
Largest Contentful Paint (LCP) 개선
LCP는 종종 히어로 이미지나 주요 제목입니다. 다음 요소를 최적화하세요:
- 이미지 최적화: 이미지를 압축하고, WebP 또는 AVIF와 같은 최신 형식을 사용하며,
srcset으로 반응형 크기를 제공합니다. - 중요 리소스 사전 로드: LCP 이미지나 글꼴에 대해
<link rel="preload">를 추가합니다. - 서버 응답 시간 단축: 캐싱, CDN, 효율적인 백엔드 코드를 사용합니다.
- 렌더링 차단 리소스 제거: 중요하지 않은 CSS/JS를 지연시키고, 중요한 CSS를 인라인으로 처리합니다.
예: LCP 이미지 사전 로드:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">또한 <img> 태그에 fetchpriority="high"를 설정하여 중요도를 표시하세요.
Interaction to Next Paint (INP) 개선
INP는 클릭, 탭, 키보드 입력에 대한 반응성을 측정합니다. 긴 작업은 메인 스레드를 차단합니다. INP를 개선하려면:
- 긴 작업 분할:
setTimeout또는requestIdleCallback을 사용하여 브라우저에 양보하세요. - 이벤트 핸들러 최적화: 비용이 많이 드는 작업을 디바운스하거나 스로틀하세요.
- JavaScript 줄이기: 코드 분할, 트리 셰이킹, 중요하지 않은 스크립트 지연.
- 웹 워커 사용: CPU 집약적인 작업에 사용하세요.
예: 메인 스레드에 양보:
async function yieldToMain() {
return new Promise(resolve => setTimeout(resolve, 0));
}
async function handleClick() {
// Do some work
await yieldToMain();
// Continue
}Cumulative Layout Shift (CLS) 개선
CLS는 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인: 크기가 지정되지 않은 이미지, 광고, 임베드, 웹 글꼴.
- 이미지와 비디오에 width와 height 설정 또는 CSS
aspect-ratio사용. - 동적 콘텐츠(광고, 임베드)를 위한 공간 확보: min-height 사용.
font-display: swap사용 및 글꼴 사전 로드로 보이지 않는 텍스트로 인한 이동 방지.- 사용자 상호작용 없이 기존 콘텐츠 위에 콘텐츠 삽입 피하기.
예: 광고를 위한 공간 확보:
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}지표 및 도구 비교
| 지표 | 측정 대상 | 좋은 임계값 | 주요 도구 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤2.5초 | Lighthouse, CrUX, web-vitals |
| INP | 상호작용성 | ≤200ms | Lighthouse, web-vitals |
| CLS | 시각적 안정성 | ≤0.1 | Lighthouse, CrUX, web-vitals |
CWV 개선을 위한 실용적인 워크플로
- 필드 데이터 측정: PageSpeed Insights 또는 CrUX로 점수가 나쁜 페이지를 식별합니다.
- 해당 페이지에서 Lighthouse 실행: 구체적인 개선 기회를 얻습니다.
- 영향도에 따라 수정 우선순위 지정: 종종 LCP와 CLS가 개선하기 가장 쉽습니다.
- 변경 사항 구현 및 실험실에서 테스트.
- 배포 및 모니터링: 필드 데이터로 개선 확인.
- 남은 문제에 대해 반복.
CWV는 사용자 중심이므로 항상 실제 사용자 데이터로 검증하세요.
FAQ
Core Web Vitals란 무엇이며 왜 중요한가요?
Core Web Vitals는 로딩, 상호작용성, 시각적 안정성을 수치화하는 세 가지 지표(LCP, INP, CLS)입니다. 실제 사용자 경험을 반영하고 Google이 순위 신호로 사용하기 때문에 중요합니다.
Core Web Vitals를 얼마나 자주 측정해야 하나요?
필드 데이터를 지속적으로 모니터링하고 주요 변경 후에는 실험실 테스트를 실행하세요. CrUX 데이터를 월별로 검토하는 것이 좋습니다.
사이트를 재구축하지 않고도 Core Web Vitals를 개선할 수 있나요?
예. 이미지 최적화, 사전 로드, 레이아웃 수정과 같은 많은 개선 사항은 전체 재구축 없이 점진적으로 적용할 수 있습니다.
더 빠른 LCP를 위해 이미지를 압축해야 하나요? 품질 손실 없이 파일 크기를 줄이려면 무료 이미지 압축기를 사용해 보세요.