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

Web2026-11-03TryQuickToolBox

빠른 웹사이트를 구축했는데도 사용자들이 여전히 느리다고 불평합니다. 또는 Google Search Console에서 페이지의 Core Web Vitals이 "poor"로 표시될 수 있습니다. 여러분만 그런 것이 아닙니다. 많은 개발자들이 성능 지표를 실제 개선으로 연결하는 데 어려움을 겪습니다. Core Web Vitals은 Google의 사용자 중심 지표로, 로딩, 상호작용성, 시각적 안정성을 수치화합니다. 이를 무시하면 검색 순위와 사용자 만족도에 악영향을 줄 수 있습니다. 이 가이드는 각 지표를 측정하고 개선하는 실행 가능한 단계를 안내합니다.

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의 페이지 경험 신호의 일부이며 SEO에 직접적인 영향을 미칩니다. 하지만 더 중요한 것은 실제 사용자의 불만—느린 로드, 지연되는 상호작용, 튀는 콘텐츠—을 반영한다는 점입니다.

Core Web Vitals 측정 방법

측정하지 않으면 개선할 수 없습니다. 두 가지 주요 접근 방식이 있습니다: 랩 데이터(합성 테스트)와 필드 데이터(실제 사용자 모니터링).

랩 도구

Lighthouse: Chrome DevTools에 내장되어 있으며, 성능을 감사하고 LCP, FID(TBT로), CLS 점수를 제공합니다. 확장 프로그램이 결과를 왜곡하지 않도록 시크릿 모드에서 실행하세요.
WebPageTest: 상세한 필름스트립과 워터폴 차트를 제공하여 LCP 병목 현상을 진단하는 데 유용합니다.
PageSpeed Insights: 랩 데이터와 필드 데이터를 결합하여 Lighthouse 점수와 Chrome 사용자 경험 보고서(CrUX)의 실제 사용자 지표를 모두 보여줍니다.

필드 도구

Chrome UX Report (CrUX): 수백만 사이트의 실제 사용자 지표 공개 데이터셋입니다. PageSpeed Insights 또는 BigQuery를 통해 액세스할 수 있습니다.
Google Search Console: "Core Web Vitals" 보고서에서 URL을 상태(나쁨, 개선 필요, 좋음)별로 그룹화합니다.
Web Vitals JavaScript 라이브러리: 이 스니펫을 사이트에 추가하여 Google Analytics 또는 자체 엔드포인트를 통해 지표를 수집하세요.

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

function sendToAnalytics(metric) {
  // Replace with your analytics endpoint
  console.log(metric.name, metric.value);
}

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

필드 데이터로 문제 페이지를 식별한 다음, 랩 도구로 원인을 파고드세요.

Largest Contentful Paint (LCP) 개선

LCP는 종종 수정하기 가장 어려운 지표입니다. 가장 큰 요소는 보통 히어로 이미지나 큰 텍스트 블록입니다. 최적화 방법은 다음과 같습니다:

이미지 최적화: WebP 또는 AVIF와 같은 최신 형식을 사용하여 이미지를 압축하세요. srcset과 sizes를 사용한 반응형 이미지로 적절한 크기의 이미지를 제공하세요. 스크롤 아래 이미지는 지연 로드하되, LCP 이미지는 절대 지연 로드하지 마세요.
중요 리소스 사전 로드: LCP 이미지나 폰트에 <link rel="preload">를 추가하세요. 예: <link rel="preload" as="image" href="#">.
렌더 차단 리소스 제거: 중요하지 않은 CSS와 JavaScript를 지연시키세요. 중요 CSS는 인라인으로 처리하고 나머지는 비동기로 로드하세요.
CDN 사용: 콘텐츠 전송 네트워크에서 자산을 제공하여 지연 시간을 줄이세요.
서버 응답 시간 단축: 백엔드 쿼리를 최적화하고 캐싱을 사용하며 엣지 렌더링을 고려하세요.

자세한 내용은 web.dev의 LCP 가이드를 확인하세요.

First Input Delay (FID) 개선

FID는 응답성을 측정합니다. FID가 높으면 브라우저의 메인 스레드가 바쁘어 사용자 입력에 빠르게 응답할 수 없음을 의미합니다. FID를 개선하려면:

긴 작업 분할: setTimeout 또는 requestIdleCallback을 사용하여 JavaScript를 작은 청크로 나누세요.
메인 스레드 작업 최소화: 코드 분할, 트리 쉐이킹, 사용하지 않는 폴리필 제거로 JavaScript 실행 시간을 줄이세요.
웹 워커 사용: 무거운 계산에 사용하세요.
큰 JavaScript 번들 피하기: webpack-bundle-analyzer로 감사하고 중요하지 않은 스크립트는 지연 로드를 고려하세요.

참고: FID는 2024년 3월에 Interaction to Next Paint (INP)로 대체됩니다. INP 개선 전략은 유사합니다—메인 스레드 차단을 줄이는 데 집중하세요.

Cumulative Layout Shift (CLS) 개선

CLS는 예기치 않은 레이아웃 이동을 측정합니다. 일반적인 원인으로는 크기 속성이 없는 이미지, 광고, 임베드, 웹 폰트 등이 있습니다. CLS를 수정하려면:

이미지와 비디오에 항상 width와 height 속성 포함: 브라우저가 공간을 예약할 수 있습니다.
광고와 임베드에 공간 예약: CSS aspect-ratio 또는 플레이스홀더 요소를 사용하세요.
사용자 상호작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 콘텐츠 삽입 피하기.
웹 폰트에 font-display: swap 사용: 보이지 않는 텍스트(FOIT)를 방지하지만, 대체 폰트의 메트릭이 다르면 레이아웃 이동이 발생할 수 있으니 주의하세요. size-adjust 또는 font-display: optional 사용을 고려하세요.

Chrome DevTools의 Layout Instability API로 테스트하여 이동을 정확히 파악하세요.

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

성능은 일회성 수정이 아닙니다. 워크플로를 설정하세요:

기준 설정: 주요 페이지에서 Lighthouse를 실행하고 점수를 기록하세요.
필드 데이터 모니터링: web-vitals 라이브러리를 사용하여 분석 플랫폼으로 지표를 전송하세요. 회귀에 대한 알림을 설정하세요.
CI에 통합: Lighthouse CI를 사용하여 성능 예산을 초과하면 빌드를 실패시키세요.
정기 감사: Search Console에서 Core Web Vitals을 월별로 검토하세요.

개선은 단순히 지표 중심이 아니라 사용자 중심이어야 함을 기억하세요. 빠른 사이트는 사용자를 만족시키고 SEO를 향상시킵니다.

FAQ

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

LCP: 좋음 ≤ 2.5초, 개선 필요 ≤ 4초, 나쁨 > 4초. FID: 좋음 ≤ 100ms, 개선 필요 ≤ 300ms, 나쁨 > 300ms. CLS: 좋음 ≤ 0.1, 개선 필요 ≤ 0.25, 나쁨 > 0.25.

Core Web Vitals을 얼마나 자주 확인해야 하나요?

Search Console의 필드 데이터는 매일 업데이트되지만 의미 있는 추세는 몇 주가 걸립니다. 분석을 통해 지속적으로 모니터링하고 월별로 검토하세요. 주요 코드 변경 후에는 랩 테스트를 실행하세요.

Core Web Vitals 개선이 실제로 SEO에 영향을 미치나요?

네, Google은 페이지 경험을 순위 신호로 사용합니다. 콘텐츠가 여전히 가장 중요하지만, 좋은 Core Web Vitals은 특히 경쟁이 치열한 분야에서 우위를 점할 수 있습니다.

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