[번역] Web Vitals

 

Philip Walton

Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

사용자 경험의 질을 최적화하는 것은 장기적인 웹 사이트 성공의 핵심입니다. 당신이 사업자, 마케터, 또는 개발자든 상관없이, Web Vital은 사이트의 경험을 정량화하고 개선할 기회를 식별하는데 도움이 될 수 있습니다. 

 

overview

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Web Vital은 웹에서 훌륭한 사용자 경험을 제공하기 위해 필수적인 품질 신호에 대한 통합된 가이드를 제공하기 위해 구글이 제안한 계획입니다. 

Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics challenging to keep up with.

구글은 수년간 성능을 측정하고 보고하기 위한 수많은 도구를 제공해왔습니다. 몇몇 개발자들은 이러한 도구들을 사용하는데 전문가이지만, 반면 다른 사람들은 많은 도구와 지표를 따라잡기 어렵다고 생각합니다. 

Site owners should not have to be performance experts to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.

사이트 소유자들은 사용자에게 제공하는 경험의 질을 이해하는 성능 전문가일 필요는 없습니다. Web Vital 계획은 이 분야를 단순화하고, 사이트가 중요한 지표, 즉  Core Web Vital에 중점을 두는 것을 목표로 합니다.

 

Core web Vitals

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

Core Web Vital은 모든 웹 페이지에 적용되는 Web Vital의 부분집합으로, 모든 사이트 소유자가 측정해야하며, 모든 구글 도구에서 제공됩니다. 각각의 Core Web Vital은 사용자 경험의 구체적인 측면을 나타내며, 현장에서 측정할 수 있고, 중요한 사용자 중심 결과의 실제 경험을 반영합니다. 

The metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):

Core Web Vital을 구성하는 지표는 시간이 지나면서 발전할 것입니다. 현재 2020년을 위한 지표는 사용자 경험의 세 가지 측면인 로딩, 상호작용, 시각적 안정성에 초점을 맞추고 있으며 다음과 같은 지표(및 각각의 임계값)를 포함합니다:

Largest Contentful Paint (LCP: 최대 컨텐츠 로드 시간)

: measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

: 로딩 성능을 측정합니다. 좋은 사용자 경험을 제공하기 위해, LCP는 페이지가 첫 로딩을 시작한 지 2.5초 이내에 발생해야 합니다. 

First Input Delay (FID: 첫 입력 지연 시간)

: measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.

: 상호작용을 측정합니다. 좋은 사용자 경험을 제공하기 위해, 페이지는 FID가 100ms 이하여야 합니다.  

 

Cumulative Layout Shift (CLS: 누적 레이아웃 이동)

: measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

: 시각적 안정성을 측정합니다. 좋은 사용자 경험을 제공하기 위해, 페이지는 CLS가 0.1 이하로 유지되어야 합니다. 

 

For each of the above metrics, to ensure you're hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

위 각각의 지표에서, 대부분의 사용자에게 권장된 목표를 달성하기 위해, 측정하기 좋은 임계값은 모바일과 데스크탑 장치로 세분화하여 측정한 페이지 로드의 75%입니다.

Tools that assess Core Web Vitals compliance should consider a page passing if it meets the recommended targets at the 75th percentile for all of the above three metrics.

Core Web Vital 준수를 평가하는 도구들은 페이지가 위 세개의 지표에 대해 권장된 목표를 모두를 75%를 충족하는 경우 통과로 간주해야 합니다.

 

Lifecycle

Metrics on the Core Web Vitals track go through a lifecycle consisting of three phases: experimental, pending, and stable.

Core Web Vital track에 대한 지표는 세 단계로 구성된 lifecycle을 따릅니다: 실험적, 보류, 안정

 

The table below reflects where all Core Web Vitals currently are in their lifecycle:

아래 표는 모든 Core Web Vital들이 lifecycle에서 현재 어디에 있는지를 나타냅니다. 

Experimental	Pending	Stable
	INP	LCP, CLS, FID

 

Each phase is designed to signal to developers how they should think about each metric:

각 단계는 개발자들이 각 지표에 대해 어떻게 생각하는지 알려주도록 설계되었습니다. 

• Experimental metrics are prospective Core Web Vitals that may still be undergoing significant changes depending on testing and community feedback.
  
  실험적 지표는 예상 코어 웹 바이탈로 테스트와 커뮤니티 피드백을 기반으로 여전히 상당한 변화를 겪고 있습니다. 
  
  
• Pending metrics are future Core Web Vitals that have passed the testing and feedback stage and have a well-defined timeline to becoming stable.
  
  보류 지표는 미래의 코어 웹 바이탈로 테스트와 피드백 단계를 통과했으며 안정화되기까지의 명확한 일정이 있습니다.
  
  
• Stable metrics are the current set of Core Web Vitals that Chrome considers essential for great user experiences.
  
  안정 지표는 코어 웹 바이탈의 현재 집합으로 크롬이 좋은 사용자 경험을 위해 필수적이라고 고려하는 것입니다.
  
  

 

Experimental

When a metric is initially developed and enters the ecosystem, it is considered an experimental metric.

초기에 지표가 만들어지고 생태계에 들어왔을 때, 이는 실험적 지표라고 간주되었습니다. 

The purpose of the experimental phase is to assess a metric's fitness, first by exploring the problem to be solved, and possibly iterate on what previous metrics may have failed to address. For example, Interaction to Next Paint (INP) was initially developed as an experimental metric to address the runtime performance issues present on the web more comprehensively than First Input Delay (FID).

실험적 단계의 목적은 먼저 해결할 문제를 탐색하고 이전 지표에서 처리하지 못한 문제를 반복하여 검토함으로써 지표의 적합성을 평가하는 것입니다. 예를 들어, INP는 초기에 웹에 존재하는 런타임 성능을 FID 보다 더 포괄적으로 해결하기 위한 실험적 지표로 개발되었습니다.

The experimental phase of Core Web Vitals lifecycle is also intended to give flexibility in a metric's development by identifying bugs and even exploring changes to its initial definition. It's also the phase in which community feedback is most important.

코어 웹 바이탈 생명주기의 실험적 단계는 또한 버그를 확인하고 심지어 초기 정의에 대한 변경사항을 확인함으로써 지표 개발에 유연성을 제공하는 의도를 가지고 있습니다. 

Pending

When the Chrome team determines that an experimental metric has received sufficient feedback and proven its efficacy, it becomes a pending metric. Pending metrics are held in this phase for a minimum of six months to give the ecosystem time to adapt. The only remaining hurdle for a metric to advance beyond the pending phase is to wait out the transition period. Community feedback remains an important aspect of this phase, as more developers begin to use the metric.

크롬 팀은 실험적 단계가 충분한 피드백을 받고 효율성이 입증된다고 결정하면, 보류 지표가 됩니다. 보류지표는 생태계가 적응할 시간을 주기 위해 최소 6개월간 해당 단계(보류지표)에 머무릅니다. 보류 단계를 넘어 다음 지표로의 나아가는데 남아있는 유일한 장애물은 이행 단계를 기다리는 것입니다. 많은 개발자들이 해당 지표를 사용하기 시작하면서, 커뮤니티 피드백은 이 단계의 중요한 측면입니다. 

Stable

When a Core Web Vital candidate metric is finalized, it becomes a stable metric—for metrics that are on the Core Web Vitals track, this means the metric becomes a Core Web Vital.

코어 웹 바이탈 후보 지표가 끝나면, 해당 지표는 안정 지표가됩니다. 코어 웹 바이탈 트랙에 있는 지표로, 이는 해당 지표가 코어 웹 바이탈이 되었음을 의미합니다. 

Stable metrics are actively supported, and may be subject to bug fixes and definition changes. Stable Core Web Vitals metrics won't change more than once per year. Any change to a Core Web Vital will be clearly communicated in the metric's official documentation, as well as in the metric's CHANGELOG. Core Web Vitals are also included in any assessments.

안정 지표는 활발하게 지원되며, 버그 수정 및 정의 변경의 대상이 될 수 있습니다. 안정적 코어 웹 바이탈 지표는 일 년에 한 번 이상은 바뀌지 않을 것입니다. 코어 웹 바이탈 변경은 지표의 공식 문서와 변경로그에 분명하게 전달될 것입니다. 

Key point: Metrics that are stable are not necessarily permanent. While stable metrics are long-lived, a stable metric can be retired and replaced by another metric if it addresses the problem area more effectively.

Key point: 안정적 지표는 반드시 영구적인것은 아닙니다. 안정적 지표가 장기간 유지되지만, 문제를 더 효율적으로 다루는 다른 지표에 의해 사라지고 대체될 수 있습니다.

 

Tools to measure and report Core Web Vitals: 코어 웹 바이탈을 측정하고 보고하는 도구들
Google believes that the Core Web Vitals are critical to all web experiences. As a result, it is committed to surfacing these metrics in all of its popular tools. The following sections details which tools support the Core Web Vitals.

구글은 코어 웹 바이탈이 모든 웹 경험에 중요하다고 생각합니다. 그 결과, 구글은 모든 인기 있는 도구에서 이러한 지표들을 나타내는데 전념합니다. 다음 section은 어느 도구가 코어 웹 바이탈을 지원하는지를 상세히 설명합니다. 

Field tools to measure Core Web Vitals: 코어 웹 바이탈을 측정하는 필드 도구들
The Chrome User Experience Report collects anonymized, real user measurement data for each Core Web Vital. This data enables site owners to quickly assess their performance without requiring them to manually instrument analytics on their pages, and powers tools like PageSpeed Insights, and Search Console's Core Web Vitals report.

크롬 사용자 경험 보고서는 각각의 코어 웹 바이탈에 대한 익명화된 실 사용자 측정 데이터를 수집합니다. 이 데이터는 사이트 소유자가 페이지에 분석 도구를 설치하지 않고 빠르게 성능을 평가할 수 있게 하며, PageSpeed Insights, Search Console's Core Web Vitals 보고서와 같은 도구를 제공합니다. 

	LCP	FID	CSL
Chrome User Experience Report	O	O	O
PageSpeed Insights	O	O	O
Search Console(Core Web Vitals report)	O	O	O

 

Note: For guidance on how to use these tools, and which tool is right for your use case, see: Getting started with measuring Web Vitals

Note: 이 도구들을 사용하는 방법과, 사용 사례별 어떤 도구가 적합한지에 대한 지침은, '웹 바이탈 측정 시작하기'를 확인하세요.

 

The data provided by Chrome User Experience Report offers a quick way to assess the performance of sites, but it does not provide the detailed, per-pageview telemetry that is often necessary to accurately diagnose, monitor, and quickly react to regressions. As a result, we strongly recommend that sites set up their own real-user monitoring.

크롬 사용자 경험 보고서에서 제공된 데이터는 사이트의 성능을 평가하는 빠른 방법을 제공하지만, 종종 정확한 진단, 모니터링, 성능 저하에 빠르게 반응하기 위해 필요한 세부적인 페이지별 원격 측정을 제공하진 않습니다. 그 결과, 사이트가 자체 실사용자 모니터링을 설정하는 것을 강력히 권장합니다. 

 

Measure Core Web Vitals in JavaScript

Each of the Core Web Vitals can be measured in JavaScript using standard web APIs.

각각의 코어 웹 바이탈은 표준 Web APIs를 사용해 측정될 수 있습니다. 

Note: Note that the Core Web Vitals measured in JavaScript using public APIs may differ from the Core Web Vitals reported by CrUX. Read this article for more info.

Note: 공공 API를 사용해 JavaScript로 측정된 코어 웹 바이탈은 CrUX의 코어 웹 바이탈 보고서와 다를 수 있습니다. 더 많은 정보를 위해 다음 아티클을 읽으세요.

The easiest way to measure all the Core Web Vitals is to use the web-vitals JavaScript library, a small, production-ready wrapper around the underlying web APIs that measures each metric in a way that accurately matches how they're reported by all the Google tools listed above.

모든 코어 웹 바이탈을 측정하는 가장 쉬운 방법은 Web Vitals JS 라이브러리를 사용하는 것입니다. 이 라이브러리는 작고 실제 사용 가능한 래퍼로, 기본적은 웹 API를 감사고 있으며, 위에 목록화된 모든 구글 도구에 의해 보고되는 방식과 정확히 동일하게 각 지표를 측정합니다.

With the web-vitals library, measuring each metric is as simple as calling a single function (see the documentation for complete usage and API details):

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);

 

Once you've configured your site to use the web-vitals library to measure and send your Core Web Vitals data to an analytics endpoint, the next step is to aggregate and report on that data to see if your pages are meeting the recommended thresholds for at least 75% of page visits.

Core Web Vital 데이터를 측정하여 분석 엔드포인트에 보내기위해 web-vitals 라이브러리를 사용하기 위해 당신의 사이트를 수정하면, 다음 단계는 웹 페이지가 최소 75% 방문에서 권장 기준치를 충족하는지를 확인하기 위해 데이터를 수집하고 보고하는 것입니다.

While some analytics providers have built-in support for Core Web Vitals metrics, even those that don't should include basic custom metric features that allow you to measure Core Web Vitals in their tool.

몇몇 분석 제공 업체들은 코어 웹 바이탈 지표를 내장 지원하고 있지만, 그렇지 않은 경우 도구 내에서 코어 웹 바이탈을 측정할 수 있는 기본적인 사용자 정의 지표 기능을 포함해야 합니다. 

One example of this is the Web Vitals Report, which allows site owners to measure their Core Web Vitals using Google Analytics. For guidance on measuring Core Web Vitals using other analytics tools, see Best practices for measuring Web Vitals in the field.

이에 대한 예시중 하나는 Web Vital Report로, 웹 사이트 소유자가 Google Analytics를 사용해 Core Web Vitals를 측정할 수 있게 합니다. 다른 분석 도구로 Core Web Vitals를 측정하는 안내서를 확인하고 싶다면, 현장에서 웹 바이탈을 측정하는 최상의 방법을 확인하세요. 

You can also report on each of the Core Web Vitals without writing any code using the Web Vitals Chrome Extension. This extension uses the web-vitals library to measure each of these metrics and display them to users as they browse the web.

또한 Web Vital Chrome Extension을 사용하면 코드작성 없이 각각의 Core Web Vitals에 대한 보고서를 작성할 수 있습니다. 이 확장 프로그램은 웹을 탐색하면서 각 지표를 측정하고 이를 보여주기 위해 web-vitals 라이브러리를 사용합니다. 

This extension can be helpful in understanding the performance of your own sites, your competitor's sites, and the web at large.

이 확장 프로그램은 당신의 사이트, 경쟁사의 사이트, 그리고 전반적인 웹 성능을 이해하는데 도움이 될 수 있습니다. 

	LCP	FID	CLS
web-vitals	O	O	O
Web Vitals Extension	O	O	O
Chrome Dev Tools	O	X	O
Lighthouse	O	X	O

 

Alternatively, developers who prefer to measure these metrics directly via the underlying web APIs can refer to these metric guides for implementation details:

그렇지 않고, 기본적은 web APIs를 통해 직접이 지표들을 측정하고 싶은 개발자들은 실행 세부사항에 대한 지표 가이드을 참고할 수 있습니다. 

• Measure LCP in JavaScript
• Measure FID in JavaScript
• Measure CLS in JavaScript

 

Note: For additional guidance on how to measure these metrics using popular analytics services (or your own in-house analytics tools), see: Best practices for measuring Web Vitals in the field

Note: 인기있는 분석 서비스 (또는 자체 내부 분석 도구)를 사용해 이 지표들을 분석하는 방법에 대한 추가적인 안내는 '현장에서 웹 바이탈을 측정하는 최상의 방법'을 참조하세요.

 

Lab tools to measure Core Web Vitals: 핵심 웹 바이탈을 측정하는 실험실 도구들

While all of the Core Web Vitals are, first and foremost, field metrics, many of them are also measurable in the lab.

우선적으로 핵심 웹 바이탈이 현장 측정 지표이지만, 다수는 또한 실험실에서 측정할 수 있습니다. 

Lab measurement is the best way to test the performance of features during development—before they've been released to users. It's also the best way to catch performance regressions before they happen.

실험실 도구는 사용자들에게 출시되기 전 개발과정 동안 기능의 성능을 테스트하는 가장 좋은 방법입니다. 이는 또한 성능 저하가 발생하기 전에 잡아내는 가장 좋은 방법입니다. 

The following tools can be used to measure the Core Web Vitals in a lab environment:

다음 도구들은 실험실 환경에서 핵심 웹 바이탈을 측정하기위해 사용될 수 있습니다.

	LCP	FID	CLS
Chrome Dev Tools	O	X	O
Lighthouse	O	X	O

Note: Tools like Lighthouse that load pages in a simulated environment without a user cannot measure FID (there is no user input). However, the Total Blocking Time (TBT) metric is lab-measurable and is an excellent proxy for FID. Performance optimizations that improve TBT in the lab should improve FID in the field (see performance recommendations below).

Note: 사용자 없이 모의 환경에서 페이지를 로드하는 Lighthouse와 같은 도구는 (사용자 입력이 없으므로) FID를 측정할 수 없습니다. 하지만, TBT(총 차단 시간) 지표는 실험실에서 측정할 수 있으며 FID에 대한 우수한 대리지표 입니다. 실험식에서 TBT를 개선하는 성능 최적화는 현장에서 FID를 개성한 것입니다.(아래 성능 권장사항을 참조하세요.)

 

While lab measurement is an essential part of delivering great experiences, it is not a substitute for field measurement.

실험식 측정이 좋은 사용자 경험을 주는데 필수적인 부분이지만, 이는 현장 측정의 대안은 아닙니다. 

The performance of a site can vary dramatically based on a user's device capabilities, their network conditions, what other processes may be running on the device, and how they're interacting with the page. In fact, each of the Core Web Vitals metrics can have its score affected by user interaction. Only field measurement can accurately capture the complete picture.

웹 사이트의 성능은 사용자 기기 용량, 네트워크 상태, 장치에서 실행중인 다른 프로세스, 그리고 페이지와 상호 방식에 따라 극명하게 달라질 수 있습니다. 사실, 각 코어 웹 바이탈 지표는 사용자 상호작용으로 점수가 영향을 받을 수 있습니다. 오직 현장 측정만이 완벽한 그림을 정확하게 포착할 수 있습니다. 

Recommendations for improving your scores: 점수 향상을 위한 권장사항

Once you've measured the Core Web Vitals and identified areas for improvement, the next step is to optimize. The following guides offer specific recommendations for how to optimize your pages for each of the Core Web Vitals:

핵심 웹 바이탈을 측정하고 개선할 부분을 확인하면, 다음 단계는 최적화하는 것입니다. 다음 가이드는 각 핵심 웹 바이탈에 대해 당신의 페이지를 최적화하는 방법에 대한 구체적인 권장사항을 제공합니다. 

• Optimize LCP
• Optimize FID
• Optimize CLS

 

Other Web Vitals

While the Core Web Vitals are the critical metrics for understanding and delivering a great user experience, there are other vital metrics as well.

핵심 웹 바이탈이 좋은 사용자 경험을 이해하고 전달하는데 중요한 지표이지만, 다른 중요한 지표도 있습니다. 

These other Web Vitals often serve as proxy or supplemental metrics for the Core Web Vitals, to help capture a larger part of the experience or to aid in diagnosing a specific issue.

다른 웹 바이탈들은 경험의 더 큰 부분을 포착하는 것을 돕거나 특정 문제를 진단하는데 도움을 주기 위해, 종종 핵심 웹 바이탈을 대신하거나 보조하는 지표로 사용됩니다. 

For example, the metrics Time to First Byte (TTFB) and First Contentful Paint (FCP) are both vital aspects of the loading experience, and are both useful in diagnosing issues with LCP (slow server response times or render-blocking resources, respectively).

예를들어, TTFB와 FCP 지표는 모두 로딩 경험의 중요한 측면이며, LCP와 같이 문제를 진단하는데 유용합니다.(각각 늦은 서버 반응 시간 또는 렌더랑 차단 리소스) 

Similarly, a metric like Total Blocking Time (TBT) is a lab metrics is vital in catching and diagnosing potential interactivity issues that will impact FID and INP. However, it is not part of the Core Web Vitals set because they are not field-measurable, nor do they reflect a user-centric outcome.

유사하게, TBT와 같은 지표는 FID와 INP에 영향을 미치는 잠재적인 상호작용 이슈를 잡아내고 진단하는데 중요한 실험실 지표입니다. 그러나 TBT는 현장에서 측정할 수 없고 사용자 중심 결과를 반영하지 않으므로 핵심 웹 바이탈의 일부가 아닙니다

 

Evolving Web Vitals

Web Vitals and Core Web Vitals represent the best available signals developers have today to measure quality of experience across the web, but these signals are not perfect and future improvements or additions should be expected.

웹 바이탈과 코어 웹 바이탈은 개발자들이 오늘날 웹 전반의 경험의 질을 측정하기 위해 가지고 있는 가장 좋은 신호를 나타냅니다. 하지만, 이 신호들은 완벽하지 않고, 향후 개선과 추가가 예상됩니다.

The Core Web Vitals are relevant to all web pages and featured across relevant Google tools. Changes to these metrics will have wide-reaching impact; as such, developers should expect the definitions and thresholds of the Core Web Vitals to be stable, and updates to have prior notice and a predictable, annual cadence.

핵심 웹 바이탈은 모든 웹 페이지와 관련되며 관련된 구글 도구 전체에 특징화되어 있습니다. 보통 개발자들은 핵심 웹 바이탈의 정의와 임계값이 안정적이라고 기대하므로 이 지표에 대한 변경은 광범위한 영향을 미칠것이며 사전 공지와 예측할 수 있는 연례적인 주기로 업데이트 되어야 합니다.  

The other Web Vitals are often context or tool specific, and may be more experimental than the Core Web Vitals. As such, their definitions and thresholds may change with greater frequency.

다른 웹 바이탈은 종종 컨텍스트나 도구에 특화되어 있으므로, 핵심 웹 바이탈 보더 더 실험적일 수 있습니다. 그러므로 이들의 정의와 임계점은 훨씬 더 자주 변경될수 있습니다. 

For all Web Vitals, changes will be clearly documented in this public CHANGELOG.

모든 웹 바이탈에 대한 변경사항은 이 공개 변경로그에 명확하게 문서화될 것입니다.

 

Original)

Web Vitals  |  Articles  |  web.dev