Core Web Vitals: 웹 성능 향상을 위한 측정 및 개선

Web2026-10-08TryQuickToolBox

웹사이트가 로드되지만 사용자는 여전히 이탈합니다. 느린 상호작용은 방문자를 좌절시키고 검색 엔진도 이를 감지합니다. Core Web Vitals는 Google의 실제 사용자 경험 측정 지표로, LCP(Largest Contentful Paint), INP(Interaction to Next Paint), CLS(Cumulative Layout Shift)가 있습니다. 이 가이드에서는 이를 정확히 측정하고 실용적인 코드 수준의 기술로 개선하는 방법을 보여드립니다.

Core Web Vitals란 무엇인가요?

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

LCP는 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(이미지, 텍스트 블록, 비디오)가 보이는 시간을 표시합니다. 목표: ≤ 2.5초.
INP는 상호작용성을 측정합니다. 모든 상호작용(클릭, 탭, 키 누름)의 지연 시간을 추적하고 가장 나쁜 것을 보고합니다. 목표: ≤ 200밀리초.
CLS는 시각적 안정성을 측정합니다. 로딩 중 예상치 못한 레이아웃 이동에 점수를 매깁니다. 목표: ≤ 0.1.

이 지표는 Google의 페이지 경험 신호의 일부이지만, 더 중요하게는 실제 사용자의 불편을 반영합니다. 이를 개선하면 SEO와 전환율 모두에 도움이 됩니다.

Core Web Vitals 측정 방법

실험실 데이터와 필드 데이터가 모두 필요합니다. 실험실 도구는 조건을 시뮬레이션하고, 필드 데이터는 실제 사용자로부터 수집됩니다.

실험실 도구

Lighthouse (Chrome DevTools 또는 CI에서)는 개선 기회와 함께 스냅샷을 제공합니다.
PageSpeed Insights는 Chrome 사용자 경험 보고서(CrUX)의 실험실 및 필드 데이터를 결합합니다.
WebPageTest는 고급 스크립팅과 필름스트립 뷰를 제공합니다.

필드 도구

Chrome UX Report (CrUX)는 귀하의 오리진에 대한 실제 사용자 데이터를 집계하여 보여줍니다.
web-vitals 라이브러리를 사용하면 실제 사용자로부터 지표를 수집하여 분석 도구로 보낼 수 있습니다.
Search Console은 사이트의 Core Web Vitals 상태를 보고합니다.

주요 페이지에 대해 PageSpeed Insights를 확인하는 것으로 시작하세요. 그런 다음 web-vitals 라이브러리로 실제 사용자 모니터링을 설정하여 시간 경과에 따른 성능을 추적하세요.

LCP 개선

LCP는 종종 수정해야 할 가장 영향력 있는 지표입니다. 가장 큰 요소는 일반적으로 히어로 이미지나 큰 텍스트 블록입니다.

1. 중요 경로 최적화

캐싱, CDN, 효율적인 백엔드 코드로 서버 응답 시간(TTFB)을 줄입니다.
렌더링 차단 리소스를 제거합니다: 중요 CSS를 인라인하고, 비중요 CSS와 JavaScript를 지연시킵니다.
LCP 이미지를 미리 로드합니다: <link rel="preload" as="image" href="#">.

2. 이미지 최적화

WebP 또는 AVIF와 같은 최신 형식을 사용합니다.
srcset과 sizes로 반응형 이미지를 제공합니다.
눈에 띄는 품질 손실 없이 이미지를 압축합니다. 빠른 압축을 위해 Image Compressor를 사용해 보세요.

3. 서버 응답 개선

CDN을 사용하여 정적 자산을 전 세계적으로 캐시합니다.
Brotli 또는 gzip 압축을 활성화합니다.
데이터베이스 쿼리를 최적화하고 서버 측 캐싱을 사용합니다.

예: LCP 이미지에 대한 미리 로드 및 fetchpriority:

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

INP 개선

INP는 페이지가 사용자 입력에 얼마나 빠르게 반응하는지 측정합니다. 높은 INP는 느린 상호작용을 의미합니다.

1. 긴 작업 분할

setTimeout, requestIdleCallback 또는 scheduler.yield를 사용하여 메인 스레드에 양보합니다.
장시간 실행되는 JavaScript 함수를 피하고 더 작은 청크로 나눕니다.

2. 이벤트 핸들러 최적화

빈번한 이벤트(스크롤, 리사이즈, 입력)를 디바운스하거나 스로틀합니다.
터치 및 휠 이벤트에 수동 이벤트 리스너를 사용합니다.
핸들러 내부의 DOM 업데이트를 최소화합니다.

3. JavaScript 실행 감소

비중요 JavaScript를 코드 분할하고 지연 로드합니다.
사용하지 않는 종속성과 폴리필을 제거합니다.
무거운 계산에는 웹 워커를 사용합니다.

예: 긴 작업에서 메인 스레드에 양보:

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

CLS 개선

CLS는 예상치 못한 레이아웃 이동을 측정합니다. 일반적인 원인: 크기가 지정되지 않은 이미지, 광고, 임베드, 동적으로 삽입된 콘텐츠.

1. 항상 크기 설정

이미지와 비디오에 width 및 height 속성을 포함합니다.
반응형 컨테이너에는 CSS aspect-ratio를 사용합니다.

2. 동적 콘텐츠를 위한 공간 확보

광고와 임베드에 플레이스홀더나 스켈레톤 화면을 사용합니다.
사용자 상호작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 콘텐츠를 삽입하지 않습니다.

3. 글꼴 로딩 최적화

보이지 않는 텍스트를 피하기 위해 font-display: swap을 사용하지만 잠재적인 레이아웃 이동에 유의합니다.
주요 글꼴을 미리 로드하여 교체 지연을 줄입니다.

예: aspect-ratio로 공간 확보:

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

도구 및 워크플로

성능 검사를 개발 워크플로에 통합하세요:

CI(예: GitHub Actions)에서 Lighthouse를 실행하여 회귀를 포착합니다.
web-vitals 라이브러리를 사용하여 필드 데이터를 분석 도구로 보냅니다.
CrUX와 Search Console을 모니터링하여 실제 사용자 트렌드를 확인합니다.
실제 기기, 특히 중급 모바일 폰에서 테스트합니다.

기억하세요: 성능은 기능입니다. 다른 품질 지표처럼 취급하세요.

FAQ

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

LCP: 좋음 ≤ 2.5초, 개선 필요 ≤ 4.0초. INP: 좋음 ≤ 200ms, 개선 필요 ≤ 500ms. CLS: 좋음 ≤ 0.1, 개선 필요 ≤ 0.25. 이 임계값은 실제 사용자 데이터를 기반으로 합니다.

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

CrUX와 자체 RUM과 같은 도구를 통해 필드 데이터를 지속적으로 모니터링하세요. 중요한 코드 변경 시마다 실험실 테스트를 실행하고 주요 페이지에 대해서는 최소 월 1회 실행하세요.

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

이미지 압축 및 캐싱과 같은 일부 수정은 플러그인이나 CDN 설정을 통해 수행할 수 있습니다. 그러나 더 깊은 최적화(코드 분할, 중요 CSS)는 일반적으로 개발자의 참여가 필요합니다.

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