Ilya Grigorik

The original link: blog.chromium.org/2020/05/int…

Translator: Dragon tea

Optimizing the quality of the user experience is the key to the long-term success of any website. Through our continuous communication and collaboration with millions of web developers and website owners, we have developed a number of useful metrics and tools at Google to help business owners, marketers, and developers discover opportunities to improve the user experience. However, the rich diversity of metrics and tools also presents challenges to priorities, clarity, and consistency for many people.

Today, we introduce a new initiative called Web Vitals, initiated by Google, that aims to provide a unified guide to the kinds of quality signals that we believe are essential to providing a great Web user experience.

Core Web Vitals

There are many metrics involved in evaluating the quality of a user experience, and while some of the user experience is related to the site and content, there are some common signals, so Core Web Vitals represents the most critical ones. These Core user experience requirements include the loading experience of page content, interactivity, and visual stability that together form the foundation of Core Web Vitals 2020.

  • Maximum content drawingAssess the perceived loading speed when the main content of the page may have finished loading and mark the time point on the page loading timeline.
  • First input delayEvaluate the response time of a user’s first attempt to interact with a web page and quantify the user’s perceived experience.
  • Cumulative layout migrationAssess the visual stability of the visible page content and quantify the unexpected layout offsets of the content.

All of the above metrics capture important user-centered experience outcomes, can be measured in the field, and have supportive laboratory diagnostic equivalents and tools. For example, while “maximum content draw” is the most important load metric, it is also highly dependent on first content draw (FCP) and first byte response time (TTFB), both of which are very important for monitoring and optimization.

Evaluate Core Web Vitals

Our goal was to create Core Web Vitals that was simple and easy to access and evaluate, making it easy for all Web owners and developers to use in the Google interface and its own dashboard and tools.

Chrome UX Report enables Web site owners to quickly evaluate various Web Vital features of their sites and capture real-world experience data from real Chrome users. The BigQuery dataset already shows all Core Web Vitals publicly accessible data, and we’re working on a new REST API for easy access to URLS and raw level data, so stay tuned.

We strongly recommend that all site owners collect their own real-world user assessment analysis for each Core Web Vital item. To this end, several browsers, including Google Chrome, have implemented and provide support for all current Core Web Vitals draft specifications: maximum content rendering, layout instability, and event time. In addition, today we are launching a Web-Vitals open source JavaScript library that provides a small, production-ready wrapper that can be used with any analytics provider that supports custom metrics, as well as as a reference to accurately capture Core Web Vitals for web users.

// Examples of evaluating and reporting CLS, FID, and LCP using Web-Vitals import { getCLS, getFID, getLCP } from 'web-vitals'; function reportToAnalytics(data) { const body = JSON.stringify(data); (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {body, method: 'POST', keepalive: true}); } getCLS((metric) => reportToAnalytics({ cls: metric.value })); getFID((metric) => reportToAnalytics({ fid: metric.value })); getLCP((metric) => reportToAnalytics({ lcp: metric.value }));Copy the code

During our testing and development, we found that easy access to each Core Web Vital feature in both the development and production environments was very useful. To help current developers discover optimization opportunities, today we’re also releasing a developer preview of the new Core Web Vitals extension. This extension displays a visual identity for each Vital item in Chrome as it browses the web, and in the future can be used to view a summary of real user data analysis (provided by Chrome UX Report). To learn about each Core Vital state ** of the current URL and origin. **

Finally, over the next few months, we’ll be updating Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s speed reports, and other mainstream tools to highlight and provide unified executable guidance, To improve Core Web Vitals.

Keep developing Core Web Vitals

Core Web Vitals 2020 focuses on three main metrics and does not yet capture the complete Web user experience. We expect to update Core Web Vitals once a year, with regular updates on future candidate metrics, motivations, and implementation status.

Looking ahead to 2021, we will invest in building metrics for page speed and other key user experience characteristics to enhance understanding and evaluation. For example, extend the ability to evaluate input delays in all interactions, not just the first one; Build new metrics for evaluating and quantifying smoothness, primitives and supporting metrics for real-time, privacy-preserving web experiences, and more.

Palances Liao from Google will share the latest Core Web Vitals metrics and updates to each of the metrics at the 15th D2 Front-end Technology Forum with her keynote address, Updates and Trends in Front-end Performance from a Global Web Perspective.