Core Web Vitals: 웹 성능 측정 및 개선
빠른 웹사이트를 구축했는데도 사용자들은 여전히 느리다고 불평하고, 검색 순위도 원하는 만큼 나오지 않습니다. 문제는 무엇일까요? 바로 올바른 지표를 측정하지 않고 있기 때문입니다. Core Web Vitals(CWV)는 실제 사용자 경험을 측정하는 Google의 지표로, Largest Contentful Paint(LCP), Interaction to Next Paint(INP), Cumulative Layout Shift(CLS)를 포함합니다. 이를 무시하면 성능과 SEO를 놓치게 됩니다.
이 가이드는 CWV를 정확하게 측정하고 가장 흔한 문제를 해결하는 방법을 알려줍니다. 군더더기 없이 실행 가능한 단계만 담았습니다.
Core Web Vitals란?
Core Web Vitals는 사용자가 로딩, 상호작용, 시각적 안정성을 어떻게 느끼는지 수치화하는 세 가지 지표입니다:
- LCP는 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(이미지, 비디오, 텍스트 블록)가 보이는 시점을 표시합니다. 목표는 2.5초 이하입니다.
- INP는 응답성을 측정합니다. 모든 상호작용(클릭, 탭, 키 입력)의 지연 시간을 기록하고 높은 백분위 값을 보고합니다. 목표는 200밀리초 이하입니다.
- CLS는 시각적 안정성을 측정합니다. 예기치 않은 레이아웃 이동을 계산합니다. 목표는 0.1 이하입니다.
이 임계값은 Chrome User Experience Report(CrUX)의 실제 사용자 데이터를 기반으로 합니다. 이를 충족하면 사용자 만족도가 높아지고 검색 순위가 향상될 수 있습니다.
Core Web Vitals 측정 방법
실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 도구는 조건을 시뮬레이션하고, 필드 데이터는 실제 사용자를 반영합니다.
실험실 도구
- Lighthouse(Chrome DevTools 또는 CI)는 진단 정보와 함께 스냅샷을 제공합니다.
- PageSpeed Insights는 URL에 대한 실험실 및 필드 데이터를 결합합니다.
- Web Vitals Extension은 브라우징 중 Chrome 콘솔에 CWV를 기록합니다.
필드 도구
- Chrome UX Report (CrUX)는 수백만 사이트의 집계된 실제 사용자 데이터를 보여줍니다.
- web-vitals JavaScript 라이브러리를 사용하면 자체 사용자로부터 CWV를 수집하여 분석 도구로 전송할 수 있습니다.
- Search Console은 CrUX를 기반으로 사이트의 CWV 상태를 보고합니다.
필드 데이터로 문제 페이지를 식별한 다음, 실험실 도구로 디버깅하세요.
LCP 개선
LCP는 몇 가지 표적 수정으로 개선하기 가장 쉬운 경우가 많습니다.
- 이미지 최적화. 최신 형식(WebP, AVIF)을 사용하고, 눈에 띄는 품질 손실 없이 압축하며, 명시적인 width/height를 설정하세요. Image Compressor 같은 도구가 파일 크기를 줄이는 데 도움이 됩니다.
- LCP 이미지 사전 로드. head에
<link rel="preload" as="image" href="#">를 추가하세요. - 렌더링 차단 리소스 제거. 중요한 CSS를 인라인하고, 중요하지 않은 CSS/JS는 지연시키며, head에 동기 스크립트를 피하세요.
- CDN 사용. 사용자와 가까운 위치에서 자산을 제공하여 지연 시간을 줄이세요.
- 텍스트 압축 활성화. HTML, CSS, JS에 Brotli 또는 gzip을 사용하세요.
LCP 이미지 사전 로드 예시:
<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">
INP 개선
INP는 페이지가 사용자 입력에 얼마나 빠르게 응답하는지 측정합니다. 긴 작업은 메인 스레드를 차단하고 상호작용을 지연시킵니다.
- 긴 작업 분할.
setTimeout또는requestIdleCallback을 사용하여 메인 스레드에 양보하세요. - 이벤트 핸들러 최적화. 스크롤, 리사이즈 같은 고빈도 이벤트를 디바운스 또는 스로틀하세요.
- JavaScript 줄이기. 코드 분할, 트리 셰이킹, 중요하지 않은 스크립트 지연 로드하세요.
- 웹 워커 사용으로 무거운 계산을 처리하세요.
- 큰 DOM 크기 피하기. 가능하면 DOM을 1500개 노드 이하로 유지하세요.
메인 스레드에 양보하는 예시:
async function yieldToMain() {
if ('scheduler' in window && 'yield' in scheduler) {
await scheduler.yield();
} else {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
CLS 개선
레이아웃 이동은 요소가 예기치 않게 위치를 변경할 때 발생합니다. 일반적인 원인: 크기 없는 이미지, 광고, 임베드, 동적으로 주입된 콘텐츠입니다.
- 이미지와 비디오에 항상 width와 height 설정. 브라우저가 공간을 예약할 수 있습니다.
- 광고와 임베드에 공간 예약. CSS aspect-ratio 또는 고정 컨테이너를 사용하세요.
- 사용자 상호작용 없이 기존 콘텐츠 위에 콘텐츠 삽입 피하기.
font-display: swap사용 및 폰트 사전 로드로 보이지 않는 텍스트 이동을 방지하세요.- 애니메이션 주의. 레이아웃을 트리거하는 속성 대신 transform과 opacity를 사용하세요.
모니터링 및 지속적 개선
성능은 일회성 수정이 아닙니다. 회귀를 잡기 위해 모니터링을 설정하세요.
web-vitals라이브러리를 사용하여 CWV를 분석 도구로 전송하세요:
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);
- 지표가 임계값을 초과할 때 알림을 설정하세요.
- 모든 풀 리퀘스트에 대해 CI에서 Lighthouse를 실행하세요.
- 월간 CrUX 데이터를 검토하여 추세를 추적하세요.
Core Web Vitals 비교
| 지표 | 측정 대상 | 좋은 임계값 | 일반적인 수정 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5s | 이미지 최적화, 사전 로드, CDN |
| INP | 응답성 | ≤ 200ms | 긴 작업 분할, JS 줄이기 |
| CLS | 시각적 안정성 | ≤ 0.1 | 크기 설정, 공간 예약 |
FAQ
Core Web Vitals의 현재 임계값은 무엇인가요?
LCP: 좋음 ≤ 2.5s, 개선 필요 ≤ 4.0s, 나쁨 > 4.0s. INP: 좋음 ≤ 200ms, 개선 필요 ≤ 500ms, 나쁨 > 500ms. CLS: 좋음 ≤ 0.1, 개선 필요 ≤ 0.25, 나쁨 > 0.25.
Core Web Vitals를 얼마나 자주 확인해야 하나요?
분석 도구를 통해 필드 데이터를 지속적으로 모니터링하세요. CrUX와 Search Console은 월간 검토하세요. 중요한 코드 변경 시마다 실험실 테스트(Lighthouse)를 실행하세요.
개발자 없이 Core Web Vitals를 개선할 수 있나요?
이미지 압축이나 캐싱 활성화 같은 일부 수정은 플러그인이나 호스팅 설정으로 가능합니다. 하지만 더 깊은 최적화(코드 분할, JS 줄이기)는 일반적으로 개발자의 도움이 필요합니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 품질 손실 없이 파일 크기를 줄이는 무료 Image Compressor를 사용해 보세요.