Largest Contentful Paint (LCP)

What is the Largest Contentful Paint (LCP)?

The largest Contentful paint is a largest content element that has content of the type image, video or text that has been painted on the visible part of the screen. The LCP timing indicates the time in milliseconds between requesting the page and when the largest contentful (DOM) element is displayed on the visible part of the web page (above the fold).

History of the Largest Contentful Paint

When you think about it, the LCP might seem a trivial metric to represent the the loading part of the Core Web Vitals. Why not measure loading speed as 'the time it takes for the page to load'.

That is because it is hard (or even impossible) in most modern website to define when the page has loaded. More and more websites use techniques such as lazy loading or progressive loading where the page basically can keep loading forever. That means page speed cannot be measured by a single point in time.

There are several moments when loading the page that can cause a user to experience the page as fast or slow. For example the server delay (Time to First Byte), the first time that content is visible (First Contentful Paint), the time that the visible viewport may seem complete (Largest Contentful Paint) and when the page becomes interactive (when clicking on a link becomes possible) are all points during the loading process where the site may seem slow or fast!

The Largest Contentful Paint (LCP) is chosen because it focused on a visitor's user experience. When the LCP occurs you can assume that a visitor thinks the page is finished loading (even if behind-the-scenes processes are still running). The LCP was created to answer the question: 'When is the content of a page visible?'. This is why LCP is recognized as a core indicator of user-centric performance.

Which Elements are considered LCP elements?

Not all elements are considered as an LCP element. The largest Contentful has to be painted on the visible part of the screen (the viewport) before the user has interacted with the page.

The element has to be an image (normal image or background image), a video (the poster image or first video frame, whichever happens earlier, is used) or a text element (in case of inline text elements like <span> the nearest block level element <div> or <p> is considered).

Currently, certain elements are excluded as LCP candidates, such as elements hidden with opacity: 0, images that match 100% of the the viewport size (cover images), and placeholders (low-entropy images). Keep in mind, this can change as the spec evolves!

Getting technical: measuring LCP Element Size

LCP identifies the largest visible content element in the viewport and calculates its size based on a set of precise rules. These rules ensure consistency and accuracy, even in complex layouts:.

• ViewPort only - Only the visible part of the page is considered. If an element is only partially in the visible viewport the considered size will be clipped.
• No Border, padding or margin. For all elements, text and image borders, padding and margins are completely ignored.
• Text size - text elements size get's reported as the smallest rectangle that can be painted around the text node(s).
• Image size - for images the smallest of the intrinsic dimensions (the original width and height) and the display size (the size on screen) is used to calculate LCP element size
• First size counts - when layout changes or when an element size changes only the first size is considered for the LCP
• Removed elements are included - when an element is removed from the DOM it is still an LCP candidate

Dynamic Nature of LCP

Largest Contentful Paint (LCP) is a dynamic metric. While rendering can be complex and occur in stages, it's normal for the LCP element to change during page load. Before the first user interaction, the browser's performance observer identifies all element that could be considered LCP candidates. These candidates include images, text blocks, and videos. If an element is both visible within the viewport and larger than the previously identified LCP element, it becomes the new LCP.

Take-aways from LCP field data: At CoreDash we track millions of LCP entries per day. As it turn out for mobile pageviews the LCP element is often a text based element, either a paragraph or a heading. On average (or at the 75th percentile to be precise) the Core Web Vitals will pass when the LCP element is a text node or even a normal image. When the LCP element is a background image, video (or a lazy loaded image) the Core Web Vitals tend to fail.

The importance of the LCP

The Largest Contentful Paint is one of the 3 Core Web Vitals. As a Core Web Vitals the Largest Contentful Paint is important for SEO but more importantly the LCP is important for UX. Visitors do not like to be kept waiting and with more and more mobile traffic (that tends to be slower them desktop traffic) optimizing the Largest Contentful Paint seems to make a lot of sense.

• For SEO. Yes, Google focuses on serving the best pages in its search results. LCP is part of Google's Core Web Vitals. Google clearly states that site speed is a factor in search results.
• For Visitors: According to recent research by Google itself, the probability of a user leaving the site doubles with a loading time of 3 seconds. You will probably recognize that for yourself. While surfing the internet almost nothing seems as annoying as a slow loading website. Chances are that you will quickly leave a slow loading page.
• Other reasons: Page Speed is a factor in your Google Ad Score. This means you can buy your ads cheaper and finally passing the Core Web Vitals is one one of the prerequisites for Google's top Story box. 

A fast LCP gives the visitor the idea that the page loads quickly. As a result, a visitor is less likely to navigate away from the page.

What is a good LCP score?

To pass the Core Web Vitals for the Largest Contentful Paint at least 75% of your visitors need to have a 'good' LCP score. A LCP score between 0 and 2.5 seconds is considered a good LCP score, a LCP score between 2.5 and 4 seconds needs improvement and a LCP score above 4 seconds is considered poor.

How to measure the Largest Contentful Paint?

The Largest Contentful Paint (LCP) can be measured with pure JavaScript, Lab data and Field tools. Both have their advantages and disadvantages. 

Measure the Largest Contentful Paint with JavaScript

To measure Largest Contentful Paint (LCP) using JavaScript, the Performance Observer API offers a quick solution. The following code snippet demonstrates how to capture the LCP timing and element information:

new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    console.log('LCP value: ', lcpEntry.startTime);
    console.log('LCP element: ', lcpEntry.element, lcpEntry.url);
  }).observe({ type: 'largest-contentful-paint', buffered: true });

This snippet tracks the LCP entry as it’s reported, displaying its timestamp and element details in the console. For more extensive insights, consider using the Web Vitals Library. This library provides tools for measuring Core Web Vitals across devices and platforms and includes additional data such as LCP attribution information, which can be valuable for targeted optimization.

Measure Largest Contentful Paint (LCP) in Chrome DevTools

1. Open Chrome DevTools by pressing Ctrl+Shift+I (or Cmd+Option+I on Mac).
2. Navigate to the Performance tab.
3. Reload the page to view the Core Web Vitals.

The devtools performance tab now displays information about Core Web Vitals, including the timing and element of the Largest Contentful Paint.

Measure the Largest Contentful Paint with Lab tools

Lab tools can measure the Largest Contentful Paint. Since the Core Web Vitals represent real life (or field) aspects of user experience lighthouse or lab results are not used by Google to measure the largest contentful paint. That means you should not use them either to determine if you are passing the Core Web Vitals! 

Lab tools are best for comparing "before and after" snapshots of your LCP after making performance tweaks. Their strength lies in consistency. Browser factors like RTT (network speed and round trip time), CPU power, and other browser factors are standardized, so lab results are always comparable.

Some well know online lab tests can be found here:

• Lighthouse - LightHouse can also be used standalone (through NodeJS) for automated testing or in chrome devtools for a manual run.
• PageSpeed Insights - PageSpeed insights is a google-hosted tool that will give you the CrUX and LightHouse results for any webpage.
• WebPageTest - WebPageTest is probably the oldest and best know PageSpeed testing tool there is. It will give you pagespeed insights from your location of choice.

Measure the Largest Contentful Paint with Field data

Field data is the only data that actually matters for the Largest Contention Paint. Google uses real user metrics from their CrUX dataset to determine whether of not you pass or fail the Core Web Vitals.

The CrUX dataset is highly anonymized. This means that the CrUX data does not give you much detail on a page or device level. That is Why RUM monitoring is a great alternative for the CrUX data.

• PageSpeed Insights - PageSpeed insights can be used for both CrUX and LightHouse results for any webpage.
• Looker Studio - With the Looker Studio report you can connect to Google BigQuery and get a more detailed and historic overview of the Largest Contentful Paint CrUX real user data.
• CoreDash - CoreDash is Real User Metric (RUM) tracker that will give you complete unfiltered and real-time information about the Largest Contentful Paint

Break down the LCP into it's sub components

According to Google the Largest Contentful Paint can be broken down into 4 sub parts. 

Here's a breakdown of key areas to focus on:

1. Time to first byte - LCP is directly affected by TTFB, which measures the time it takes for the browser to receive the first byte of data from your server.
2. Resource load delay - Minimize render-blocking resources like styles and scripts that delay the painting of content. Ensure the LCP element is prioritized during page load..
   
3. Resource load time - Optimize the LCP element (often an image) for faster loading by using modern image formats and responsive images.
   
4. Render delay - Even with optimized resources, the browser might be occupied with other tasks, especially JavaScript processing, which can delay LCP rendering.

Each of those focus areas can be optimized to improve the Largest Contentful Paint. To understand the steps you need to take please read Fix & Identify Largest Contentful Paint (LCP) issues

Improving the Largest Contentful Paint

Optimizing Largest Contentful Paint (LCP) requires addressing several factors that can slow down the rendering of the largest content element on your page. During page load different resources compete for  network bandwidth and CPU processing power. Basically anything that happens before the LCP element is painted, whether network-related or CPU-intensive, can impact the LCP score