Largest Contentful Paint Guide

Last updated on August 24, 2021.

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.

⚡ Google page experience signals are becoming a THING. Check my Google page experience audit to learn how to get prepared for the upcoming Google update. And my Core Web Vitals audit to learn how to audit each of the three metrics.

What is 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).

Largest Contentful Paint Scores
Here are the different scores for Largest Contentful Paint.
  • 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

SEO NEWSLETTER

SEO Newsletter
Subscribe to receive free weekly updates with SEO news, SEO tips, SEO tools, and more!
Join 3000+ ambitious SEOs.

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.

Largest Contentful Paint (LCP) example
On the homepage of my site, this bigger block of text constitutes the Largest Contenful Paint.
Largest Contentful Paint (LCP) example
On the blog page of my site, the featured image of the post is the Largest Contentful Paint.

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.

Largest Contentful Paint (LCP) example
In the Google search results, the snippet showing the description of the first result is 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.

Largest Contentful Paint (LCP) example on Wikipedia
For Wikipedia, the Largest Contenful Paint is the biggest block of text in the viewport.

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.

Largest Contentful Paint (LCP) example
On the podcast page on the website on the site of Marie Haynes, the LCP element is the graphic that is in the header.

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

Largest Contentful Paint (LCP) on Google Central
For the Google Search Central site, the image of the robot constitutes the Largest Contenful Paint.

Google also provides a bunch of exmaples of LCP in their 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.
Largest Contentful Paint in Chrome DevTools
Here is how Chrome DevTools shows the Largest Contentful Paint element on a site.
  • 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.
Largest Contentful Paint in Lighhouse
Here you can see the measurement of the Largest Contenful Paint in Lighthouse.
  • WebPageTest. This is a bit more advanced and nerdy tool that you can also use to measure Core Web Vitals, LCP including.
Largest Contentful Paint in WebPageTest
Here is the waterfall in WebPageTest.

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

Measure Largest Contentful Paint in Google PageSpeed Insights
PSI provides the field data on the Largest Contenful Paint of the site.
  • 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.
Measure Largest Contentful Paint in the Google Core Web Vitals Report.
This is the Core Web Vitals report from Google Search Console.

Measuring Largest Contentful Paint in JavaScript

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

Measuring Largest Contentful Paint in JavaScript

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:

Measuring Largest Contentful Paint in JavaScript

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. 

largest contentful paint seosly
Here is how my site loads (the screenshot from Google PageSpeed Insights).

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.

Google PageSpeed Insights
Here is the Google PageSpeed Insights result for my website.

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.

Google PageSpeed Insights results for LCP
This is the origin summary of the data from all the web pages of the site and their scores over the last 28 days.

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. 

Lab data from Google PageSpeed Insights
Here are the lab data measured by Lighthouse and displayed in Google PageSpeed Insights.

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, safe browsing, HTTPS, and intrusive interstitials guidelines.

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

Largest Contenful Paint as part of Google Page Experience Signals
The Largest Contentful Paint is one of the Google page experience signals.

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.

Largest Contentful Paint in Lighthouse
Here is a very handy calculator that lets you see how a specific metric influences the overall speed score for the website.

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.
How to optimize LCP: server
The Google PageSpeed Insights tool indicates if there are possibilities to optimize the server load times.
  • 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.
Optimize Largest Contentful Paint by optimizing cache
Here is a tip provided by PSI with regards to using an efficient cache policy.
  • 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.
Largest Contenful Paint optimization
Eliminating render-blocking resources is also a great way to optimize CSS.
  • Remove unused CSS. You can also remove unused CSS to make the code lighter and LCP faster.
Remove unused CSS to optimize Largest Contenful Paint
Removing unused CSS is another great way to improve the overall speed and performance of the site.
  • 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.
Optimize Largest Contentful Paint: remove unused JavaScript
The Google PageSpeed Insights tool will show you if there is unused JavaScript on the page tested.
  • 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.
lcp optimize images
One of the tips PSI will give you is to properly size images.
  • 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. 

Largest Contentful Paint Cookie Banner
The cookie banner can sometimes be the Largest Contenful Paint element of the page.

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.

Largest Contentful Paint Background Image
A huge background image can also sometimes become the Largest Contentful Paint element of the page.

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

Largest Contentful Paint Hero Image
Here is the hero image as the Largest Contentful Paint on my homepage (I activated this setting just for a moment to show 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.

Largest Contentful Paint and WordPress
This is the score my site managed to get thanks to the WP Rocket plugin.

GET ACCESS TO PREMIUM SEO CONTENT

Members of SEOSLY Pro get access to Olga’s SEO audit video guide where she documents her 500+ step SEO audit process, Olga’s mini video SEO audits, SEO audit templates, pro SEO auditing tips, and much more!

Join SEOSLY Pro to become a technical SEO expert in no time.

5 Comments

  1. Rakesh Rooprai

    Hello,

    I am using WP Rocket for my WordPress websites but speed is still same and facing web core vitals issues with my websites.

    Some WP Rocket’s settings doesn’t work fine, like image optimisation. If I choose image optimisation option from the rocket’s settings, image disappeared on some pages.

    • Hello Rakesh,
      Using WP Rocket or any other speed plugin is the quickest but not always the most effective way to improve the speed and performance of the site. There are loads of different factors that influence how the site performs and speed plugins do not always solve all of them. Anyway, I have tested WP Rocket on multiple sites (and what is important with different settings) and it always improved the speed at least a little bit. Those optimizations can always break things so it is very important to always have a backup just in case. I believe that WP Rocket also offers you help in case the plugin does not improve your site.

  2. Joseph

    Good article.

    I use 3 optimization plugins that work well together; WP Rocket (caching/critical CSS, etc…), WP Asset Cleanup (removing unused code), and WP Smush Pro (image optimization). I’m sure imagify works similarly when used with Rocket CDN.

    These 3 plugins will cover the majority of the optimizations.

    In addition to everything you said, you need good hosting. If your website is your house than your hosting is the foundation. A good foundation can make all the difference.

    • Hello Joseph,
      Thank you for commenting and sharing your precious experience and knowledge. I appreciate it. And I totally agree that hosting is the foundation to build upon.

  3. le the hoa

    I recommend using Webp for images and WebM for gif, it makes loading time faster. Wprocket ‘s good, but wp fastest cache also

Leave a Reply

Your email address will not be published. Required fields are marked *