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

Web2026-10-31TryQuickToolBox

빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평할 수 있습니다. 또는 Google 업데이트 이후 SEO 순위가 떨어졌을 수도 있습니다. 원인은 사용자 경험을 측정하는 Google의 지표인 Core Web Vitals일 수 있습니다. 이 가이드에서는 Core Web Vitals이 무엇인지, 어떻게 측정하는지, 그리고 구체적으로 개선하는 방법을 알아봅니다.

Core Web Vitals이란?

Core Web Vitals은 사용자 경험의 핵심 측면인 로딩, 상호작용, 시각적 안정성을 수치화하는 세 가지 특정 지표입니다. 이는 Google의 페이지 경험 순위 신호의 일부입니다.

Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(이미지, 비디오 또는 텍스트 블록)가 표시되는 시간을 나타냅니다. LCP는 2.5초 미만을 목표로 하세요.
First Input Delay (FID): 상호작용성을 측정합니다. 사용자가 처음 상호작용(예: 링크 클릭)한 시점부터 브라우저가 응답할 때까지의 시간을 기록합니다. FID는 100밀리초 미만을 목표로 하세요.
Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 페이지 로드 중 예기치 않은 레이아웃 이동을 수치화합니다. CLS는 0.1 미만을 목표로 하세요.

Google은 또한 Time to First Byte (TTFB) 및 First Contentful Paint (FCP)와 같은 다른 지표를 진단용으로 사용하지만, LCP, FID, CLS가 핵심 세 가지입니다.

Core Web Vitals 측정 방법

이 지표는 두 가지 방법으로 측정할 수 있습니다: 랩(합성 테스트)과 필드(실제 사용자 모니터링). 둘 다 가치가 있습니다.

랩 측정

Lighthouse(Chrome DevTools에 내장) 및 WebPageTest와 같은 도구는 페이지 로드를 시뮬레이션하고 점수를 제공합니다. 상세한 진단을 제공하므로 디버깅에 유용합니다.

// Chrome DevTools에서 Lighthouse 실행: DevTools 열기 → Lighthouse 탭 → 보고서 생성.
// 또는 CLI 사용:
// npm install -g lighthouse
// lighthouse https://example.com --view

필드 측정

실제 사용자 지표는 실제 방문자로부터 수집됩니다. Chrome User Experience Report (CrUX)는 공개 사이트에 대해 익명화된 데이터를 제공합니다. JavaScript API를 사용하여 자체 필드 데이터를 수집할 수도 있습니다.

// 예: web-vitals 라이브러리를 사용하여 지표 기록
import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

이 지표를 분석 엔드포인트로 전송하여 시간 경과에 따른 성능을 추적하세요.

LCP 개선

LCP는 종종 가장 영향력 있는 지표입니다. 개선하려면 가장 큰 요소(보통 히어로 이미지나 제목)에 집중하세요.

이미지 최적화: 이미지를 압축하고, WebP 또는 AVIF와 같은 최신 형식을 사용하며, 레이아웃 이동을 방지하기 위해 크기를 지정하세요. 이미지 압축기와 같은 도구는 품질 손실 없이 파일 크기를 줄이는 데 도움이 됩니다.
중요 리소스 사전 로드: LCP 이미지나 폰트에 <link rel="preload">를 사용하세요.
서버 응답 시간 단축: CDN을 사용하고, 캐싱을 활성화하며, 백엔드 코드를 최적화하세요. TTFB는 LCP의 구성 요소입니다.
렌더링 차단 리소스 제거: 중요하지 않은 CSS와 JavaScript를 지연시키세요.

예: 히어로 이미지 사전 로드:

<link rel="preload" as="image" href="/hero.webp">

FID 개선

FID는 응답성을 측정합니다. FID가 높으면 사용자가 상호작용하려 할 때 메인 스레드가 바쁘다는 의미입니다.

긴 작업 분할: setTimeout 또는 requestIdleCallback을 사용하여 JavaScript를 작은 청크로 나누세요.
이벤트 핸들러 최적화: 비용이 많이 드는 작업을 디바운스하거나 스로틀하세요.
JavaScript 실행 시간 단축: 사용하지 않는 코드를 제거하고, 코드 분할을 하며, 중요하지 않은 스크립트를 지연시키세요.
웹 워커 사용: 무거운 계산을 워커 스레드로 오프로드하세요.

예: 중요하지 않은 JavaScript 지연:

<script src="#" defer></script>

CLS 개선

CLS는 시각적 안정성에 관한 것입니다. 예기치 않은 이동은 사용자를 짜증나게 하고 잘못된 클릭을 유발합니다.

이미지와 비디오에 항상 width 및 height 속성 포함하세요.
광고 및 임베드 공간 확보: CSS aspect-ratio 또는 고정 크기 컨테이너를 사용하세요.
사용자 상호작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 콘텐츠 삽입을 피하세요.
애니메이션에는 CSS 변환 사용하고 레이아웃을 트리거하는 속성은 사용하지 마세요.

예: 이미지 공간 확보:

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

도구 및 워크플로

랩 도구로 문제를 식별한 다음 필드 데이터로 검증하세요. 간단한 워크플로는 다음과 같습니다:

Chrome DevTools에서 Lighthouse를 실행하여 기준선을 확보하세요.
가장 영향력 있는 문제(보통 LCP)를 수정하세요.
변경 사항을 배포하고 CrUX 또는 자체 RUM을 통해 필드 데이터를 모니터링하세요.
반복하세요: 성능은 지속적인 과정입니다.

빠른 확인을 위해 랩 및 필드 데이터를 결합한 PageSpeed Insights와 같은 온라인 도구를 사용하세요.

FAQ

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

현재 Google은 LCP ≤ 2.5초, FID ≤ 100밀리초, CLS ≤ 0.1을 "좋음"으로 간주합니다. 이러한 임계값은 변경될 수 있으므로 업데이트는 Google 공식 문서를 확인하세요.

Core Web Vitals이 SEO 순위에 직접 영향을 미치나요?

예, Google의 페이지 경험 신호의 일부입니다. 그러나 관련성과 품질 콘텐츠가 더 중요합니다. Core Web Vitals은 다른 신호가 동일할 때 타이브레이커 또는 요소로 작용합니다.

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

주요 변경 후 측정하고 필드 데이터를 지속적으로 모니터링하세요. 랩 테스트는 빠르지만 필드 데이터는 다양한 기기와 네트워크에서 실제 사용자 경험을 반영합니다.

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