Core Web Vitals: 측정 및 개선 방법

Core Web Vitals이 중요한 이유

사이트가 느리다는 보고를 본 적이 있지만 어디서부터 시작해야 할지 모르겠다면, Core Web Vitals은 Google이 실제 사용자 경험을 측정하는 지표입니다: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS). 이 지표들은 검색 순위에 영향을 미치며, 더 중요하게는 사용자가 사이트를 어떻게 인식하는지에 영향을 줍니다. 느린 LCP는 방문자를 불편하게 하고, 높은 INP는 페이지가 반응하지 않는 것처럼 느끼게 하며, 나쁜 CLS는 실수로 클릭하게 만듭니다. 이 가이드에서는 이러한 지표를 측정하고 실용적인 단계로 개선하는 방법을 보여줍니다.

세 가지 Core Web Vitals 이해하기

최적화하기 전에 각 지표가 무엇을 측정하는지와 임계값을 알아야 합니다.

이 임계값은 실험실 테스트가 아닌 필드 데이터(실제 사용자)를 기반으로 합니다. 페이지 로드의 최소 75%에 대해 "좋음" 범위를 목표로 하세요.

Core Web Vitals 측정 방법

실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 데이터는 디버깅에 도움이 되고, 필드 데이터는 실제 사용자 경험을 반영합니다.

실험실 도구

• Chrome DevTools의 Lighthouse: 성능 점수와 구체적인 개선 기회를 감사합니다.
• WebPageTest: 필름스트립과 워터폴 차트를 포함한 고급 테스트.
• Chrome UX Report (CrUX): PageSpeed Insights 또는 CrUX API를 통해 액세스할 수 있는 실제 사용자 필드 데이터.

필드 도구

• PageSpeed Insights: URL에 대한 실험실 데이터와 필드 데이터를 모두 보여줍니다.
• Google Search Console: Core Web Vitals 보고서는 상태별로 URL을 그룹화합니다.
• web-vitals JavaScript 라이브러리: 자체 분석에서 실제 사용자 지표를 수집합니다.

사이트를 계측하려면 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);

이렇게 하면 개선 사항을 추적할 수 있는 지속적인 필드 데이터 스트림을 얻을 수 있습니다.

Largest Contentful Paint (LCP) 개선

LCP는 종종 가장 큰 과제입니다. 가장 큰 요소는 일반적으로 히어로 이미지나 큰 텍스트 블록입니다. 로딩 경로를 최적화하세요.

1. Lighthouse 또는 DevTools 성능 패널을 사용하여 LCP 요소를 식별합니다.
2. 로딩 우선순위 지정: 이미지에 fetchpriority="high"를 사용하거나 <link rel="preload">로 미리 로드합니다.
3. 이미지 최적화: 압축하고, 최신 형식(WebP/AVIF)을 사용하며, srcset으로 반응형 크기를 제공합니다.
4. 서버 응답 시간 단축: 캐싱, CDN을 사용하고 백엔드 쿼리를 최적화합니다.
5. 렌더링 차단 리소스 제거: 중요한 CSS를 인라인하고, 중요하지 않은 JS를 지연시킵니다.

예: 히어로 이미지를 미리 로드하고 가져오기 우선순위를 설정합니다:

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">

레이아웃 이동을 방지하려면 항상 width와 height를 설정하세요.

Interaction to Next Paint (INP) 개선

INP는 반응성을 측정합니다. 긴 작업은 메인 스레드를 차단하여 시각적 피드백을 지연시킵니다. INP를 개선하려면:

• 긴 작업 분할: setTimeout 또는 scheduler.yield를 사용하여 브라우저에 양보합니다.
• 이벤트 핸들러 최적화: 입력을 디바운스하고, 무거운 동기 작업을 피합니다.
• JavaScript 줄이기: 코드 분할, 트리 셰이킹, 중요하지 않은 스크립트 지연.
• 웹 워커 사용: CPU 집약적인 작업에 사용합니다.
• 대규모 DOM 업데이트 피하기: DOM 변경을 일괄 처리하고 requestAnimationFrame을 사용합니다.

예: 긴 루프 중에 메인 스레드에 양보합니다:

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

이렇게 하면 무거운 처리 중에도 페이지가 반응성을 유지합니다.

Cumulative Layout Shift (CLS) 개선

CLS는 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인: 크기가 지정되지 않은 이미지, 광고, 임베드, 웹 폰트.

• 이미지와 비디오에 항상 width와 height 포함.
• 동적 콘텐츠(광고, 임베드)를 위한 공간 확보: CSS min-height 또는 aspect-ratio 박스를 사용합니다.
• font-display: swap 사용 및 폰트 미리 로드로 보이지 않는 텍스트와 레이아웃 이동을 방지합니다.
• 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 사용자 상호작용에 대한 응답이 아닌 한.

예: aspect-ratio를 사용하여 공간을 확보합니다:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

이렇게 하면 비디오가 로드될 때 이동을 방지합니다.

모니터링 및 반복

성능은 일회성 수정이 아닙니다. 실제 사용자 지표로 지속적인 모니터링을 설정하세요. 대시보드를 사용하여 시간 경과에 따른 LCP, INP, CLS를 추적하세요. 각 변경 후 실험실 도구로 확인하고 며칠 후 필드 데이터를 확인하세요. 가장 많은 사용자에게 영향을 미치는 수정 사항의 우선순위를 정하세요.

FAQ

Core Web Vitals의 현재 임계값은 무엇인가요?

LCP: 좋음 ≤2.5초, 개선 필요 2.5–4.0초, 나쁨 >4.0초. INP: 좋음 ≤200ms, 개선 필요 200–500ms, 나쁨 >500ms. CLS: 좋음 ≤0.1, 개선 필요 0.1–0.25, 나쁨 >0.25.

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

필드 데이터를 지속적으로 모니터링하고 중요한 변경 후마다 실험실 테스트를 실행하세요. Search Console에서 주간 트렌드를 확인하세요.

사이트를 재구축하지 않고 Core Web Vitals을 개선할 수 있나요?

예. 이미지 최적화, 미리 로드, CSS 조정 등 많은 개선 사항을 전체 재구축 없이 점진적으로 적용할 수 있습니다.

LCP를 개선하기 위해 이미지를 빠르게 압축해야 하나요? 품질 손실 없이 파일 크기를 줄이려면 무료 이미지 압축기를 사용해 보세요.