TryQuickToolBox

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

Web2026-10-13TryQuickToolBox

사용자는 인내심이 없습니다. 사이트가 몇 초 이상 로드되면 떠나버립니다. 검색 엔진도 이를 인지합니다: Core Web Vitals는 순위 신호입니다. 하지만 개선하는 것은 메트릭과 도구의 미로처럼 느껴집니다. 이 가이드는 잡음을 제거합니다. 각 메트릭의 의미, 정확한 측정 방법, 그리고 개선을 위한 구체적인 단계를 배우게 됩니다.

Core Web Vitals란 무엇인가?

Core Web Vitals는 실제 사용자 경험을 수치화하는 세 가지 메트릭입니다:

이 메트릭은 실제 사용자 세션(필드 데이터)과 합성 테스트(랩 데이터)에서 측정됩니다. 순위에 중요한 것은 필드 데이터입니다.

Core Web Vitals 측정 방법

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

랩 도구

필드 도구

필드 데이터를 수집하려면 사이트에 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);

이렇게 하면 실제 사용자 메트릭의 지속적인 스트림을 얻을 수 있습니다.

LCP 개선

LCP는 일반적으로 가장 큰 이미지, 비디오 또는 텍스트 블록입니다. 개선하려면 크리티컬 경로에 집중하세요.

  1. 이미지 최적화: 이미지를 압축하고 WebP 또는 AVIF와 같은 최신 형식을 사용하며 명시적인 너비와 높이를 설정하세요. Image Compressor와 같은 도구는 눈에 띄는 품질 손실 없이 파일 크기를 줄이는 데 도움이 됩니다.
  2. LCP 리소스 사전 로드: 히어로 이미지나 폰트에 <link rel="preload">를 추가하세요.
  3. 서버 응답 시간 단축: CDN을 사용하고 캐싱을 활성화하며 백엔드 쿼리를 최적화하세요.
  4. 렌더링 차단 리소스 제거: 크리티컬 CSS를 인라인하고 비크리티컬 JavaScript를 지연시키세요.
  5. 반응형 이미지 사용: srcset으로 적절한 크기의 이미지를 제공하세요.

LCP 이미지 사전 로드 예시:

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

INP 개선

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

메인 스레드에 양보하는 예시:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

CLS 개선

CLS는 요소가 예기치 않게 이동할 때 발생합니다. 일반적인 원인: 크기가 지정되지 않은 이미지, 광고, 임베드, 동적으로 삽입된 콘텐츠.

이미지 공간 확보 예시:

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

도구 및 워크플로

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

메트릭 및 목표 비교

메트릭측정 대상좋은 목표
LCP로딩 성능< 2.5 s
INP응답성< 200 ms
CLS시각적 안정성< 0.1

FAQ

Core Web Vitals란 무엇인가?

Core Web Vitals는 로딩, 상호작용성, 시각적 안정성을 측정하는 세 가지 메트릭—LCP, INP, CLS—입니다. Google은 이를 순위 신호로 사용합니다.

Core Web Vitals는 어떻게 측정하나요?

디버깅에는 Lighthouse와 같은 랩 도구를, 실제 사용자 데이터에는 web-vitals 라이브러리나 CrUX와 같은 필드 도구를 사용하세요. 둘 다 중요합니다.

좋은 LCP 점수는 무엇인가요?

좋은 LCP는 2.5초 미만입니다. 4초 이상은 나쁩니다. 이미지를 최적화하고, 크리티컬 리소스를 사전 로드하며, 서버 응답 시간을 줄이세요.

사이트 속도를 높일 준비가 되셨나요? 무료 Image Compressor로 이미지를 압축하여 LCP를 즉시 개선하세요.