Core Web Vitals: 웹 성능 측정 및 개선
사용자는 참을성이 없습니다. 페이지 로딩이 너무 오래 걸리거나 읽는 동안 화면이 이리저리 움직이면 사용자는 떠나버립니다. Core Web Vitals(CWV)는 이러한 불편함을 수치화한 Google의 지표입니다: 로딩 속도를 위한 Largest Contentful Paint(LCP), 반응성을 위한 Interaction to Next Paint(INP), 시각적 안정성을 위한 Cumulative Layout Shift(CLS)가 있습니다. 이 가이드에서는 이러한 지표를 측정하는 방법과 효과적인 개선 방법을 알아봅니다.
Core Web Vitals란?
Core Web Vitals는 사용자 경험을 반영하는 실제 환경 지표 세트입니다. Google의 페이지 경험 신호의 일부이며 순위 결정에 사용됩니다. 각 지표에는 "좋음" 기준이 있습니다:
- LCP: 2.5초 이하여야 합니다.
- INP: 200밀리초 이하여야 합니다.
- CLS: 0.1 이하여야 합니다.
이 기준은 페이지 로드의 75번째 백분위수에서 측정되며, 방문의 75%가 목표를 충족해야 함을 의미합니다.
Core Web Vitals 측정 방법
실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 데이터는 디버깅에 도움이 되고, 필드 데이터는 실제 사용자 경험을 보여줍니다.
필드 데이터 (실제 사용자)
- Chrome User Experience Report (CrUX): 오리진에 대한 실제 사용자 집계 데이터를 제공합니다. PageSpeed Insights 또는 CrUX 대시보드를 통해 액세스할 수 있습니다.
- web-vitals JavaScript 라이브러리: 이 가벼운 스크립트를 사이트에 추가하여 지표를 분석 도구로 전송합니다.
import {onLCP, onINP, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);실험실 데이터 (합성)
- Lighthouse: Chrome DevTools에 내장되어 성능을 감사하고 점수를 제공합니다.
- WebPageTest: 네트워크 스로틀링을 통한 심층 분석에 사용됩니다.
실험실 데이터를 사용하여 빠르게 반복하되, 항상 필드 데이터로 검증하세요.
Largest Contentful Paint (LCP) 개선
LCP는 가장 큰 콘텐츠 요소(보통 히어로 이미지나 제목)가 표시되는 시점을 측정합니다. 개선하려면:
- 이미지 최적화: 이미지를 압축하고 WebP 또는 AVIF와 같은 최신 형식을 사용하며
srcset으로 반응형 크기를 제공합니다. - 중요 리소스 사전 로드: LCP 이미지와 주요 글꼴에
<link rel="preload">를 사용합니다. - 렌더링 차단 리소스 제거: 중요하지 않은 CSS와 JavaScript를 지연시킵니다. 중요한 CSS는 인라인으로 처리합니다.
- CDN 사용: 사용자와 가까운 위치에서 자산을 제공합니다.
- 텍스트 압축 활성화: 텍스트 기반 자산에 Brotli 또는 gzip을 사용합니다.
이미지 압축에는 Image Compressor와 같은 도구를 사용하여 품질 손실 없이 파일 크기를 빠르게 줄일 수 있습니다.
Interaction to Next Paint (INP) 개선
INP는 사용자 상호작용에 대한 페이지의 반응성을 측정합니다. INP가 높으면 브라우저가 바쁘고 빠르게 응답할 수 없음을 의미합니다. 개선하려면:
- 긴 작업 분할:
setTimeout또는requestIdleCallback을 사용하여 JavaScript 작업을 작은 청크로 나눕니다. - 이벤트 핸들러 최적화: 비용이 많이 드는 핸들러를 디바운스하거나 스로틀합니다. 레이아웃 스래싱을 피하세요.
- JavaScript 줄이기: 사용하지 않는 코드를 제거하고, 코드 분할을 수행하며, 중요하지 않은 스크립트를 지연시킵니다.
- 웹 워커 사용: 무거운 계산을 워커 스레드로 오프로드합니다.
또한 타사 스크립트로 메인 스레드를 차단하지 않도록 주의하세요. 정기적으로 감사하세요.
Cumulative Layout Shift (CLS) 개선
CLS는 예상치 못한 레이아웃 이동을 측정합니다. 낮게 유지하려면:
- 크기 속성 설정: 이미지와 비디오에 항상
width와height를 포함합니다. - 동적 콘텐츠를 위한 공간 확보: 광고 및 삽입 콘텐츠에 CSS
aspect-ratio또는 플레이스홀더를 사용합니다. - 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 사용자 상호작용에 대한 응답인 경우는 예외입니다.
- 변환 애니메이션 사용: 레이아웃을 트리거하는 속성 대신 애니메이션에
transform과opacity를 선호합니다.
도구 및 워크플로우
CWV를 지속적으로 모니터링하고 개선하기 위한 간단한 워크플로우입니다:
| 단계 | 작업 | 도구 |
|---|---|---|
| 1 | 기준 감사 | PageSpeed Insights, Lighthouse |
| 2 | 문제 식별 | Chrome DevTools 성능 패널 |
| 3 | 수정 적용 | 코드 변경, 이미지 최적화 |
| 4 | 필드 데이터 모니터링 | web-vitals + 분석, CrUX |
개선 사항은 시간이 지남에 따라 실제 사용자 데이터로 검증해야 합니다.
FAQ
Core Web Vitals의 현재 기준은 무엇인가요?
LCP ≤ 2.5초, INP ≤ 200밀리초, CLS ≤ 0.1이며, 페이지 로드의 75번째 백분위수에서 측정됩니다.
Core Web Vitals를 얼마나 자주 확인해야 하나요?
필드 데이터를 지속적으로 모니터링하고 주요 변경 후 실험실 감사를 실행하세요. 월간 검토가 좋은 방법입니다.
사이트를 재설계하지 않고도 Core Web Vitals를 개선할 수 있나요?
예. 이미지 최적화, 스크립트 지연, 크기 속성 설정과 같은 많은 개선 사항은 최소한의 코드 변경으로 수행할 수 있습니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 무료 Image Compressor를 사용하여 파일 크기를 즉시 줄여보세요.