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초, 개선 필요: ≤4초, 나쁨: >4초.
- INP: 사용자 상호작용(클릭, 탭, 키 누름)부터 다음 프레임이 그려질 때까지의 시간. 좋음: ≤200ms, 개선 필요: ≤500ms, 나쁨: >500ms.
- CLS: 예기치 않은 시각적 움직임에 대한 레이아웃 이동 점수의 합계. 좋음: ≤0.1, 개선 필요: ≤0.25, 나쁨: >0.25.
이 임계값은 모바일과 데스크톱으로 구분된 페이지 로드의 75번째 백분위수를 기준으로 합니다.
Core Web Vitals 측정 방법
실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 도구는 조건을 시뮬레이션하고, 필드 데이터는 실제 사용자로부터 수집됩니다.
실험실 도구
- Lighthouse (Chrome DevTools 또는 PageSpeed Insights): LCP, CLS 및 총 차단 시간(INP의 대리 지표)을 감사합니다.
- WebPageTest: 고급 필름스트립 및 워터폴 분석.
- Chrome DevTools Performance 패널: 상호작용을 기록하여 INP에 영향을 미치는 긴 작업을 식별합니다.
필드 도구
- Chrome UX Report (CrUX): 공개 사이트에 대한 실제 사용자 데이터 집계.
- web-vitals JavaScript 라이브러리: 지표를 분석 도구로 전송합니다.
- Search Console Core Web Vitals 보고서: 상태별로 URL을 그룹화합니다.
npm으로 web-vitals 라이브러리를 설치하거나 CDN에서 포함한 다음 지표를 기록하세요:
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);
언로드 차단을 피하려면 sendBeacon을 사용하세요. 시간 경과에 따라 데이터를 수집하여 추세를 확인하세요.
Largest Contentful Paint (LCP) 개선
LCP는 종종 히어로 이미지나 주요 제목입니다. 중요 경로를 최적화하세요:
- LCP 리소스 우선순위 지정: LCP 이미지에
fetchpriority="high"를 추가하거나 미리 로드하세요. - 서버 응답 시간 단축: 캐싱, CDN 및 효율적인 백엔드 쿼리를 사용하세요.
- 렌더링 차단 리소스 제거: 중요하지 않은 CSS/JS를 지연시키고 중요 CSS를 인라인으로 처리하세요.
- 이미지 최적화: 압축하고 최신 형식(WebP/AVIF)을 사용하며 크기를 설정하세요.
- CDN 사용: 사용자와 가까운 위치에서 자산을 제공하세요.
예: LCP 이미지를 미리 로드하고 fetchpriority를 설정하세요:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">
이미지 압축을 위해 이미지 압축기를 사용하여 눈에 띄는 품질 손실 없이 파일 크기를 줄이세요.
Interaction to Next Paint (INP) 개선
INP는 응답성을 반영합니다. 긴 JavaScript 작업은 메인 스레드를 차단하고 시각적 피드백을 지연시킵니다.
- 긴 작업 분할:
setTimeout,requestIdleCallback또는scheduler.yield()를 사용하여 브라우저에 양보하세요. - 이벤트 핸들러 최적화: 입력을 디바운스하고 클릭 핸들러에서 무거운 작업을 피하세요.
- JavaScript 줄이기: 코드 분할, 트리 셰이킹, 중요하지 않은 스크립트 지연.
- 웹 워커 사용: CPU 집약적인 작업에 사용하세요.
- 대규모 DOM 업데이트 피하기: DOM 변경을 일괄 처리하고 긴 목록에는 가상화를 사용하세요.
web-vitals 라이브러리로 필드에서 INP를 측정하고 Performance 패널을 사용하여 상호작용 중 긴 작업을 식별하세요.
Cumulative Layout Shift (CLS) 개선
CLS는 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인: 크기가 지정되지 않은 이미지, 공간이 예약되지 않은 광고/임베드, 늦게 로드되는 글꼴.
- 이미지와 비디오에 항상 width와 height 설정하거나 CSS
aspect-ratio를 사용하세요. - 동적 콘텐츠(광고, 임베드)를 위한 공간 예약: min-height로 공간을 확보하세요.
font-display: swap사용 및 주요 글꼴을 미리 로드하여 보이지 않는 텍스트와 레이아웃 이동을 방지하세요.- 사용자 상호작용 없이 기존 콘텐츠 위에 콘텐츠 삽입 피하기.
예: 반응형 이미지에 종횡비 설정:
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
Core Web Vitals 비교
| 지표 | 측정 항목 | 좋은 임계값 | 주요 최적화 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤2.5초 | 이미지, 서버, 중요 CSS 최적화 |
| INP | 상호작용성 | ≤200ms | JS 줄이기, 긴 작업 분할 |
| CLS | 시각적 안정성 | ≤0.1 | 크기 설정, 공간 예약 |
CWV 개선을 위한 실용적인 워크플로우
- 기준 측정: Lighthouse를 실행하고 web-vitals를 통해 필드 데이터를 수집하세요.
- 병목 지점 식별: Performance 패널과 네트워크 워터폴을 사용하세요.
- 수정 우선순위 지정: 가장 나쁜 점수의 지표에 집중하세요.
- 변경 사항 구현: 이미지 최적화, 스크립트 지연, 크기 설정.
- 테스트 및 모니터링: 실험실 테스트를 다시 실행하고 시간 경과에 따라 필드 데이터를 추적하세요.
CWV는 필드 지표임을 기억하세요. 실험실 도구는 진단에 도움이 되지만 실제 사용자 데이터가 진실의 원천입니다.
FAQ
Core Web Vitals의 현재 임계값은 무엇인가요?
좋음: LCP ≤2.5초, INP ≤200ms, CLS ≤0.1. 개선 필요: LCP ≤4초, INP ≤500ms, CLS ≤0.25. 나쁨: 해당 값 초과. 이는 페이지 로드의 75번째 백분위수에서 평가됩니다.
Core Web Vitals를 얼마나 자주 측정해야 하나요?
필드 데이터를 지속적으로 모니터링하고 주요 변경 후 실험실 감사를 실행하세요. 최소한 Search Console의 Core Web Vitals 보고서를 월별로, 그리고 프론트엔드 성능에 영향을 미치는 배포 후에 검토하세요.
사이트를 재설계하지 않고도 Core Web Vitals를 개선할 수 있나요?
예. 많은 개선은 기술적입니다: 이미지 압축, width/height 속성 설정, 중요하지 않은 JavaScript 지연, 긴 작업 분할. 이러한 변경은 시각적 재설계 없이도 종종 상당한 이점을 제공합니다.
더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 무료 이미지 압축기를 사용하여 품질을 유지하면서 이미지를 축소하고 Core Web Vitals 점수를 향상시키세요.