게시일: 2020년 5월 4일
사용자 경험의 품질을 최적화하는 것은 웹상에 존재하는 모든 사이트의 장기적인 성공에 중요한 요소입니다. 비즈니스 소유자, 마케팅 담당자, 개발자들이 Web Vitals를 사용하면 사이트의 실험 환경을 수치화하고 개선 기회를 파악할 수 있습니다.
개요
웹 바이털은 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합된 안내를 제공하는 Google의 이니셔티브입니다.
Google은 수년에 걸쳐 실적을 측정하고 보고하는 다양한 도구를 제공해 왔습니다. 이러한 도구 사용에 능숙한 개발자도 있지만 도구와 측정항목이 너무 많아 따라가기 어렵다고 생각하는 개발자도 있습니다.
사이트 소유자는 사용자에게 제공하는 경험의 품질을 이해하기 위해 성능 전문가가 될 필요가 없습니다. 웹 바이탈 이니셔티브는 환경을 간소화하고 사이트가 가장 중요한 측정항목인 Core Web Vitals에 집중할 수 있도록 지원하는 것을 목표로 합니다.
코어 웹 바이탈
Core Web Vitals는 모든 웹페이지에 적용되는 Web Vitals의 하위 집합으로, 모든 사이트 소유자가 측정해야 하며 모든 Google 도구에 표시됩니다. Core Web Vitals의 각 요소는 사용자 경험의 뚜렷한 속성을 나타내며, 필드에서 측정 가능하고, 중요한 사용자 중심 결과에 대한 실제 경험을 반영합니다.
Core Web Vitals를 구성하는 측정항목은 시간이 지남에 따라 진화할 것입니다. 현재 세트는 사용자 경험의 세 가지 측면, 즉 로드, 상호작용성, 시각적 안정성에 중점을 두고 있으며 다음과 같은 측정항목 (및 각 측정항목의 기준점)을 포함합니다.
- 최대 콘텐츠 페인트 (LCP): 로드 성능을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지 로드가 시작된 후 2.5초 이내에 LCP가 발생해야 합니다.
- 다음 페인트에 대한 상호작용 (INP): 상호작용성을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지의 INP가 200밀리초 이하여야 합니다.
- 누적 레이아웃 이동 (CLS): 시각적 안정성을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지의 CLS가 0.1 이하로 유지되어야 합니다.
대부분의 사용자를 대상으로 이러한 측정항목의 권장 목표치를 달성하려면 모바일 및 데스크톱 기기별로 구분하여 페이지 로드 횟수의 75번째 백분위수를 측정 기준으로 삼는 것이 좋습니다.
Core Web Vitals 준수 여부를 평가하는 도구는 세 가지 Core Web Vitals 측정항목 모두에서 75번째 백분위수의 권장 목표를 충족하는 경우 페이지가 통과한 것으로 간주해야 합니다.
Lifecycle
Core Web Vitals 추적의 측정항목은 실험용, 대기 중, 안정의 세 단계로 구성된 수명 주기를 거칩니다.
각 단계는 개발자에게 각 측정항목을 어떻게 생각해야 하는지 알려주기 위해 설계되었습니다.
- 실험용 측정항목은 테스트 및 커뮤니티 의견에 따라 아직 크게 변경될 수 있는 예상 Core Web Vitals입니다.
- 대기 중인 측정항목은 테스트 및 피드백 단계를 통과하고 안정화되기 위한 명확한 타임라인이 있는 미래의 Core Web Vitals입니다.
- 안정적인 측정항목은 Chrome에서 우수한 사용자 환경에 필수적인 것으로 간주하는 현재의 Core Web Vitals입니다.
Core Web Vitals는 다음 수명 주기 단계에 있습니다.
실험용
측정항목이 처음 개발되어 생태계에 진입하면 실험용 측정항목으로 간주됩니다.
실험 단계의 목적은 먼저 해결해야 할 문제를 살펴보고 이전 측정항목에서 해결하지 못한 부분을 반복적으로 검토하여 측정항목의 적합성을 평가하는 것입니다. 예를 들어 다음 페인트에 대한 상호작용 (INP)은 처음에는 첫 입력 지연 (FID)보다 웹에 있는 런타임 성능 문제를 더 포괄적으로 해결하기 위한 실험적 측정항목으로 개발되었습니다.
Core Web Vitals 수명 주기의 실험 단계는 버그를 식별하고 초기 정의의 변경사항을 살펴봄으로써 측정항목 개발의 유연성을 제공하기 위한 목적도 있습니다. 또한 커뮤니티 피드백이 가장 중요한 단계이기도 합니다.
대기 중
Chrome팀에서 실험용 측정항목에 충분한 의견이 접수되고 효과가 입증되었다고 판단하면 대기 중인 측정항목이 됩니다. 예를 들어 2023년에 INP는 최종적으로 FID를 중단하기 위해 실험에서 대기 상태로 승격되었습니다.
대기 중인 측정항목은 생태계가 적응할 수 있도록 이 단계에서 최소 6개월 동안 유지됩니다. 더 많은 개발자가 측정항목을 사용하기 시작함에 따라 커뮤니티 피드백은 이 단계에서 중요한 측면으로 남아 있습니다.
정식
Core Web Vitals 후보 측정항목이 확정되면 안정적인 측정항목이 됩니다. 이때 측정항목이 Core Web Vital이 될 수 있습니다.
안정적인 측정항목은 적극적으로 지원되며 버그 수정 및 정의 변경이 적용될 수 있습니다. 안정적인 Core Web Vitals 측정항목은 1년에 한 번 이상 변경되지 않습니다. Core Web Vitals의 변경사항은 측정항목의 공식 문서와 변경사항 로그에 명확하게 전달됩니다. 코어 웹 바이탈도 평가에 포함됩니다.
Core Web Vitals를 측정하고 보고하는 도구
Google은 Core Web Vitals가 모든 웹 환경에 중요하다고 생각합니다. 따라서 Google은 모든 인기 도구에 이러한 측정항목을 표시하기 위해 노력하고 있습니다. 다음 섹션에서는 Core Web Vitals를 지원하는 도구를 자세히 설명합니다.
코어 웹 바이탈을 측정하는 필드 도구
Chrome 사용자 경험 보고서는 각 Core Web Vitals에 대해 익명 처리된 실제 사용자 측정 데이터를 수집합니다. 이 데이터를 통해 사이트 소유자는 페이지에서 분석을 수동으로 계측하지 않고도 실적을 빠르게 평가할 수 있으며 Chrome DevTools, PageSpeed Insights, Search Console의 Core Web Vitals 보고서와 같은 도구를 지원합니다.
| LCP | INP | CLS | |
| Chrome 사용자 경험 보고서 | |||
| Chrome DevTools | |||
| PageSpeed Insights | |||
| Search Console (Core Web Vitals 보고서) |
Chrome 사용자 환경 보고서에서 제공하는 데이터를 사용하면 사이트의 실적을 빠르게 평가할 수 있지만, 회귀를 정확하게 진단하고 모니터링하고 신속하게 대응하는 데 필요한 페이지 조회별 세부 원격 분석은 제공하지 않습니다. 따라서 사이트에서 자체 실제 사용자 모니터링을 설정하는 것이 좋습니다.
JavaScript에서 Core Web Vitals 측정
각 Core Web Vitals는 표준 웹 API를 사용하여 JavaScript로 측정할 수 있습니다.
모든 Core Web Vitals를 측정하는 가장 쉬운 방법은 web-vitals JavaScript 라이브러리를 사용하는 것입니다. 이 라이브러리는 기본 웹 API를 래핑한 소규모의 프로덕션 레디 래퍼로, 앞서 나열된 모든 Google 도구에서 보고되는 방식과 정확히 일치하는 방식으로 각 측정항목을 측정합니다.
web-vitals 라이브러리를 사용하면 단일 함수를 호출하여 각 측정항목을 측정할 수 있습니다. 사용 및 API 세부정보는 문서를 참고하세요.
import {onCLS, onINP, 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);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
web-vitals 라이브러리를 사용하여 Core Web Vitals 데이터를 측정하고 애널리틱스 엔드포인트로 전송하도록 사이트를 구성한 후 다음 단계는 해당 데이터를 집계하고 보고하여 페이지가 페이지 방문의 75% 이상에서 권장 기준점을 충족하는지 확인하는 것입니다.
일부 분석 제공업체는 Core Web Vitals 측정항목을 기본적으로 지원하지만, 그렇지 않은 경우에도 도구에서 Core Web Vitals를 측정할 수 있는 기본 맞춤 측정항목 기능이 포함되어야 합니다.
기본 웹 API를 사용하여 이러한 측정항목을 직접 측정하려는 개발자는 대신 다음 측정항목 가이드를 구현 세부정보에 사용할 수 있습니다.
인기 있는 분석 서비스 또는 자체 분석 도구를 사용하여 이러한 측정항목을 측정하는 방법에 관한 추가 안내는 필드에서 Web Vitals 측정하기를 위한 권장사항을 참고하세요.
코어 웹 바이탈을 측정하는 실험실 도구
모든 코어 웹 바이탈은 무엇보다도 필드 측정항목이지만, 많은 측정항목은 실험실에서도 측정할 수 있습니다.
실험실 측정은 기능이 사용자에게 출시되기 전 개발 중에 기능의 성능을 테스트하는 가장 좋은 방법입니다. 또한 성능 회귀가 발생하기 전에 이를 포착하는 가장 좋은 방법이기도 합니다.
다음 도구를 사용하여 실험실 환경에서 Core Web Vitals를 측정할 수 있습니다.
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | |||
| Lighthouse | (대신 TBT 사용) |
실험실 측정은 우수한 환경을 제공하는 데 필수적이지만, 현장 측정을 대체할 수는 없습니다.
사이트의 성능은 사용자의 기기 기능, 네트워크 상태, 기기에서 실행 중인 다른 프로세스, 페이지와의 상호작용 방식에 따라 크게 달라질 수 있습니다. 실제로 Core Web Vitals 측정항목의 점수는 사용자 상호작용에 따라 달라질 수 있습니다. 현장 측정만이 전체적인 정보를 정확하게 파악할 수 있습니다.
점수 개선을 위한 권장사항
다음 가이드에서는 각 Core Web Vitals에 맞게 페이지를 최적화하는 방법에 관한 구체적인 권장사항을 제공합니다.
Core Web Vitals를 개선하는 방법은 다양하며, 각 접근 방식은 상황에 따라 영향, 관련성, 사용 편의성이 다릅니다. Chrome팀의 주요 권장사항을 간략하게 보려면 Core Web Vitals를 개선하는 가장 효과적인 방법을 참고하세요.
기타 Web Vitals
Core Web Vitals는 우수한 사용자 환경을 이해하고 제공하는 데 중요한 측정항목이지만 다른 지원 측정항목도 있습니다.
이러한 다른 측정항목은 더 큰 부분을 포착하거나 특정 문제를 진단하는 데 도움이 되도록 세 가지 Core Web Vitals의 프록시 또는 보조 측정항목으로 사용될 수 있습니다.
예를 들어 첫 바이트까지의 시간 (TTFB)과 첫 콘텐츠 페인트 (FCP)는 모두 로드 환경의 중요한 측면이며, 각각 LCP (느린 서버 응답 시간 또는 렌더링 차단 리소스) 문제를 진단하는 데 유용합니다.
마찬가지로 총 차단 시간 (TBT)과 같은 실험실 측정항목은 INP에 영향을 줄 수 있는 잠재적인 상호작용 문제를 포착하고 진단하는 데 중요합니다. 하지만 필드에서 측정할 수 없고 사용자 중심 결과를 반영하지 않으므로 Core Web Vitals 세트에 포함되지 않습니다.
Web Vitals 변경사항
웹 바이탈과 핵심 웹 바이탈은 개발자가 현재 웹 전반의 환경 품질을 측정할 수 있는 최적의 신호이지만, 이러한 신호가 완벽하지는 않으며 향후 개선되거나 추가될 수 있습니다.
Core Web Vitals는 모든 웹페이지와 관련이 있으며 관련 Google 도구에 표시됩니다. 이러한 측정항목의 변경사항은 광범위한 영향을 미치므로 개발자는 핵심 웹 바이탈의 정의와 기준이 안정적이고 업데이트에는 사전 공지와 예측 가능한 연간 주기가 있을 것으로 예상해야 합니다.
다른 Web Vitals는 컨텍스트 또는 도구에 따라 다르며 Core Web Vitals보다 실험적일 수 있습니다. 따라서 정의와 기준점이 더 자주 변경될 수 있습니다.
모든 Web Vitals의 변경사항은 이 공개 CHANGELOG에 명확하게 문서화됩니다.