Measuring and optimizing LCP - a core web vital metric

⏳ 9 min read
📝 1441 words
Measuring and optimizing LCP - a core web vital metric

Measuring and optimizing LCP - a core web vital metric

LCP is one of the three Core Web Vitals metrics, and it represents how quickly the main content of a web page is loaded. To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for atleast 75% of page visits.

A number of factors can affect how quickly the browser can load and render a web page, and delays across any of them can a significant impact on LCP.

It's rare that a quick fix to single part of a page will result in a meaningful improvement to LCP. To improve LCP, you have to look at the entire loading process and make sure every step along the way is optimized.

What is LCP ?

Marks the point in the page load timeline when the page's important content has likely loaded. The assumption is that the important element of the page is the largest one visible in the user's viewport. If elements are rendered both above and below the fold, only the visible part is considered relevant.

It measures how long it takes, until the browser renders the largest amount of content to the screen.

The largest content can be ad, or banner. (biggest in dimensions taking the maximum area)

User can see the content they are looking for and believes the page is nearly done.

For example, if a news article is loading, the LCP might be the featured image or the main headline. The faster these elements appear, the better the user experience.

What elements are considered ?

  • Image elements - <img> elements (the first frame presentation time) is used for animated content such as GIFs or animated PNGs)
  • <image> elements inside an <svg> element, <svg> elements are currently not covered by LCP.
  • Thumbnail graphics of video elements - <video> elements (the poster image load time or first frame presentation time for videos is used - whichever is earlier).
  • Background images with css - An element with a background image loaded using the url() function (as opposed to a CSS gradient).
  • Text-heavy block level elements - Block-level elements containing text nodes or other inline-level text element children.like paragraphs (<p>), headings (<h1>, <h2>) or lists (<ol>, <ul>)

How is an element's size determined ?

The size of the element reported for LCP is typically the size that's visible to the user within the viewport. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions don't count toward the elements size.

For Image elements that have been resized from their intrinsic size, the size that gets reported is either the visible size or the intrinsic size, whichever is smaller.

For text elements, LCP considers only the smallest rectangle that can contain all text nodes.

For all elements, LCP doen't consider margins, paddings or borders applied using CSS.

LCP Breakdown:

Every page's LCP consists of these four subparts, There's no gap or overlap between them and they add up to the full LCP time.

  1. TTFB (Time to First Byte)
  2. Resource Load Delay
  3. Resource Load Time
  4. Render Delay

What is a good LCP score ?

Good → below 2.5s

Needs Improvement → above 2.5s and below 4s

Poor → greater than 4.0s

How to measure LCP ?

LCP can be measured in a number of tools and not all of these measure LCP in the same way. To understand LCP of real users, we should look at what real users are experiencing, rather than what a lab-based tool like Lighthouse or local testing shows. These lab based tools can give a wealth of information to explain and help you improve LCP, but be aware that lab tests alone may not be entirely representative of what your actual users experience.

Lab tools:

  • chrome devtools
  • Lighthouse
  • pagespeed insights
  • WebPageTest

Real users data /Field tools:

  • RUM (Real user monitoring) tools installed on a site.
  • Chrome User Experience Report (CrUX) - which collects anonymous data from real Chrome users for millions of websites.
  • Pagespeed Insights - provides access to CrUX data too.
  • Search Console (core web vitals report)
  • web-vitals Javascript Library

If CrUX data is available for your website, always concentrate on the real user data first.

Quick Tip: To discover what is considered LCP on a page, in DevTools you can hover over the LCP badge under "Timings" in the Performance Panel.

Best Practices

  1. Improve TTFB: get the first byte as soon as possible
  2. Reduce render-blocking CSS / JS : inline critical CSS
  3. Prioritize HTTP requests: defer, async, preload
  4. Defer rendering with content-visibility: auto.
  5. Pick formats wisely: AVIF/Web P instead of JPEG/PNG
  6. Reduce large payload for images, videos (srcset, picture)
  7. Striking the balance: understanding the tradeoffs between SSR & CSR for optimal performance.

Improving LCP Score

The paint time for Largest Contentful Paint consists of...

  • ...the server response time
  • ...the time it takes to load resources like images and videos.
  • ...the time caused by render-blocking resources.
  • ...the javascript bootup time using Client-side rendering.

You should work on these four topics, if you want to improve largest contentful paint. Take a look at your critical rendering path, reduce the amount and size of resources or compress images with tools like TinyPNG.

Four Steps to Optimize LCP (The Recipe)

  1. Load LCP Resource Early:

Ensure the resource that makes up your LCP element starts loading as soon as possible.

  1. Render Quickly:

Make sure the LCP element can be rendered by the browser as soon as its resource finishes loading.

  1. Reduce Resource Load Time:

Minimize the time it takes to load the LCP resource without compromising quality.

  1. Deliver HTML Fast:

Speed up the initial delivery of the HTML document to the browser.

Here is a further breakdown on how you can do that:

Key Optimization Techniques

  • Use Modern Image Formats:

I wrote an article which was all about Optimizing Images

Employ formats like WebP and AVIF to improve image loading performance.

  • Serve Responsive Images:

    Adapt image sizes based on the user's device to save bandwidth and improve load times.

  • Prioritize Essential Images:

    Use preload and fetchpriority tags to signal to the browser that key images are critical and should be loaded sooner.

  • Implement Caching:

    Store copies of website files in a cache to enable faster access for subsequent users, significantly reducing load times. Caching stores copies of your site's files, reducing the time it takes to load content for returning visitors. Setup browser caching and consider using a content delivery network (CDN) like Cloudfront, or Cloudflare to deliver cached content from servers to your site visitors.

  • Avoid Request Chains:

    Steer clear of complex dependencies that can delay the loading of critical resources, including images.

  • Reduce Network Payload:

    Optimize the size of data transferred over the network to speed up loading.

  • Optimize Server Performance:

    Improve server response times and efficiency. A slow server can delay your entire page load. Optimize your server based on server access log information, switch to a faster hosting provider and minimize the use of slow plugins or scripts.

  • Optimize Front-end Resources:

    Minimize render-blocking JavaScript and CSS that can delay the rendering of the LCP element.

  • Optimize Critical Rendering Elements:

    Large images often slow down page load time. Compress your images, use modern formats like WebP and consider lazy loading for images below the fold.

Measure LCP in Javascript

To measure LCP in Javascript, you can use the Largest Contentful Paint API

This following example shows how to create a PerformanceObserver that listens for largest-contentful-paint entries and logs them to the console.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate', entry.startTime, entry);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true})

web-vitals Javascript library

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available
onLCP(console.log);

Ref

Some good resources to refer