Core Web Vitals: 웹 성능 측정 및 개선 가이드

빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평하나요? 아니면 Google 업데이트 이후 SEO 순위가 떨어졌나요? 범인은 Core Web Vitals—Google의 사용자 경험 지표일 수 있습니다. 이 가이드에서는 Core Web Vitals이 무엇인지, 실제 사용자 데이터로 측정하는 방법, 그리고 개선하기 위한 실용적인 단계를 배우게 됩니다.

Core Web Vitals이란?

Core Web Vitals은 사용자 경험의 핵심 측면을 수치화하는 세 가지 지표입니다:

• Largest Contentful Paint (LCP): 가장 큰 가시적 요소(예: 히어로 이미지 또는 제목)가 렌더링되는 데 걸리는 시간. 양호: ≤2.5초.
• First Input Delay (FID): 사용자가 처음 상호작용(예: 링크 클릭)한 시점부터 브라우저가 응답할 때까지의 시간. 양호: ≤100ms.
• Cumulative Layout Shift (CLS): 시각적 안정성—요소가 예기치 않게 얼마나 이동하는지를 측정. 양호: ≤0.1.

이 지표들은 Google의 페이지 경험 신호의 일부이며 SEO에 직접적인 영향을 미칩니다. 하지만 더 중요하게는 실제 사용자의 불만을 반영합니다.

Core Web Vitals 측정 방법

실험실 데이터와 필드 데이터 모두 필요합니다. 실험실 데이터(예: Lighthouse)는 디버깅에 도움이 되고, 필드 데이터(실제 사용자 모니터링)는 실제 성능을 보여줍니다.

1. Chrome UX Report (CrUX) 사용

CrUX는 수백만 개 사이트에 대한 집계된 실제 사용자 데이터를 제공합니다. PageSpeed Insights 또는 CrUX 대시보드에서 확인할 수 있습니다. 이는 해당 오리진의 LCP, FID, CLS 분포를 보여줍니다.

2. 실제 사용자 모니터링(RUM) 설정

Google Analytics 4, Vercel Analytics 또는 오픈소스 라이브러리(web-vitals)와 같은 도구를 사용하면 실제 방문자로부터 Core Web Vitals을 수집할 수 있습니다. 다음은 분석 엔드포인트로 지표를 보내는 방법입니다:

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

이 스니펫은 web-vitals 라이브러리를 사용하여 지표를 캡처하고 페이지 로드에 영향을 주지 않으면서 sendBeacon을 통해 전송합니다.

3. 실험실 테스트를 위해 Lighthouse 사용

Lighthouse(Chrome DevTools 또는 PageSpeed Insights)는 페이지 로드를 시뮬레이션하고 Core Web Vitals과 개선 기회를 보고합니다. 주요 페이지에서 실행하고 시간 경과에 따른 변화를 추적하세요.

LCP 개선

LCP는 종종 가장 영향력 있는 지표입니다. 개선하려면:

• 이미지 최적화: 이미지를 압축하고, 최신 형식(WebP, AVIF)을 사용하며, srcset으로 반응형 크기를 제공하세요.
• 중요 리소스 사전 로드: LCP 이미지나 폰트에 <link rel="preload">를 사용하세요.
• 서버 응답 시간 단축: CDN, 캐싱을 사용하고 백엔드 쿼리를 최적화하세요.
• 렌더링 차단 리소스 제거: 중요하지 않은 CSS/JS를 지연시키고, 중요 CSS를 인라인으로 처리하세요.

예를 들어, 히어로 이미지를 사전 로드하세요:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

FID 개선

FID는 입력 반응성을 측정합니다. 개선하려면:

• 긴 작업 분할: setTimeout 또는 requestIdleCallback을 사용하여 메인 스레드에 양보하세요.
• 메인 스레드 작업 최소화: JavaScript 실행 시간을 줄이고, 큰 번들을 피하세요.
• 웹 워커 사용: 무거운 계산에 사용하세요.
• 이벤트 핸들러 최적화: 빠른 이벤트를 디바운스하거나 스로틀하세요.

또한 2024년에 FID를 대체할 Interaction to Next Paint (INP)로 전환하는 것을 고려하세요. INP는 모든 상호작용을 측정하므로 동일한 최적화가 적용됩니다.

CLS 개선

CLS는 시각적 안정성에 관한 것입니다. 일반적인 원인과 해결 방법:

• 치수가 없는 이미지: 항상 width 및 height 속성을 설정하거나 CSS aspect-ratio를 사용하세요.
• 광고, 임베드, iframe: 플레이스홀더로 공간을 확보하거나 고정 치수를 설정하세요.
• 동적 콘텐츠 삽입: 사용자 상호작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요.
• 웹 폰트: font-display: swap을 사용하고 폰트를 사전 로드하여 보이지 않는 텍스트와 레이아웃 이동을 방지하세요.

예: 이미지 공간 확보:

<img src="#" width="800" height="600" alt="...">

Core Web Vitals 비교

지속적인 모니터링을 위한 도구

Core Web Vitals 개선은 일회성 작업이 아닙니다. 필드 데이터를 추적하는 대시보드를 설정하세요. 사용:

• Google Search Console: Core Web Vitals 보고서는 주의가 필요한 URL 그룹을 보여줍니다.
• PageSpeed Insights: 실험실 및 필드 데이터를 결합합니다.
• Web Vitals 확장 프로그램: 브라우징 중 실시간 지표.
• RUM 도구: SpeedCurve, Calibre 또는 오픈소스 대안.

특히 주요 변경 후에 사이트를 정기적으로 감사하세요.

FAQ

Core Web Vitals은 무엇이며 왜 중요한가요?

Core Web Vitals은 Google이 사용자 경험을 측정하는 데 사용하는 세 가지 지표(LCP, FID, CLS)입니다. SEO 순위에 영향을 미치고 실제 사용자 만족도를 반영하기 때문에 중요합니다.

Core Web Vitals을 얼마나 자주 측정해야 하나요?

실제 사용자 모니터링을 통해 지속적으로, 그리고 중요한 코드나 콘텐츠 변경 후에 측정하세요. 실험실 테스트는 개발 중과 릴리스 전에 실행해야 합니다.

개발자 없이 Core Web Vitals을 개선할 수 있나요?

이미지 압축이나 이미지 치수 설정과 같은 일부 수정은 콘텐츠 편집자가 할 수 있습니다. 그러나 더 깊은 최적화는 종종 개발자의 참여가 필요합니다.

더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 품질 손실 없이 파일 크기를 줄이려면 무료 이미지 압축기를 사용해 보세요.