Largest Contentful Paint (LCP)

What is the Largest Contentful Paint (LCP)?

The largest Contentful paint is a largest single element that has content of the type image 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).

Not all elements are considered as an LCP element. 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).

At this point (this may change at any time!) elements hidden with opacity 0, images that have the same size as the viewport (cover images) and placeholders (images with low entropy) are not considered as a LCP element.

Why should I worry about the Largest Contentful Paint (LCP)?

The LCP is a fairly tricky and elusive metric. There is not a standard, easy way to improve the LCP. Why would you focus on the LCP and not another metric like the total page load time?

The LCP is important because 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. The first moment is the network and server delay. The second moment is waiting for the visible content and the last moment is waiting for the page to become interactive (for example, when clicking on a link becomes possible).

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 (while that may not be the case at all).The LCP was created to answer the question: ' When is the content of a page visible?'.

The LCP is currently the ultimate metric that is purely focused on a visitor's user experience. When the LCP event is sent, you can assume that a visitor thinks the page is finished (while that may not be the case at all).

Is the LCP important to search engines like Google?

Yes, Google focuses on serving the best pages in it's search results. LCP is part of the Google's Core Web Vitals. Google clearly states that site speed is a factor in search results.

Why is the largest contentful paint (LCP) important for visitors?

On the internet, speed matters a lot. 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.

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?

A LCP score between a 0 and 2.5 seconds is considered a good LCP score.
A LCP score is between 2.5 and 4 seconds needs improvement.
A LCP score above 4 seconds is considered poor.

To pass the Core Web Vitals for the Largest Contentful Paint at least 75% of your visitors need to have a 'good' LCP score.

How to measure the Largest Contentful Paint?

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

Measure the Largest Contentful Paint with Lab tools

Lab tools can measure the Largest Contentful Paint. The advantage of using lab tool is that the results are always measured the same way. They are easy to compare.

• Chrome DevTools - In chrome devtools you can easily access lighthouse and run a lighthouse audit. This will tell you the LCP under specific emulated conditions.
• Lighthouse - LightHouse can also be used standalone (through NodeJS) and can be used for automated testing
• PageSpeed Insights - PageSpeed insights is a google-hosted tool that will give your the CrUX and LightHouse results for any webpage.
• WebPageTest - WebPageTest is probably the oldest and best know PageSpeed teting 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.
• DataStudio - With the DataStudio 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

How the Largest Contentful Paints element size is measured

Since the Largest Contentful Paint element is the largest element in the visible viewport it is good to consider how size is determined.

• 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 the LCP element changes

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 elements 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.

How to improve the LCP

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

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 order - 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. Rendering - 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