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

최신 웹 앱을 구축했지만 사용자들이 느리다고 불평합니다. 검색 순위가 떨어집니다. 코드를 확인해도 명백한 문제는 없습니다. 문제는 구글의 사용자 경험 지표인 Core Web Vitals(CWV)일 수 있습니다. 이 가이드에서는 이를 측정하고 실질적으로 개선하는 방법을 보여줍니다.

Core Web Vitals란?

Core Web Vitals는 실제 사용자 경험을 정량화하는 세 가지 지표입니다:

• Largest Contentful Paint (LCP): 주요 콘텐츠가 로드될 때까지의 시간. 목표 ≤2.5초.
• First Input Delay (FID): 첫 사용자 상호작용부터 응답까지의 시간. 목표 ≤100ms.
• Cumulative Layout Shift (CLS): 시각적 안정성—요소가 예기치 않게 얼마나 이동하는지. 목표 ≤0.1.

이 지표들은 구글의 페이지 경험 신호의 일부이며 SEO에 직접적인 영향을 미칩니다. 하지만 더 중요하게는 실제 사용자의 불만을 반영합니다.

Core Web Vitals 측정 방법

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

실험실 도구

• Lighthouse (Chrome DevTools 또는 온라인) – 점수와 개선 기회를 포함한 빠른 감사.
• WebPageTest – 고급 워터폴 분석 및 필름스트립.
• Chrome DevTools 성능 패널 – 런타임 심층 분석.

필드 도구

• Chrome 사용자 경험 보고서 (CrUX) – 실제 사용자 지표의 공개 데이터 세트.
• PageSpeed Insights – 실험실 및 필드 데이터를 결합.
• Search Console Core Web Vitals 보고서 – 상태별로 URL을 그룹화.
• web-vitals JavaScript 라이브러리 – 자체 필드 데이터 수집.

PageSpeed Insights로 시작하여 기준선을 확보하세요. 그런 다음 web-vitals 라이브러리를 사용하여 사이트를 계측하고 지표를 분석 도구로 전송하세요.

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

LCP 개선

LCP는 종종 가장 큰 문제입니다. 중요한 경로를 최적화하세요:

1. LCP 요소 식별 – 보통 히어로 이미지, 제목 또는 비디오 포스터.
2. 이미지 최적화 – 압축하고 최신 형식(WebP/AVIF)을 사용하며 명시적 크기를 설정하세요.
3. LCP 리소스 사전 로드 – 이미지나 글꼴에 <link rel="preload">를 사용하세요.
4. 서버 응답 시간 단축 – 캐싱, CDN 및 효율적인 백엔드를 사용하세요.
5. 렌더링 차단 리소스 제거 – 중요하지 않은 CSS/JS를 지연시키세요.

이미지의 경우 Image Compressor와 같은 도구를 사용하면 품질 손실 없이 파일 크기를 줄일 수 있습니다.

FID 개선

FID는 입력 응답성을 측정합니다. 긴 JavaScript 작업은 메인 스레드를 차단합니다.

• 긴 작업 분할 – setTimeout 또는 requestIdleCallback을 사용하여 양보하세요.
• 코드 분할 – 필요한 JS만 로드하세요.
• 이벤트 핸들러 최적화 – 비용이 큰 작업을 디바운스하거나 스로틀하세요.
• 웹 워커 사용 – CPU 집약적 작업에 사용하세요.

// 예: 메인 스레드에 양보
function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processItems(items) {
  for (const item of items) {
    // 항목 처리
    await yieldToMain();
  }
}

CLS 개선

레이아웃 이동은 사용자를 짜증나게 합니다. 공간을 예약하여 방지하세요:

• 이미지와 비디오에 width/height 설정 – 또는 CSS aspect-ratio를 사용하세요.
• 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요 – 사용자 상호작용에 대한 응답이 아닌 한.
• 변환 애니메이션 사용 – 레이아웃을 트리거하는 속성 대신.
• 글꼴 사전 로드 및 font-display: swap을 사용하여 보이지 않는 텍스트를 피하세요.

지표 및 도구 비교

실용적인 워크플로

1. 측정 – 주요 페이지에서 PageSpeed Insights를 실행하세요. 필드 데이터(가능한 경우)와 실험실 점수를 기록하세요.
2. 우선순위 지정 – 나쁘고 가장 많은 사용자에게 영향을 미치는 지표에 집중하세요.
3. 수정 – 위의 기법을 적용하되 가장 큰 성과(예: 이미지 최적화)부터 시작하세요.
4. 검증 – 실험실 테스트를 다시 실행하고 web-vitals를 통해 필드 데이터를 모니터링하세요.
5. 반복 – 성능은 지속적입니다. 예산을 설정하고 회귀를 모니터링하세요.

기억하세요: 필드 데이터가 진실입니다. 실험실 도구는 디버깅에 도움이 되지만 실제 사용자 조건을 반영하지 않을 수 있습니다.

FAQ

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

web-vitals 라이브러리를 사용하여 프로덕션에서 지속적으로 모니터링하세요. 주요 릴리스 전과 주요 페이지에 대해 주기적으로(예: 월별) 실험실 감사를 실행하세요.

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

예, 페이지 경험은 순위 신호이지만 콘텐츠 관련성이 여전히 우선입니다. 좋은 CWV는 사용자 경험을 개선하여 간접적으로 SEO에 도움이 됩니다.

실험실 데이터와 필드 데이터의 차이점은 무엇인가요?

실험실 데이터는 시뮬레이션된 조건의 통제된 환경에서 수집되고, 필드 데이터는 다양한 기기와 네트워크의 실제 사용자로부터 수집됩니다. 둘 다 사용하세요: 실험실은 디버깅용, 필드는 진실용.

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