Largest Contentful Paint Guide

Updated: April 8, 2023.

Here is a full guide to Largest Contentful Paint with optimization and measurement tips.

The Largest Contentful Paint (LCP) is a crucial user-centric metric used by Google to measure a website’s perceived loading speed. LCP is one of three Core Web Vitals metrics (the other two are Cumulative Layout Shift and First Input Delay) which are part of the metrics that Google uses to measure and evaluate page experience.

In this guide to Largest Contentful Paint, you will learn what LCP is and how it works, why LCP is important, what influences the LCP score of a site, how to measure LCP, how to optimize LCP, and more.

What is the Largest Contentful Paint?

The Largest Contentful Paint (LCP) metric reports the render time for the largest text or image block within the viewport before there is any interaction from the user (like scrolling or tapping on a button).

• Ideally, Largest Contentful Paint needs to occur within the first 2.5 seconds for your website to rate high on the web experience. 
• The element can be anything, an image, text, video, or animation.
• One of its main distinctive features is that it is the content that appears above the fold of a webpage. 
• The faster it loads, the less time your user will have to wait, and the happier Google will be with your website.
• If the most sizeable elements of your webpage take longer to load and the user is sitting staring at a large blank section on the screen for several seconds, your LCP score would be low, and you’d be punished by algorithmic overlords.

Here are the types of elements that Google may take into consideration when measuring and evaluating LCP:

• Text Elements “inline”, “block”
• Image Elements with CSS Background Property
• Image Elements in the <svg> tag.
• Image Elements
• Video elements

Examples of Largest Contentful Paint (LCP)

Here are a few examples of what the Largest Contentful Paint on a webpage is and how it affects the LCP metric.

Let’s start with the examples from my site. Here is the LCP for my homepage and the SEO blog page.

As you can see, in the first example this is the largest block of text while on the second screenshot it is the featured image of the latest post.

Here is the screenshot from the Google search results and the Largest Contentful Paint.

Here the Largest Contentful Paint is the description of the first result.

How does it look in the case of Wikipedia? Let’s see.

For Wikipedia, the largest piece of content is simply the biggest block of text that you see, and it often loads within the first second. The time delay between the FCP (First Contentful Paint) and LCP is minimal, so the website gets a golden LCP star.

Let’s now take a look at the Largest Contentful Paint that is not a block of text but simply part of the website’s layout.

And let’s take a look at the Google Search Central homepage and its Largest Contentful Paint.

Google also provides a bunch of examples of LCP in its guide to LCP.

How To Measure Largest Contentful Paint

The Largest Contentful Paint of any website can be measured in the field to ensure the changes support users’ device capabilities and their network conditions. It can also be measured in the lab because testing performance in the lab is essential when developing new features before they are released in production. 

Multiple tools can be used for this, including the following: 

Lab tools to measure Largest Contentful Paint

Here are the lab tools to use to measure LCP.

• Chrome DevTools. You will have a lot of fun measuring Core Web Vitals using Chrome DevTools. I strongly recommend this method if you want better understand how Core Web Vitals work and how they are measure.

• Lighthouse. This tool shows the data a bit similar to what you will get from Google PageSpeed Insights except that here you have lat data only.

• WebPageTest. This is a bit more advanced and nerdy tool that you can also use to measure Core Web Vitals, LCP including.

⚡ Check my full list of tools to measure Core Web Vitals.

Field tools to measure Largest Contenful Paint

And here are the field tools to use to measure LCP.

• Chrome User Experience Report (CrUX)
• Google PageSpeed Insights. This is probably the first-hand tool to use to test the performance and speed of a website.

• Google Search Console (the Core Web Vitals report). The Core Web Vitals report will provide you with real-world data that comes from actual users of your website. This is the most reliable way to measure LCP.

• web-vitals JavaScript library If you have some developing skills, this is also a great way to go.

Measuring Largest Contentful Paint in JavaScript

You can also measure LCP by using JavaScript with the help of the Largest Contentful Paint API. 

It should be noted that the code given below only shows how to how to log Largest Contentful Paint entries to the console. If you are looking for more control with the results you get, it’s best to use the following code from the Web Vitals JavaScript library:

Largest Contentful Paint vs First Contentful Paint

Largest Contentful Paint (LCP) measures the time it takes for the largest element of a page to appear (this includes all visuals on the webpage without having to scroll down). On the other hand, First Contentful Paint (FCP) lets you know the duration of the first text or image-based element (also known as first paint) to appear in the viewport.

While traditionally, the performance was measured by the overall loading speed of a website, now, Google wants you to up the ante. This is where both LCP and FCP (amongst others) come in.

You have probably noticed that when visiting a site it doesn’t just appear all at once – certain elements appear sooner, while others take longer to appear on the screen. In an ideal situation, the FCP and LCP should be similar, with the former being as low as possible. 

Google PageSpeed Insights is an excellent tool that allows you to test the speeds of both the FCP and LCP of your website so that you know which elements of the webpage outweigh others, and what assets on the page have been minified. This way, you’ll know the largest element on your web page and can work to optimize it.

Once you’ve entered the website’s URL, it will display the average loading times that have been collected during the past 28 days. The speed score is based on the lab data analyzed by Lighthouse.

If you’re interested in the result of the current PageSpeed Insights test, the Lab Data section displays your website’s performance in the current test. By improving your FCP and LCP metrics, you can vastly improve the amount of time it takes to load your page. This gets you more than a pat on the head from Google, and your chances of ranking higher are improved. 

While FCP is an important metric, a fast LCP keeps user irritation at a minimum and significantly improves UX. 

The reason why FCP is not considered a critical metric is that it simply measures the moment the page starts to load, which does not necessarily mean that the largest element of a page or the main content have become visible to the visitor. 

How to improve Largest Contentful Paint

The Largest Contentful Paint (LCP) is part of three Core Web Vitals (the other two being First Input Delay and Cumulative Layout Shift) metrics which with the upcoming Google page experience update will be used by Google to rank websites. Other Google page experience signals include mobile-friendly, HTTPS, and intrusive interstitials guidelines.

⚡ Check my guide to the Google page experience to learn more.

Each of the components of the Core Web Vitals represents an area of user experience, and the weightage of each component indicates its importance for your website’s overall performance score. LCP basically represents a 25% weighting on performance scores in the latest version of Lighthouse. In non-numeric terms, it’s a huge deal.

So, while there were other metrics used in the past – like the First Contentful Paint or ‘visually complete bookend,’ the Largest Contentful Paint is now the most important page load metric that you should focus on, especially when it comes to determining and improving the performance score of your website. 

Let’s now see what brings down the score for the LCP metric, so you can figure out how to improve the LCP score.

• The server your website is hosted on takes a painfully long time to respond to user requests.
• Your largest content elements take more time to render because they are bogged down by clunky CSS and JavaScript elements.
• The largest content resources are too heavy (for the device, browser, or the internet speed of your user) and take more time to load.
• Un-optimized client-side rendering.

Fortunately, there are several solutions that offer a way around the factors negatively affecting your LCP and help you improve the score. And Google has also done a great job providing detailed guidelines on how you can optimize LCP.

Improve server response times

If your server is simply taking too long to respond, no amount of optimization on the website and content side is going to make a significant difference to your LCP time. So it’s important to fix this root cause first.

Here is what you can do:

• Optimize your server load times. Take a deep look at your server-side code, especially if you are dynamically creating webpages. Optimizing the server-side code can cut the server response time significantly.

• Think global and consider investing in a Content Delivery Network (CDN). A CDN will let you cover the geographic concentrations of your user, so they don’t face delays simply because they are too far away (physically) from your home servers.
• Use cache. For mostly static HTML, look into server caching. It instigates faster load times and consequently, improves the LCP score.

• Use a service worker. You can also leverage the browser’s service worker to cache some or all of your HTML content, so every bit of data is not fetched from the server every time the user visits your website.
• Use Preconnect. Another way to improve LCP is by using rel="preconnect" which will help streamline the downloading process. Adding an HTML tag can help speed up the download process by helping the browser connect with the third party quickly.

<link rel="preconnect" href="https://example.com">

• You can also use dns-prefetch to help DNS lookups resolve faster. The best way is to use dns-prefetch as a fallback in case a browser does not support preconnect.

<head>
…
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">
</head>

Minimize blocking in CSS and JavaScript

Before a website loads on a browser and different types of content (images, text, videos, etc.) are loaded, the browser needs to reconcile a few things. Certain elements (resources) act as blockers and delay the “parsing” process, which delays the LCP, thereby resulting in a bad LCP score.

A few ways to fix this are:

• Minify CSS. You can do that by removing indentations, comments, and spaces that are helpful for programmers but not browsers.

• Remove unused CSS. You can also remove unused CSS to make the code lighter and LCP faster.

• Defer non-critical CSS.
• Inline critical CSS. And the core CSS that you can’t dispense with might load a few microseconds faster when it’s in-lined.
• Minify and compress JavaScript files. Some of the same techniques can be applied to the JavaScript code that’s slowing down your LCP.

• Defer unused JavaScript.
• Minimize unused polyfills.

Boost resource load time

In a lot of cases, the code and hardware in the background of the website are not the problem, and the issue lies with the resource (that’s taking more time to load) itself.

There are a few ways to boost the resourced load time:

• Optimize and compress images. For instance, if you’re feeling smug because your web page is already optimized for mobile devices and sports those crisp 100kb images, you will need to bump it up to 800kb JPEGs for desktop users, or vice versa. Doing this alone can improve your LCP by up to 60%, or in layman’s terms, make your entire site several seconds faster.

• Preload important resources. Pre-loading certain resources like images and videos and accompanying elements like fonts can cut down the LCP time.
• Compress text files. Text-heavy webpages can lose some weight with the proper compression algorithm.
• Use adaptive serving. Leverage adaptive serving, and create different versions of your resources to display, based on the device or network quality that your user has at their disposal.
• Use a service worker to cache assets. Service workers can be used just as effectively for resources as they are used for HTML.

Fix client-side rendering

If your website is using client-side Javascript logic, it needs to do it right because otherwise, the rendering can get trampled “in translation.” Here are a few things you can do.

• Minimize critical JavaScript. Make your JavaScript as light as possible. 
• Use server-side rendering. Focus more on server-side rendering than client-side. If you can control most of the resources on your end, it would be better for your LCP.
• Use pre-rendering. Another tricky solution is pre-rendering, which requires you to leverage a headless browser to create static HTML. This allows you to cut the build-and-ship time.

Common low Largest Contentful Paint score culprits & Fixes

I have analyzed quite a few different sites to find the most common causes of the bad Largest Contentful Paint Score. I have also taken a deep look into WordPress websites and how you can optimize the LCP and other Core Web Vitals metrics for those sites. Here are my findings!

Largest Contentful Paint and the cookie banner

The reason the cookie banner, in some cases, is considered an LCP element and that’s because the “largest” element on a website is not based on the download size, but rather, on the surface area in the layout. Since the cookie banner is loaded when the HTML is almost fully loaded and happens by default whenever you click on a website, it is also included in the LCP metrics. 

This also places the cookie banner at the end of the page load. As mentioned, if a page loads before 2.5 seconds, you’re fine. If not, the cookie banner could be the culprit. Since the cookie banner is another large element of a website and is part of the LCP for certain websites (especially on mobile devices), you should configure it accordingly.

You can tweak the cookie banner by doing the following: 

• Assign a fixed height to the cookie message
• Don’t apply Google fonts to the cookie message
• Defer the JavaScript so they are not included in Web Vitals
• Shorten the cookie message

You should not deactivate the cookie blocker along with the cookie banner. 

Largest Contentful Paint and the background Image

CSS background images are especially useful because it is possible to add other elements on top of an image, such as CTAs, text, etc. but they can also be the cause of slow LCP.

Some good practices that can help you improve the LCP time are:

• Make sure there are fewer or no background image-dependant elements that rely on the URL function. Opt instead for a CSS gradient.
• In order to ensure reduced resource loading time, there are various tools that allow you to compress images before uploading. There are also plugins that can be installed on the website itself to compress existing images. It goes without saying that reducing the size of the image file will lead to reduced loading times and a better LCP.
• Additionally, you can use tiling to repeat a small image multiple times in all directions, instead of using a single large background image. 
• Alternatively, using a single solid background color is far better than an image since web browsers can render solid colors without having to download data.
• Avoid purely decorative images that may impact the loading time. 

Largest Contentful Paint and the hero image

Most websites, if not all, tend to display a prominent image along with a CTA. This is known as a “hero” image. Its placement and optimization can also sway the score in your favor (or against you).

A few good LCP practices in terms of hero images are:

• Optimize hero images for LCP by layering the text and CTA on top of the image using HTML tags. This will ensure that all the information about the image and styling is part of the page when it is being downloaded. This can be achieved by creating two sections; one with the image component and another with the text and CTA.
• Improve the download priority of hero images by using pre-load.
• Either compress the hero image to make it lighter or try converting it to more “load-friendly” and newer formats like JPEG XR.
• When using a tool like Elementor for hero image optimization, customize the code on WordPress (for optimal web page injection) and don’t add it as a custom CSS. 

Largest Contentful Paint and WordPress

Since I mainly work on WordPress websites, I have a bit of experience of how to improve Core Web Vitals metrics for WordPress sites in particular.

My experience shows that this all you need to do when it comes to optimizing the LCP score for WordPress:

• Install the WP Rocket plugin (check my WP Rocket review) that will automatically implement 98% of the fixes I have talked about in the earlier part of this guide.
• Use a CDN. You can either use the WP Rocket CDN or a free CDN, such a Cloudflare.
• Use Imagify to optimize all of your images in bulk.
• Make sure you are using a decent host.

That’s it. This is the result for my website according to Lighthouse. I am pretty happy with this because I did not need to touch a line of code.