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