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

Web2026-10-24TryQuickToolBox

사용자는 빠르고 부드러운 경험을 기대합니다. 사이트가 느리면 사용자는 떠나고 검색 엔진도 이를 인지합니다. Core Web Vitals은 실제 사용자 경험을 수치화하는 지표로, 로딩 속도, 상호작용성, 시각적 안정성을 측정합니다. 이 가이드에서는 이를 측정하고 실질적인 개선을 하는 방법을 보여줍니다.

Core Web Vitals이란?

Core Web Vitals은 Google이 사용자 경험의 핵심 측면을 포착하기 위해 정의한 세 가지 지표 세트입니다:

Largest Contentful Paint (LCP): 로딩 성능을 측정합니다. 가장 큰 콘텐츠 요소(종종 히어로 이미지나 제목)가 보이는 시간을 표시합니다. LCP는 2.5초 미만을 목표로 하세요.
Interaction to Next Paint (INP): 반응성을 측정합니다. 사용자 상호작용(클릭, 탭, 키 입력)부터 다음 시각적 업데이트까지의 시간을 기록합니다. INP는 200밀리초 미만을 목표로 하세요.
Cumulative Layout Shift (CLS): 시각적 안정성을 측정합니다. 로딩 중 예상치 못한 레이아웃 이동을 수치화합니다. CLS는 0.1 미만을 목표로 하세요.

이 임계값은 실제 사용자의 필드 데이터(75번째 백분위수)를 기반으로 합니다. 랩 데이터는 문제 진단에 도움이 되지만, 필드 데이터는 실제 경험을 반영합니다.

Core Web Vitals 측정 방법

필드 데이터와 랩 데이터가 모두 필요합니다. 필드 데이터는 실제 사용자 성능을 보여주고, 랩 데이터는 디버깅 및 변경 사항 테스트를 가능하게 합니다.

필드 데이터 도구

Chrome UX Report (CrUX): 수백만 사이트의 실제 사용자 데이터를 집계합니다. PageSpeed Insights, Search Console 또는 CrUX API를 통해 액세스할 수 있습니다.
web-vitals JavaScript 라이브러리: 지표를 분석 엔드포인트로 전송하여 자체 필드 데이터를 수집합니다.

랩 데이터 도구

Lighthouse: Chrome DevTools에 내장되어 있으며 감사를 실행하고 개선 기회를 제공합니다.
WebPageTest: 네트워크 스로틀링 및 필름스트립을 사용한 고급 테스트.
Chrome DevTools Performance 패널: 런타임 성능을 심층 분석합니다.

PageSpeed Insights로 시작하세요: URL에 대한 필드 및 랩 데이터를 모두 보여줍니다. 그런 다음 로컬에서 Lighthouse를 사용하여 반복하세요.

LCP 개선

LCP는 종종 수정해야 할 가장 영향력 있는 지표입니다. 가장 큰 요소는 보통 이미지나 텍스트 블록입니다. 다음 영역을 최적화하세요:

LCP 이미지 최적화: 압축하고, WebP 또는 AVIF와 같은 최신 형식을 제공하며, 명시적 크기를 설정합니다.
LCP 리소스 사전 로드: 스크롤 없이 볼 수 있는 부분에 사용되는 이미지나 글꼴에 <link rel="preload">를 사용합니다.
렌더링 차단 리소스 제거: 중요 CSS를 인라인으로 포함하고, 비중요 CSS 및 JavaScript를 지연시킵니다.
CDN 사용: 사용자와 가까운 위치에서 자산을 제공합니다.
서버 응답 시간 단축: 백엔드를 최적화하고, 캐싱을 사용하며, 엣지 렌더링을 고려합니다.

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

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

INP 개선

INP는 반응성을 측정합니다. 긴 작업은 메인 스레드를 차단하고 시각적 피드백을 지연시킵니다. 일반적인 수정 사항:

긴 작업 분할: setTimeout 또는 scheduler.yield()를 사용하여 메인 스레드에 양보합니다.
이벤트 핸들러 최적화: 빠른 이벤트를 디바운스 또는 스로틀하고, 무거운 동기 작업을 피합니다.
JavaScript 줄이기: 코드 분할, 트리 셰이킹, 비중요 스크립트 지연.
웹 워커 사용: CPU 집약적 작업에 사용합니다.
대규모 DOM 업데이트 피하기: DOM 변경을 일괄 처리하고 requestAnimationFrame을 사용합니다.

web-vitals 라이브러리로 INP를 측정하고 Performance 패널에서 느린 상호작용을 식별하세요.

CLS 개선

레이아웃 이동은 요소가 예기치 않게 위치를 변경할 때 발생합니다. 다음을 통해 방지하세요:

이미지 및 비디오에 크기 속성 설정 (width 및 height).
광고 및 임베드에 공간 예약: CSS aspect-ratio 또는 고정 컨테이너 사용.
기존 콘텐츠 위에 콘텐츠 삽입 피하기: 사용자 상호작용에 대한 응답이 아닌 한.
font-display: swap 사용 및 글꼴 사전 로드로 FOIT/FOUT 이동 최소화.
transform으로 애니메이션: 레이아웃을 트리거하는 속성 대신 사용.

빠른 비교: 지표 및 목표

지표	측정 대상	좋은 목표	일반적인 수정
LCP	로딩 성능	≤ 2.5초	이미지 최적화, 사전 로드, CDN
INP	반응성	≤ 200ms	긴 작업 분할, JS 줄이기
CLS	시각적 안정성	≤ 0.1	크기 설정, 공간 예약

모니터링 및 반복

성능은 일회성 수정이 아닙니다. 지속적인 모니터링을 설정하세요:

web-vitals 라이브러리를 사용하여 지표를 분석으로 전송합니다.
Lighthouse CI를 사용하여 CI/CD 파이프라인에서 회귀에 대한 알림을 설정합니다.
Search Console에서 필드 데이터를 정기적으로 검토합니다.

개선 사항은 랩 점수뿐만 아니라 실제 사용자 데이터로 검증해야 함을 기억하세요.

FAQ

Core Web Vitals이란 무엇이며 왜 중요한가요?

Core Web Vitals은 로딩, 상호작용성, 시각적 안정성을 측정하는 사용자 중심 성능 지표(LCP, INP, CLS)입니다. 사용자 경험과 상관관계가 있으며 Google의 순위 신호로 사용되기 때문에 중요합니다.

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

필드 데이터는 매월 및 주요 릴리스 후에 확인하세요. 개발 중에는 랩 도구를 사용하여 회귀를 조기에 포착하세요. 실제 사용자 지표를 통한 지속적인 모니터링이 이상적입니다.

사이트를 재구축하지 않고 Core Web Vitals을 개선할 수 있나요?

예. 이미지 최적화, 주요 리소스 사전 로드, 스크립트 지연, 요소 크기 설정과 같은 많은 개선 사항은 전체 재설계 없이 점진적으로 적용할 수 있습니다.

더 나은 LCP를 위해 이미지를 빠르게 압축해야 하나요? 품질 손실 없이 파일 크기를 줄이려면 무료 이미지 압축기를 사용해 보세요.