Web Vitals

웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 웹페이지 품질 신호에 관한 통합 가이드를 제공하기 위한 Google 이니셔티브입니다. 이 지표는 사용 가능한 다양한 성능 측정 도구를 단순화하고 사이트 소유자가 가장 중요한 측정항목인 코어 웹 바이탈에 집중할 수 있도록 돕는 것을 목표로 합니다.

코어 웹 바이탈

코어 웹 바이탈은 모든 웹페이지에 적용되는 웹 바이탈의 하위 집합으로, 모든 사이트 소유자가 측정해야 하고 모든 Google 도구에 표시됩니다. 각 코어 웹 바이탈은 사용자 환경의 고유한 측면을 나타내며, 현장에서 측정 가능하며, 중요한 사용자 중심 결과의 실제 환경을 반영합니다.

코어 웹 바이탈을 구성하는 측정항목은 시간이 지남에 따라 발전됩니다. 현재 사용자 환경의 세 가지 측면은 로드, 상호작용, 시각적 안정성입니다. 여기에는 다음과 같은 측정항목이 포함됩니다.

최대 콘텐츠 렌더링 시간 기준점 권장사항 최초 입력 반응 시간 기준 권장사항 누적 레이아웃 변경 기준점 권장사항
  • 최대 콘텐츠 렌더링 시간 (LCP): 로드 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.
  • 최초 입력 반응 시간 (FID): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.
  • 누적 레이아웃 변경 (CLS): 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 CLS를 0.1. 이하로 유지해야 합니다.

이러한 각 측정항목에서 대부분의 사용자에게 권장되는 목표에 도달하도록 하려면 모바일 및 데스크톱 기기로 분류된 페이지 로드의 75번째 백분위수를 측정하기에 좋습니다.

코어 웹 바이탈 규정 준수를 평가하는 도구는 페이지가 세 가지 측정항목 각각에 대해 75번째 백분위수의 권장 목표를 충족하는 경우 페이지를 준수하는 것으로 간주해야 합니다.

Lifecycle

코어 웹 바이탈 트랙의 측정항목은 실험적, 대기 중, 안정화의 세 단계로 구성된 수명 주기를 거칩니다.

일련의 세 가지 Vitals로 시각화된 코어 웹 바이탈 측정항목의 3가지 수명 주기 단계 단계는 왼쪽부터 실험용, 대기 중, 안정화 버전으로 구성되어 있습니다.
코어 웹 바이탈 수명 주기의 단계

각 단계는 개발자에게 각 측정항목에 대해 어떻게 생각해야 하는지를 알리기 위해 설계되었습니다.

  • 실험 측정항목은 잠재적 Core Web Vitals로, 테스트 및 커뮤니티 의견에 따라 여전히 중요한 변화가 진행 중일 수 있습니다.
  • 대기 중인 측정항목은 테스트 및 의견 단계를 통과하고 안정화까지 타임라인이 명확하게 정의된 향후 Core Web Vitals입니다.
  • 안정적인 측정항목은 Chrome에서 우수한 사용자 환경을 제공하는 데 필수적인 것으로 간주하는 최신 코어 웹 바이탈 집합입니다.

코어 웹 바이탈의 수명 주기 단계는 다음과 같습니다.

INP 개발에 관한 자세한 내용은 다음 페인트로 상호작용 진행을 참고하세요.

실험적 기능

측정항목이 처음 개발되어 생태계에 진입하면 실험용 측정항목으로 간주됩니다.

실험 단계의 목적은 먼저 해결해야 할 문제를 탐색하고 이전 측정항목이 해결하지 못했을 수 있는 문제를 반복함으로써 측정항목의 적합성을 평가하는 것입니다. 예를 들어 INP는 초기에 최초 입력 반응 시간 (FID)보다 더 포괄적으로 웹 런타임 성능 문제를 해결하기 위한 실험용 측정항목으로 개발되었습니다.

코어 웹 바이탈 수명 주기의 실험 단계는 버그를 식별하고 초기 정의의 변경사항을 탐색하여 측정항목 개발의 유연성을 제공하기 위한 것입니다. 이 단계에서 커뮤니티의 의견이 가장 중요한 시기이기도 합니다

대기 중

Chrome팀에서 실험 측정항목이 충분한 의견을 받고 그 효과를 입증했다고 판단하면 대기 중인 측정항목이 됩니다. 대기 중인 측정항목은 생태계가 적응할 시간을 주기 위해 최소 6개월 동안 이 단계에서 보류됩니다. 더 많은 개발자가 측정항목을 사용하기 시작하면서 커뮤니티 피드백은 여전히 이 단계에서 중요한 부분입니다.

정식

코어 웹 바이탈 후보 측정항목이 확정되면 안정적인 측정항목이 됩니다. 이때 측정항목이 코어 웹 바이탈이 될 수 있습니다.

안정적인 측정항목은 적극적으로 지원되며 버그가 수정되고 정의가 변경될 수 있습니다. 안정화된 코어 웹 바이탈 측정항목은 1년에 두 번 이상 변경되지 않습니다. Core Web Vitals의 모든 변경사항은 측정항목의 공식 문서 및 측정항목의 변경 로그를 통해 명확하게 전달됩니다. Core Web Vitals도 모든 평가에 포함됩니다.

핵심 사항: 안정적인 측정항목이 반드시 영구적인 것은 아닙니다. 안정적인 측정항목은 사용 중지되고 문제 영역을 더 효과적으로 해결하는 다른 측정항목으로 대체할 수 있습니다.

코어 웹 바이탈 측정 및 보고

Google은 코어 웹 바이탈이 모든 웹 환경에 매우 중요하다고 생각합니다. 따라서 널리 사용되는 모든 도구에서 이러한 측정항목을 표시하기 위해 노력하고 있습니다. 다음 섹션에서는 코어 웹 바이탈을 지원하는 도구를 자세히 설명합니다.

코어 웹 바이탈 측정을 위한 필드 도구

Chrome 사용자 환경 보고서는 각 코어 웹 바이탈의 익명처리된 실제 사용자 측정 데이터를 수집합니다. 사이트 소유자는 이 데이터를 사용하여 페이지 애널리틱스를 수동으로 설정하지 않고도 실적을 빠르게 평가할 수 있으며 PageSpeed Insights 및 Search Console의 코어 웹 바이탈 보고서와 같은 도구를 지원합니다.

  LCP FID CLS
Chrome 사용자 환경 보고서
PageSpeed Insights
Search Console (코어 웹 바이탈 보고서)

Chrome 사용자 환경 보고서에서 제공하는 데이터는 사이트 성능을 평가하는 빠른 방법을 제공하지만 회귀를 정확하게 진단하고 모니터링하고 신속하게 대응하는 데 필요한 페이지 조회별 자세한 원격 측정은 제공하지 않습니다. 따라서 사이트에서 자체 실제 사용자 모니터링을 설정하는 것이 좋습니다.

JavaScript에서 코어 웹 바이탈 측정

각 코어 웹 바이탈은 표준 웹 API를 사용하여 자바스크립트로 측정할 수 있습니다.

모든 코어 웹 바이탈을 측정하는 가장 쉬운 방법은 web-vitals JavaScript 라이브러리를 사용하는 것입니다. 이는 프로덕션에 즉시 사용 가능한 소규모 API 래퍼이며, Google 도구에서 보고하는 방식과 정확하게 일치하는 방식으로 각 측정항목을 측정합니다.

web-vitals 라이브러리를 사용하면 단일 함수를 호출하는 것만큼 각 측정항목을 간단하게 측정할 수 있습니다 (전체 사용법API 세부정보는 문서 참조).

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

web-vitals 라이브러리를 사용하여 코어 웹 바이탈 데이터를 측정하고 분석 엔드포인트로 전송하도록 사이트를 구성한 후 다음 단계는 해당 데이터를 집계하고 보고하여 페이지가 최소 75% 의 페이지 방문에 대해 권장 기준을 충족하는지 확인하는 것입니다.

일부 분석 제공업체는 Core Web Vitals 측정항목을 기본적으로 지원하지만, 도구에서 코어 웹 바이탈을 측정할 수 있는 기본 맞춤 측정항목 기능을 포함하지 않는 제공업체도 있습니다.

한 가지 예로 사이트 소유자가 Google 애널리틱스를 사용하여 코어 웹 바이탈을 측정할 수 있는 웹 바이탈 보고서를 들 수 있습니다. 다른 분석 도구를 사용하여 코어 웹 바이탈을 측정하는 방법에 관한 안내는 현장에서 웹 바이탈을 측정하기 위한 권장사항을 참고하세요.

웹 바이탈 Chrome 확장 프로그램을 사용하여 코드를 작성하지 않고도 각 코어 웹 바이탈에 관해 보고할 수도 있습니다. 이 확장 프로그램은 web-vitals 라이브러리를 사용하여 이러한 각 측정항목을 측정하고 사용자가 웹을 탐색할 때 사용자에게 표시합니다.

이 확장 프로그램은 내 사이트, 경쟁업체 사이트, 웹 전반의 실적을 파악하는 데 도움이 될 수 있습니다.

  LCP FID CLS
web-vitals
웹 바이탈 확장 프로그램

기본 웹 API를 사용하여 이러한 측정항목을 직접 측정하려는 개발자는 대신 다음 측정항목 가이드를 사용하여 구현 세부정보를 확인할 수 있습니다.

인기 있는 분석 서비스 또는 자체 자체 분석 도구를 사용하여 이러한 측정항목을 측정하는 방법에 대한 추가 안내는 현장에서 웹 바이탈을 측정하기 위한 권장사항을 참고하세요.

코어 웹 바이탈을 측정하기 위한 실습 도구

코어 웹 바이탈은 모두 무엇보다도 필드 측정항목이지만 대부분 실습에서 측정할 수 있습니다.

실험실 측정은 개발 중에 기능의 성능을 테스트하는 가장 좋은 방법입니다. 또한 성능 회귀가 발생하기 전에 이를 포착하는 가장 좋은 방법이기도 합니다.

다음 도구를 사용하여 실험실 환경에서 코어 웹 바이탈을 측정할 수 있습니다.

  LCP FID CLS
Chrome DevTools (대신 TBT 사용)
Lighthouse (대신 TBT 사용)

사용자 없이 시뮬레이션된 환경에서 페이지를 로드하는 Lighthouse와 같은 도구는 사용자 입력이 없기 때문에 FID를 측정할 수 없습니다. 하지만 총 차단 시간 (TBT) 측정항목은 실험실에서 측정 가능하며 FID를 위한 훌륭한 프록시입니다. 실험실에서 TBT를 개선하는 성능 최적화는 해당 필드의 FID를 개선해야 합니다. 자세한 내용은 점수 개선을 위한 권장사항을 참고하세요.

실험실 측정은 훌륭한 경험을 제공하는 데 필수적이지만 현장 측정을 대체할 수는 없습니다. 사이트의 성능은 사용자의 기기 기능, 네트워크 상태, 기기에서 실행 중인 다른 프로세스, 페이지와 상호작용하는 방식에 따라 크게 달라질 수 있습니다. 실제로 각 코어 웹 바이탈 측정항목의 점수는 사용자 상호작용의 영향을 받을 수 있습니다. 필드 측정만이 전체 그림을 정확하게 포착할 수 있습니다.

점수 향상을 위한 권장사항

다음 가이드에서는 각 코어 웹 바이탈에 맞게 페이지를 최적화하는 방법에 관한 구체적인 권장사항을 제공합니다.

기타 웹 바이탈

코어 웹 바이탈은 훌륭한 사용자 환경을 이해하고 제공하는 데 중요한 측정항목이지만 다른 중요한 측정항목도 있습니다.

이러한 다른 웹 바이탈은 코어 웹 바이탈의 프록시 또는 추가 측정항목 역할을 하는 경우가 많아 더 많은 경험을 캡처하거나 특정 문제를 진단하는 데 도움이 됩니다.

예를 들어 첫 바이트까지의 시간 (TTFB)첫 번째 콘텐츠가 포함된 페인트 (FCP)는 모두 로드 환경의 중요한 측면이며 모두 LCP (느린 서버 응답 시간 또는 렌더링 차단 리소스) 문제를 진단하는 데 유용합니다.

마찬가지로 총 차단 시간 (TBT)과 같은 측정항목은 FID 및 INP에 영향을 미칠 수 있는 잠재적인 상호작용 문제를 포착하고 진단하는 데 중요한 실습 측정항목입니다. 하지만 이는 현장 측정이 불가능하고 사용자 중심 결과를 반영하지 않으므로 코어 웹 바이탈 세트에 포함되지 않습니다.

웹 바이탈 변경사항

웹 바이탈과 코어 웹 바이탈은 개발자가 웹 전반의 환경 품질을 측정하기 위해 현재 사용할 수 있는 최상의 신호를 나타내지만 이러한 신호는 완벽하지 않으며 향후 개선 또는 추가를 기대할 수 있습니다.

코어 웹 바이탈은 모든 웹페이지와 관련이 있으며 관련 Google 도구 전반에서 추천됩니다. 이러한 측정항목의 변경사항은 광범위한 영향을 미치므로 개발자는 Core Web Vitals의 정의 및 기준점은 물론 사전 고지 및 예측 가능한 업데이트 일정을 예상해야 합니다.

다른 웹 바이탈은 컨텍스트 또는 도구별로 다른 경우가 많으며 코어 웹 바이탈보다 실험적일 수 있습니다. 따라서 정의 및 임곗값은 더 자주 변경될 수 있습니다.

모든 웹 바이탈의 경우 변경사항은 이 공개 변경 로그에 문서화됩니다.