Note: The browser provides some Web APIS, such as PerformanceObserver and Performance, to obtain Performance data related to web page loading and rendering. Web-vitals is a packaged library that uses a Web API to provide some common statistics functionality.

LCP (Largest Contentful Paint)

  • Your site should strive for maximum content rendering within 2.5 seconds of the page starting to load
  • The element types considered for maximum content drawing are:
    • The element
    • The element within the element
    • Elements (using poster images)
    • Element with background image loaded by URL, function (as opposed to CSS gradient)
    • Block-level elements that contain text nodes or children of other inline level text elements
  • Whenever the largest content element changes, it sends a PerformanceEntry
  • Once the user interacts with the page (by tapping, scrolling, or keypressing), the browser stops reporting new entries
  • You can also write your own, using PerformanceObserver, as required

Metric value as follows

{
    delta: 1305.54.entries: [
       largest-contentful-paint // The outer value of each DOM is the maximum loadTime in the array].id: 'v1-1621569328398-2566585311056'.name: 'CLS'.value: 1305.54
}
Copy the code

CLS (Cumulative Layout Shift)

  • Pages should maintain CLS less than 0.1
  • To measure visual stability, unexpected movement of page content often occurs because resources are loaded asynchronously, or DOM elements are dynamically added to the page on top of existing content
  • CLS measures the sum of all individual layout shift scores for each unexpected layout shift that occurs over the life of a page

Metric value as follows

{
    delta: 0.entries: [].id: 'v1-1621569328397-8189052039636'.name: 'CLS'.value: 0
}
Copy the code

FID (First Input Delay)

  • Websites should strive to make the first input delay less than 100 milliseconds
  • FID measurement from users interact with the page for the first time (that is, when the user clicks the link, click on the button, or use a custom JavaScript driver controls) to the browser can actually start processing event handlers in response to the interaction time, input lag (also called input lag) occurred because the browser’s main Cheng Zheng busy doing other things.
  • Only measure “latency” in event processing!! FID is a measure of the responsiveness of a page during load

Metric value as follows

TTFB (Time To First Byte)

  • The time it takes the user’s browser to receive the first byte of page content
  • Specific focus onperformanceThe return value

Metric value as follows

FCP (First Contentful Paint)

  • Measures the time from page loading to any part of the screen that renders page content
  • “Content” means text, images (including background images),<svg>Element or non-white<canvas>The element

Metric value as follows

At the end

This paper aims to focus on the web – vitals do summary and analysis of two degrees, may refer to the original site for further understanding the reference link: https://github.com/GoogleChrome/web-vitals