TryQuickToolBox

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

Web2026-11-05TryQuickToolBox

빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평할 수 있습니다. 또는 Google 업데이트 이후 SEO 순위가 떨어졌을 수도 있습니다. Core Web Vitals(CWV)가 원인일 가능성이 높습니다. 이 지표는 실제 사용자 경험을 측정하며 검색 순위와 전환율에 직접적인 영향을 미칩니다. 이 가이드에서는 CWV가 무엇인지, 정확하게 측정하는 방법, 그리고 각 지표를 개선하는 실용적인 단계를 배우게 됩니다.

Core Web Vitals란?

Core Web Vitals는 Google이 사용자 경험을 정량화하기 위해 사용하는 세 가지 지표 세트입니다:

이 임계값은 모바일과 데스크톱으로 구분된 페이지 로드의 75번째 백분위수를 기반으로 합니다. 따라서 사용자의 75%가 좋은 값을 경험하도록 해야 합니다.

Core Web Vitals 측정 방법

CWV를 측정하는 두 가지 방법이 있습니다: 랩(합성 테스트)과 필드(실제 사용자 모니터링). 둘 다 가치가 있지만, Google이 순위에 사용하는 것은 필드 데이터입니다.

필드 데이터: 실제 사용자 모니터링 (RUM)

필드 데이터는 실제 사용자로부터 나옵니다. 가장 좋은 소스는 Chrome User Experience Report(CrUX)이며, 이는 Google Search Console의 Core Web Vitals 보고서를 구동합니다. 또한 web-vitals 라이브러리를 사용하여 자체 RUM 데이터를 수집하고 분석 엔드포인트로 보낼 수 있습니다.

사이트의 CrUX 데이터를 보려면 PageSpeed Insights 또는 CrUX API를 사용하세요. 이들은 오리진에 대한 LCP, INP, CLS의 분포를 보여줍니다.

랩 데이터: 합성 테스트

랩 도구는 통제된 환경에서 페이지 로드를 시뮬레이션합니다. 디버깅 및 CI/CD 통합에 유용합니다. 인기 있는 옵션:

기억하세요: 랩 데이터는 실제 세계의 변동성을 포함하지 않으므로 진단용으로 사용하고 순위 예측 도구로 사용하지 마세요.

Largest Contentful Paint (LCP) 개선

LCP는 일반적으로 수정해야 할 가장 영향력 있는 지표입니다. 가장 큰 요소는 종종 히어로 이미지, 제목 또는 비디오 포스터입니다. LCP를 개선하려면:

  1. 이미지 최적화: 이미지를 압축하고, WebP 또는 AVIF와 같은 최신 형식을 사용하며, srcset으로 반응형 크기를 제공하세요. 이미지 압축기와 같은 도구는 품질 손실 없이 파일 크기를 줄이는 데 도움이 됩니다.
  2. LCP 리소스 사전 로드: 히어로 이미지나 글꼴에 대해 <link rel="preload">를 추가하여 더 일찍 로드를 시작하세요.
  3. 렌더 차단 리소스 제거: 중요 CSS를 인라인화하고, 비중요 CSS를 지연시키며, JavaScript를 비동기적으로 로드하세요.
  4. CDN 사용: 콘텐츠 전송 네트워크에서 자산을 제공하여 지연 시간을 줄이세요.
  5. 적극적 캐싱: Cache-Control 헤더로 정적 자산에 긴 캐시 수명을 설정하세요.

LCP 이미지 사전 로드 예시:

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

Interaction to Next Paint (INP) 개선

INP는 페이지가 사용자 입력에 얼마나 빠르게 응답하는지 측정합니다. 높은 INP는 종종 메인 스레드를 차단하는 긴 JavaScript 작업에서 발생합니다. INP를 개선하려면:

web-vitals 라이브러리로 필드에서 INP를 측정할 수 있습니다:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // 분석 엔드포인트로 전송
});

Content Layout Shift (CLS) 개선

CLS는 로드 중 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인: 크기 없는 이미지, 광고, 임베드, FOIT/FOUT을 유발하는 웹 글꼴. CLS를 개선하려면:

CSS aspect-ratio로 공간을 예약하는 예시:

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

지속적인 모니터링을 위한 도구 및 워크플로

CWV 개선은 일회성 작업이 아닙니다. 지속적인 모니터링을 설정하세요:

빠른 확인을 위해 HTML to Image 도구를 사용하여 다양한 단계에서 페이지의 시각적 스냅샷을 캡처하면 레이아웃 이동을 수동으로 발견하는 데 도움이 됩니다.

FAQ

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

좋음: LCP ≤ 2.5초, INP ≤ 200ms, CLS ≤ 0.1. 개선 필요: LCP ≤ 4초, INP ≤ 500ms, CLS ≤ 0.25. 나쁨: 해당 값 초과.

CrUX 데이터는 얼마나 자주 업데이트되나요?

CrUX 데이터는 매일 업데이트되지만 28일 롤링 윈도우로 인해 변경 사항이 반영되기까지 시간이 걸립니다. 더 빠른 피드백을 원하면 자체 RUM을 사용하세요.

디자인을 변경하지 않고 Core Web Vitals를 개선할 수 있나요?

예. 많은 개선은 기술적입니다: 이미지 압축, 사전 로드, 스크립트 지연, 공간 예약. 이러한 것들은 종종 시각적 영향을 미치지 않습니다.

더 나은 LCP를 위해 이미지를 최적화할 준비가 되셨나요? 무료 이미지 압축기를 사용하여 품질을 유지하면서 파일 크기를 줄이세요.