Original address: github.com/berwin/Blog…

LCP stands for Largest Contentful Paint, which translates as “maximum content Paint” and is used to monitor the point at which elements with the Largest “Paint area” in a web page’s visual area begin to appear on the screen.

1. Introduction

Measuring when the “main content” of a web page appears to users can be challenging.

Historically, this has been the case, with load and DOMContentLoaded being used in the early days, but neither measure when content is rendered, and even less when “main content” is presented to the user, especially as single-page apps become popular.

First Paint and First Contentful Paint are used later, but they focus more on “initial rendering” and don’t consider the importance of drawing content. If the page starts with a Loading Indicator, the content presented to the user at this captured point in time is not the main valuable content.

The advanced First Meaningful Paint and Speed Index are used to measure when the main content is displayed to the user, but the capture principle is complicated and errors are frequent. FMP has an accuracy rate of only 77% in the best case.

For details on how FMP capture works, see the article “How TO Capture FMP”.

As a result of this research, a new metric was recently born, the object introduced in this article, LCP.

2. LCP

Based on discussions in the W3C Web Performance Working Group and research at Google, it has been found that a more accurate and easy way to measure how long the main content of a page is visible is to look at when the element with the largest “draw area” starts rendering.

Drawing area can be understood as the “footprint” of each element on the screen. If the element extends out of the screen, or if the element is cropped, the cropped part does not count. Only what is actually displayed on the screen counts.

The area of the image element is calculated slightly differently, because the image can be enlarged or shrunk using CSS. In other words, the image has two areas: “rendered area” and “real area”. In the calculation of LCP, the drawing area of the image will obtain a smaller value. For example, when rendered area is less than true area, Rendered Area is rendered area and vice versa.

The page is linear during loading, and elements are rendered to the screen one by one, rather than all at once, so the element with the largest “render area” changes over time. If you use the PerformanceObserver to capture the LCP, you’ll see that a new performance entry is captured every time an element with a larger “render area” occurs.

If an element is deleted, the LCP algorithm no longer considers that element, and if the deleted element happens to be the one with the largest “draw area”, a new performance entry is created using the new element with the largest “draw area”.

This process continues until the user scrolls the page for the first time or enters the page for the first time (mouse click, keyboard keystroke, etc.), that is, once the user starts interacting with the page, new performance items are stopped.

Therefore, only the last captured performance item should be sent to the analysis server.

In the figure, the green mask represents the element with the largest “drawing area”. It can be seen that the element with the largest “drawing area” is constantly changing as the page continues to load.

3. Limit

LCP is also not perfect and error-prone, with the following problems:

  1. The algorithm stops when it detects that the user is interacting with the page, that is, if “user input” occurs before “main content” is displayed, the algorithm will not capture the main content. If the user starts interacting with the web page early, the algorithm will catch incorrect results or no results.
  2. This can be problematic on pages with large image rotations because the element cannot be considered the largest once deleted. If the current image is deleted when the next image is drawn, and the next image is considered to be the largest area, the algorithm will constantly update the LCP based on the multicast image.

The removal of elements cannot be considered the largest in area, mainly to solve the “splash screen” problem.

4. Example

Capturing the LCP using PerformanceObserver is as simple as setting entryType to large-Contentful-paint.

const observer = new PerformanceObserver((entryList) = > {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  const lcp = lastEntry.renderTime || lastEntry.loadTime;
  console.log('LCP:', lcp)
});
observer.observe({entryTypes: ['largest-contentful-paint']});
Copy the code

conclusion

This article describes a new performance metric, LCP, that focuses on user experience and is easier to understand and reason about than existing metrics.