Core Web Vitals: 웹 성능 측정 및 개선
최신 웹 앱을 구축했는데 사용자들이 느리다고 불평합니다. 검색 순위는 떨어지고 이탈률은 치솟고 있습니다. 원인은 열악한 Core Web Vitals—실제 사용자 경험을 측정하는 Google의 지표—일 수 있습니다. 이 가이드에서는 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: 감사를 실행하여 LCP, CLS, TBT(INP의 대리 지표)를 확인합니다.
- WebPageTest: 필름스트립과 워터폴 차트를 활용한 고급 테스트.
- PageSpeed Insights: 실험실 데이터와 필드 데이터를 결합합니다.
필드 도구
- Chrome UX Report (CrUX): 실제 사용자 지표의 공개 데이터셋.
- web-vitals 라이브러리: 지표를 분석 도구로 전송합니다.
예시: web-vitals 라이브러리를 사용하여 지표 기록하기:
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);
LCP 개선하기
LCP는 종종 수정할 때 가장 큰 영향을 미치는 지표입니다. 일반적인 원인: 느린 서버 응답, 렌더링 차단 리소스, 최적화되지 않은 이미지.
- 이미지 최적화: 압축하고, 최신 형식(WebP/AVIF)을 사용하며, 크기를 지정합니다. 빠른 압축을 원하시면 Image Compressor를 사용해 보세요.
- 중요 리소스 미리 로드: 히어로 이미지와 폰트에
<link rel="preload">를 사용합니다. - 서버 응답 시간 단축: 캐싱, CDN을 사용하고 백엔드 쿼리를 최적화합니다.
- 렌더링 차단 리소스 제거: 중요 CSS를 인라인화하고 비중요 JS를 지연시킵니다.
예시: LCP 이미지 미리 로드:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
INP 개선하기
INP는 반응성을 측정합니다. 긴 작업은 메인 스레드를 차단하고 시각적 피드백을 지연시킵니다.
- 긴 작업 분할:
setTimeout또는scheduler.yield를 사용하여 메인 스레드에 양보합니다. - 이벤트 핸들러 최적화: 적절한 곳에 디바운스와 스로틀을 적용하고, 무거운 동기 작업을 피합니다.
- JavaScript 줄이기: 코드 분할, 트리 셰이킹, 비중요 스크립트 지연.
- 웹 워커를 CPU 집약적 작업에 사용합니다.
예시: scheduler.yield로 양보하기(지원되는 환경에서):
async function handleClick() {
// Do some work
await scheduler.yield();
// Continue after yielding
}
CLS 개선하기
CLS는 시각적 안정성에 관한 것입니다. 레이아웃 이동은 요소가 예기치 않게 위치를 변경할 때 발생합니다.
- 이미지와 비디오에 크기 속성(width/height)을 설정합니다.
- 광고와 임베드에 공간 확보: CSS
aspect-ratio또는 고정 크기를 사용합니다. - 사용자 상호작용으로 트리거되지 않는 한 기존 콘텐츠 위에 콘텐츠를 삽입하지 않습니다.
- 레이아웃을 트리거하는 속성 대신 transform 애니메이션을 사용합니다.
예시: aspect-ratio로 공간 확보:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
Core Web Vitals 비교
| 지표 | 측정 대상 | 양호 기준 | 일반적인 해결책 |
|---|---|---|---|
| LCP | 로딩 성능 | ≤ 2.5초 | 이미지 최적화, 미리 로드, CDN |
| INP | 반응성 | ≤ 200ms | 긴 작업 분할, JS 줄이기 |
| CLS | 시각적 안정성 | ≤ 0.1 | 크기 설정, 공간 확보 |
도구와 워크플로
성능 모니터링을 CI/CD 파이프라인에 통합하세요. Lighthouse CI를 사용하여 회귀를 잡아냅니다. 필드 데이터의 경우 web-vitals와 분석 도구로 대시보드를 설정하세요.
이미지를 최적화할 때 사이트에 업로드하기 전에 Image Compressor로 빠르게 압축할 수 있습니다.
FAQ
Core Web Vitals이란?
Core Web Vitals은 Google이 웹 페이지의 사용자 경험을 측정하는 데 사용하는 세 가지 지표—LCP, INP, CLS—입니다.
Core Web Vitals을 얼마나 자주 측정해야 하나요?
분석 도구를 통해 필드에서 지속적으로, 그리고 각 배포 시 Lighthouse CI를 사용하여 실험실에서 회귀를 잡아내야 합니다.
사이트를 재설계하지 않고도 Core Web Vitals을 개선할 수 있나요?
네. 이미지 최적화, 미리 로드, 크기 설정 등 많은 개선은 전체 재설계 없이 점진적으로 수행할 수 있습니다.
Lighthouse로 현재 점수를 측정하는 것부터 시작한 다음, 가장 큰 영향을 미치는 지표를 해결하세요. 작고 일관된 최적화가 사용자 경험과 SEO에서 상당한 이득을 가져옵니다.