Skip to main content

How to calculate the LCP

Maximum Content Drawing (LCP, Largest Contentful Paint) is an important user-centric metric to measure Perceived loading speed because it marks the point in the page load timeline when the main content of the page is almost loaded. A snappy LCP helps convince the user that the page is Effective. In order to provide a good user experience, a website should strive for maximum content rendering within the first 2.5 seconds of starting to load the page.

Description of indicators​

The LCP metric reports the relative time of the largest image or text block completed rendering visible within the viewable area, based on the point-in-time of the page First time loading.

What elements are considered by the LCP​

LCP does not currently calculate all elements because this would make the metric very complex, and it now focuses only on the following elements:

  • <img> Element
  • An element embedded within <image> an <svg> element
  • <video> Element
  • Load the elements of the background image through the URL () function.
  • A block-level element that contains text nodes or children of other inline text elements.

Explain To keep things simple in the beginning, restricting the elements to this limited set is intentional. More elements may be added in the future as research progresses.

How to calculate the LCP​

The largest element on the page is the element with the largest drawing area. The so-called drawing area can be understood as the "footprint" of each element on the screen. If the element extends out of the screen, or a part of the element is cut, the cut part is not counted, only the part actually displayed on the screen is counted.

The area of an image element is calculated slightly differently because the image can be displayed as large or small with CSS, that is, the image has two areas: Rendered Area and Real Area. In the calculation of the LCP, the drawing area of the picture will get a smaller value. For example, when Render Area is less than True Area, Paint Area is Render Area, and vice versa.

In the loading process, the page is linear, and the elements are rendered to the screen one by one, not all at once, so the elements with the largest "rendering area" are changing at any time.

If an element is deleted, it is no longer considered by the LCP algorithm. If the deleted element happens to be the element with the largest Paint Area, a new performance entry is created with the new element with the largest Paint Area.

This process continues until the first time the user scrolls the page or the first user input (mouse click, keyboard keystroke, etc.), that is, once the user begins to interact with the page, the reporting of new performance metrics is stopped.

image-20210428143308191

In the above timeline, the largest element changes as the content is loaded. In the first example, new content is added to the DOM and the largest element is changed. In the second example, the layout changes and the largest content ever is removed from the viewport. In general, the content that is lazy-loaded is larger than what is already on the page.

Improve LCP​

The most common reasons for poor LCP are:

  • Slow server response times
  • Blocking rendered Javascript and CSS
  • Slow resource load times
  • Client rendering

So we consider improving LCP from the above perspective.

Optimize the server​

As is well understood, the longer it takes for the browser to receive content from the server, the longer it takes to render any content on the screen. Faster server response times can directly improve all page load metrics, including LCP.

There is a special indicator to measure the response time of the server: the first byte response time (TTFB) is the time from when the initial network request is initiated to when the first byte is received from the server. It includes the TCP connection time, the time to send the HTTP request and the time to get the first byte of the response message. You can try to optimize TTFB in the following aspects:

  • Cache HTML offline pages, cache page resources, and reduce browser requests for resources.
  • Minimize resource-blocking rendering: CSS and JavaScript compression, merging, cascading, inlining, and more.
  • Optimize the picture. Convert the image format to JPG or WEBP, etc. Reduce the size of the image to speed up the request.
  • Rewrite HTML, compress whitespace, remove comments, etc. Reduce HTML size and speed things up.
  • Use preconnect to establish a link to the server as quickly as possible, and use dns-prefetch to perform a DNS lookup as quickly as possible.
  • Use a CDN to speed up requests.

Optimize resources for blocked rendering​

JavaScript and CSS are resources that can block page rendering. It is necessary to compress CSS and JavaScript files as much as possible, delay loading JavaScript that is not needed for the first screen, and inline key CSS to reduce the blocking time.

Optimize resource load times​

The resources we just mentioned above, if rendered on the first screen, the time it takes to load these elements will directly affect the LCP.

  • <img> Element
  • An element embedded within <image> an <svg> element
  • <video> Element
  • Load the elements of the background image through the URL () function.
  • A block-level element that contains text nodes or children of other inline text elements.

You can use the following means to optimize:

  • Optimize the picture. Convert the image format to JPG or WEBP, etc., to reduce the size of the image.
  • Preload important resources, such as adding the rel = "preload" attribute to the style tag.
  • Use Gzip and Brotli to compress page resources and reduce transfer time.
  • Use the service worker cache resource.

Server-side rendering​

Using server-side rendering can ensure that the page content is presented on the server first, which can effectively improve LCP. However, compared with client-side rendering, the disadvantage is that it will increase the page size and thus affect TTFB. Server-side rendering needs to wait for all JS to be executed before the corresponding user input, which will make the interactive experience worse.

LCP algorithm update​

JS probe version 3.2.2 changes the algorithm of the first screen to the time-consuming of LCP, because LCP is more in line with the requirements of business and user experience for the first screen.

The original first screen algorithm is to calculate the loading of all elements in the first screen. If you still want to use this algorithm, you can close the LCP in the probe.

3.2.2 and above probes attempt to use LCP (largest contentful paint) to calculate the first screen by default.

How to Disable LCP First Screen Calculation​

Turn off the LCP algorithm to calculate the first screen through the probe configuration lcp_enable=false.

{
    ...,
    lcp_enable: false
    ...
}

How to Stop LCP PerformanceObserver Early​

Each time a larger area is rendered, the LCP may fire multiple times during the page load process. The probe supports stopping monitoring LCP trigger at a certain time point and recording this time point. If no LCP trigger is obtained before this time point or the LCP algorithm is disabled, the stopped time point is used as the first screen time.

if (window.TINGYUN && window.TINGYUN.stopLCPObserver) {
  window.TINGYUN.stopLCPObserver();
}