Largest Contentful Paint failed? The ultimate 2024 checklist to fix it

Core Web Vitals failed due to the Largest Contentful Paint?

Did you get a warning that your Core Web Vitals are failing due to a slow Largest Contentful Paint? We're happy to help you get (back) into the green numbers! First, let us explain what the LCP is. Once you understand, we also give you a checklist full of tips to improve the Largest Contentful Paint.

LCP, the most failed Core Web Vitals metric

You're not alone, did you know that the LCP is actually the metric most origins fail for? Most people think this is actually one of the easier Core Web Vitals metrics, but more sites are passing for the newest metric: Interaction to Next Paint.

Source: HTTP Archive

What is the Largest Contentful Paint?

Largest Contentful Paint (LCP) is a crucial web performance metric that measures how quickly the main content of a website becomes visible to users. Specifically, it measures the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

As one of Google's Core Web Vitals, LCP is not just a technical metric—it directly impacts user experience and can influence your website's search engine rankings/ SEO.

There are a lot of misconceptions about the Largest Content Paint, make sure to read that article as well.

Why is LCP Important?

Passing for your LCP is important for multiple reasons:

1. User Experience: A fast LCP ensures that visitors quickly see the main content, leading to a better first impression and overall user satisfaction.
2. SEO Impact: As a Core Web Vital, LCP is a ranking factor in Google's search algorithm. Better LCP scores can potentially improve your search rankings.
3. Conversion Rates: Faster-loading pages often correlate with higher conversion rates, making LCP optimization crucial for business success.

Business metrics and Largest Contentful Paint

There are a lot of case studies out there that give us an idea of what the business impact can be when we improve the LCP. On of the most well-known case studies is the one from Vodafone, where they improved their LCP with 31% and a result increased their sales with 8%. But it's more than that. Soft business metrics as bounce rate can also be positively affected by optimizing the LCP.

In a 2021 case study by Google, Renault was able to optimize the LCP with 1 second?! As a result they saw a reduce in bounce rate by 14% and boost conversions by 13%.

In a more recent case study by Shopify, the brand Carpe also worked on optimizing the LCP, this time by 52%. This had a positive effect on some of their business metrics:

• Conversion rate increased by 5% and traffic by 10%, leading to a total 15% increase in revenue.

Carpe also optimized their Cumulative Layout Shift, which might have affected these KPI's as well.

What is measured as the Largest Contentful Paint?

LCP reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. The types of elements considered for Largest Contentful Paint are:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements (the poster image is used)
• Background images loaded via the url() function (as opposed to CSS gradients)
• Block-level elements containing text nodes or other inline-level text elements

Basically, LCP measures how long it takes for the largest above-the-fold content to be rendered on the screen.

Looking at the image above you are able to conclude that it's not just one element that can be your LCP, because everyone enters your website under different circumstances. When an image is still loading in the background but a piece of text is visible, if the user touches the screen before the image loads, the text becomes the LCP. But you can also think about viewports, one screen is not the other. One might be bigger, smaller or even a flip phone, for each screen the biggest element will differ.

Use case: we've written a whole use case on how to fix your LCP if it's the cookie notice, so that you're showing the most valuable content to your users first.

What is a good LCP score?

To provide a good user experience, sites should aim to have an LCP of 2.5 seconds or less for at least 75% of page loads. LCP under 4 seconds needs improvement and over 4 seconds is poor.

If you get the message that your LCP failed in Core Web Vitals from Google Search Console, this means it took your real users longer then 2.5 seconds to feel like your site was loaded.

How to measure LCP?

LCP can be measured both in a lab environment and in the field. It might be worth it to read this article that explains the difference between the field data and lab data.

With RUMvision you're able to figure out what was the LCP for all users that enter your website. You can filters by a lot of things:

• Page template
• Navigation type
• Cache hit
• Internet speed
• Device memory
• The element (as shown in the image)

More info about our filters.

This is all valuable data that you're able to collect in real-time. To help you debug and create a faster website for your users. You're even able to get alerted if your LCP regressed. When you rely on data from the Chrome User Experience Report (and Search Console) you're always looking at aggregrated data over the last 28 days, meaning that something that is impacting your site today might be visible 28 days later.

LCP sub-parts

The LCP exists of 4 sub-parts. Each has a different approach of how to optimize it. Google wrote a full documentation about it.

1. Time to First Byte: The duration between the initial request for the HTML document and the moment the first byte of the response is received from the server.
2. Resource load delay: The interval between when the HTML starts loading and when the browser identifies and begins fetching the LCP image.
3. Resource load time: The period required for the browser to completely download the LCP image from the server.
4. Element render delay: The time taken by the browser to process and display the LCP image or other LCP element after it has been fully downloaded.

With our LCP breakdown you're able to see which sub-part needs the most in terms of web performance optimization.

Debugging LCP with DevTools

Since Google Chrome version 129 you're able to debug sub-parts in the performance panel of your DevTool, keep in mind that this data only reflects what you're experiencing and not your actual users. This is the reason why they also added field data as part of the renewed performance panel.

How to fix Largest Contentful Paint

Here are actionable tips to optimize LCP, and no, just improving images is not the magical fix... Sorry! When you want to optimize your Largest Contentful Paint you can go over this checklist. Personally I'd always recommend looking at sub-part data first figure out what's the most effective optimization approach.

Don't forget to look at TTFB

As you may have noticed in the LCP sub-parts, Time to First Byte (TTFB) is a vital performance metric to consider when trying to improve your LCP. This makes perfect sense because if your TTFB is 1 second, that delay carries over to your First Contentful Paint (FCP) and subsequently impacts your LCP.

Here are some ways to improve your TTFB:

• TTFB can often be improved by upgrading your web hosting. Check with your hosting provider to see if they spot any opportunities for improvement.
• For international sites, consider using a Content Delivery Network (CDN) to reduce TTFB by serving content from servers closer to your users.
• Caching is amazing! The more content that comes from a cache, the faster the experience will be for your users. If your TTFB is high, it could be that you have a lot of first-time visitors who aren't benefiting from caching, or it could indicate that your caching strategy needs optimization. It could even mean that you have a lot of unnecessary cache misses because you haven't updated your caching rules to account for new ads or content. This is often one of the first quickwins when using RUMvision, as you can spot it within a day!
• Minimizing redirects and DNS lookup times can significantly improve TTFB. Keep in mind that ads often come with redirects, which can negatively impact performance.

In this screenshot by Google you can see that it's always the TTFB taking up the biggest chunk of time.

Since the TTFB is not part of DevTools you might want to take a look at our Free Core Web Vitals tool to have an idea of what your websites field data is for this metric. To get an idea of your own sub-parts we recommend using RUMvision.

Surprise: Image compression alone won't guarantee a fast LCP

While optimizing images is always a good practice, the download size of the LCP image itself is rarely the bottleneck. Render-blocking resources, server delays, and resource load delays are often bigger opportunities.

That said, applying appropriate compression and using modern formats are still quick wins. Just don't expect them to be a silver bullet for your LCP. Focus on optimizing all parts of the rendering process for the most significant impact.

"I've optimized my image, I'm done all/the main thing I can do to make this better" is a narrative we'd like to change.

Barry Pollard, Web Performance developer advocate at Google

Conclusion

By implementing these frontend optimizations, you can significantly improve LCP and deliver content to users faster. Remember, LCP is just one piece of the performance puzzle, but it's a critical one for users' perceived loading experience.

Ultimately, providing a fast, engaging experience requires a performance-first mindset and a commitment to continuous monitoring and optimization. By leveraging tools like RUMvision and following best practices for LCP, you can ensure your site is always fast, resilient, and delightful for your users.

Karlijn Löwik

General Director / CEO

• {label:mailto}
• linkedin-square