웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 웹페이지 품질 신호에 관한 통합 가이드를 제공하기 위한 Google 이니셔티브입니다. 이 지표는 사용 가능한 다양한 성능 측정 도구를 단순화하고 사이트 소유자가 가장 중요한 측정항목인 코어 웹 바이탈에 집중할 수 있도록 돕는 것을 목표로 합니다.
코어 웹 바이탈
코어 웹 바이탈은 모든 웹페이지에 적용되는 웹 바이탈의 하위 집합으로, 모든 사이트 소유자가 측정해야 하고 모든 Google 도구에 표시됩니다. 각 코어 웹 바이탈은 사용자 환경의 고유한 측면을 나타내며, 현장에서 측정 가능하며, 중요한 사용자 중심 결과의 실제 환경을 반영합니다.
코어 웹 바이탈을 구성하는 측정항목은 시간이 지남에 따라 발전됩니다. 현재 사용자 환경의 세 가지 측면은 로드, 상호작용, 시각적 안정성입니다. 여기에는 다음과 같은 측정항목이 포함됩니다.
- 최대 콘텐츠 렌더링 시간 (LCP): 로드 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.
- 최초 입력 반응 시간 (FID): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.
- 누적 레이아웃 변경 (CLS): 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 CLS를 0.1. 이하로 유지해야 합니다.
이러한 각 측정항목에서 대부분의 사용자에게 권장되는 목표에 도달하도록 하려면 모바일 및 데스크톱 기기로 분류된 페이지 로드의 75번째 백분위수를 측정하기에 좋습니다.
코어 웹 바이탈 규정 준수를 평가하는 도구는 페이지가 세 가지 측정항목 각각에 대해 75번째 백분위수의 권장 목표를 충족하는 경우 페이지를 준수하는 것으로 간주해야 합니다.
Lifecycle
코어 웹 바이탈 트랙의 측정항목은 실험적, 대기 중, 안정화의 세 단계로 구성된 수명 주기를 거칩니다.
각 단계는 개발자에게 각 측정항목에 대해 어떻게 생각해야 하는지를 알리기 위해 설계되었습니다.
- 실험 측정항목은 잠재적 Core Web Vitals로, 테스트 및 커뮤니티 의견에 따라 여전히 중요한 변화가 진행 중일 수 있습니다.
- 대기 중인 측정항목은 테스트 및 의견 단계를 통과하고 안정화까지 타임라인이 명확하게 정의된 향후 Core Web Vitals입니다.
- 안정적인 측정항목은 Chrome에서 우수한 사용자 환경을 제공하는 데 필수적인 것으로 간주하는 최신 코어 웹 바이탈 집합입니다.
코어 웹 바이탈의 수명 주기 단계는 다음과 같습니다.
- LCP: 안정화 버전
- FID: 안정화 버전
- CLS: 안정화 버전
- Interaction to Next Paint(INP)(다음 페인트에 대한 상호작용): 대기 중
INP 개발에 관한 자세한 내용은 다음 페인트로 상호작용 진행을 참고하세요.
실험적 기능
측정항목이 처음 개발되어 생태계에 진입하면 실험용 측정항목으로 간주됩니다.
실험 단계의 목적은 먼저 해결해야 할 문제를 탐색하고 이전 측정항목이 해결하지 못했을 수 있는 문제를 반복함으로써 측정항목의 적합성을 평가하는 것입니다. 예를 들어 INP는 초기에 최초 입력 반응 시간 (FID)보다 더 포괄적으로 웹 런타임 성능 문제를 해결하기 위한 실험용 측정항목으로 개발되었습니다.
코어 웹 바이탈 수명 주기의 실험 단계는 버그를 식별하고 초기 정의의 변경사항을 탐색하여 측정항목 개발의 유연성을 제공하기 위한 것입니다. 이 단계에서 커뮤니티의 의견이 가장 중요한 시기이기도 합니다
대기 중
Chrome팀에서 실험 측정항목이 충분한 의견을 받고 그 효과를 입증했다고 판단하면 대기 중인 측정항목이 됩니다. 대기 중인 측정항목은 생태계가 적응할 시간을 주기 위해 최소 6개월 동안 이 단계에서 보류됩니다. 더 많은 개발자가 측정항목을 사용하기 시작하면서 커뮤니티 피드백은 여전히 이 단계에서 중요한 부분입니다.
정식
코어 웹 바이탈 후보 측정항목이 확정되면 안정적인 측정항목이 됩니다. 이때 측정항목이 코어 웹 바이탈이 될 수 있습니다.
안정적인 측정항목은 적극적으로 지원되며 버그가 수정되고 정의가 변경될 수 있습니다. 안정화된 코어 웹 바이탈 측정항목은 1년에 두 번 이상 변경되지 않습니다. Core Web Vitals의 모든 변경사항은 측정항목의 공식 문서 및 측정항목의 변경 로그를 통해 명확하게 전달됩니다. Core Web Vitals도 모든 평가에 포함됩니다.
핵심 사항: 안정적인 측정항목이 반드시 영구적인 것은 아닙니다. 안정적인 측정항목은 사용 중지되고 문제 영역을 더 효과적으로 해결하는 다른 측정항목으로 대체할 수 있습니다.
코어 웹 바이탈 측정 및 보고
Google은 코어 웹 바이탈이 모든 웹 환경에 매우 중요하다고 생각합니다. 따라서 널리 사용되는 모든 도구에서 이러한 측정항목을 표시하기 위해 노력하고 있습니다. 다음 섹션에서는 코어 웹 바이탈을 지원하는 도구를 자세히 설명합니다.
코어 웹 바이탈 측정을 위한 필드 도구
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의 정의 및 기준점은 물론 사전 고지 및 예측 가능한 업데이트 일정을 예상해야 합니다.
다른 웹 바이탈은 컨텍스트 또는 도구별로 다른 경우가 많으며 코어 웹 바이탈보다 실험적일 수 있습니다. 따라서 정의 및 임곗값은 더 자주 변경될 수 있습니다.
모든 웹 바이탈의 경우 변경사항은 이 공개 변경 로그에 문서화됩니다.