Largest Contentful Paint Explained: How To Improve Your Time

Struggling with how to improve Largest Contentful Paint on your website? Or not sure what Largest Contentful Paint means and why you even need to care about it in the first place?

No matter where you’re starting from, this post is for you because you’re going to learn everything that you need to know about Largest Contentful Paint.

That includes what Largest Contentful Paint means, why it matters, how to measure it, and how to improve it.

You can use the table of contents below to jump to a specific section based on your current knowledge level. Or, keep reading to start from the beginning.

What Is Largest Contentful Paint (LCP)? Explaining the Largest Contentful Paint Meaning

Largest Contentful Paint is a performance metric that measures how long it takes the main content of a web page to load.

Largest Contentful Paint is part of Google’s Core Web Vitals metrics, along with Cumulative Layout Shift (CLS) and First Input Delay (FID).

On a more technical level, Largest Contentful Paint measures how long it takes from the user initiating the page load until the largest text block, image, or video is rendered within the viewport.

What does “main content” mean in terms of LCP?

Well, the main content will depend on the actual page in question, but it could be any one of the following:

• Text – more specifically, any block-level elements containing text nodes or other inline-level text elements.
• Image – elements inside an <img> element or <image> elements inside an <svg> element.
• Video – any <video> elements (it uses the poster image).
• An element with a background image – only when loaded via the CSS url() function (it doesn’t apply to CSS gradients).

Later in this post, you’ll learn how to find the exact Largest Contentful Paint element for any page on your site.

Want to improve your site's UX and maximize your SEO ranking? Optimizing your LCP time might help! Get started now Click to Tweet

Largest Contentful Paint vs First Contentful Paint

One common question you might have is what is the difference between Largest Contentful Paint vs First Contentful Paint, another common performance metric.

While the two terms are similar, the key difference is that Largest Contentful Paint measures how long it takes for the page’s “main content” to load, while First Contentful Paint measures how long it takes the “first object” to load (whether or not it’s the main content).

Basically:

• LCP = main content only
• FCP = first piece of content, regardless of what that content is

As such, your LCP time will almost always be slightly higher than your FCP time because the “main content” element isn’t usually the first to load.

Why Does Your Site’s Largest Contentful Paint Time Matter?

There are two main reasons that your site’s Largest Contentful Paint times matter:

1. User experience
2. Search engine optimization

User Experience

The biggest reason that you should care about your site’s Largest Contentful Paint times is that this metric is a good proxy for understanding your users’ experiences when it comes to your site’s performance.

Most users don’t care about how long it takes your website to fully load every single script and element. Instead, they care about how long it takes for them to start getting value from your website.

Largest Contentful Paint does a good job of trying to measure that “value” moment by seeing how long it takes the main content to load.

If you optimize your site to achieve a fast Largest Contentful Paint time, you can be pretty confident that you’re offering users a solid experience on your site, at least when it comes to performance (you’ll also want a customer-friendly design and good usability).

Of course, that doesn’t mean you should ignore other performance metrics. We always recommend taking a holistic look at your site’s performance and bottlenecks, which is why we created our own application performance monitoring (APM) tool that’s available for free if you’re using Kinsta hosting – Kinsta APM.

Search Engine Optimization (SEO)

On the search engine optimization front, Largest Contentful Paint is part of Google’s trio of Core Web Vitals metrics, which Google started using as an SEO ranking factor in its 2022 Page Experience algorithm update.

This means that having poor Largest Contentful Paint times can be a drag on your site’s performance in Google’s search results.

While other factors like content quality/relevance and backlinks still play a much larger role in where your website ranks, it’s important to optimize your site’s Largest Contentful Paint times to ensure that you’re getting the most from your SEO efforts.

What Can Affect Largest Contentful Paint Scores?

Two “main” types of issues can affect a page’s Largest Contentful Paint times:

1. How long it takes your server to respond with the initial HTML document.
2. How long it takes the actual LCP resource to load.

The first type of issue deals with server response time, aka time to first byte (TTFB). Before a user’s browser can even think about loading the main content, it first needs to get a response from the server.

Here are some of the common issues that affect this:

• Not using page caching – not using page caching forces the server to do more “work” before it can respond with the HTML document.
• Slow hosting – a slow hosting provider will always have a slow TTFB, regardless of what you do.
• Not using a CDN – a content delivery network (CDN) can speed up TTFB by serving pages from its global network instead of requiring users to download them from your site’s origin server.

After your site’s server delivers the initial HTML document, there could be further bottlenecks when it comes to loading the actual main content element.

Here are some of the common issues that affect this:

• Render-blocking JavaScript or CSS (or unoptimized/unnecessary code in general) – if the user’s browser needs to download and/or process unnecessary JavaScript or CSS before it can load the main element, that will slow down your LCP.
• Unoptimized images – if the LCP element is an image, using unoptimized images will slow down your time because larger images take longer to download.
• Unoptimized font loading – if the LCP element is text, loading custom fonts in an unoptimized way can make it take longer for that text to appear.
• Uncompressed files – if you’re not using compression technologies like Gzip or Brotli, this will make it take longer for the user’s browser to download your site’s files.

Depending on your site, you might be experiencing bottlenecks in both areas or just one of the areas. You’ll learn how to solve all of these issues a little later in this post.

What Is a Good Largest Contentful Paint Time?

Google defines a “Good” Largest Contentful Paint time as being under 2.5 seconds.

If your page’s Largest Contentful Paint time is between 2.5 and 4.0 seconds, Google classifies that as “Needs Improvement”. And if your page’s time is over 4.0 seconds, Google defines that as “Poor”.

Here’s a graphic from Google that shows this visually:

How to Measure Largest Contentful Paint: Best LCP Test Tools

There are a number of tools you can use to test your site’s performance for Largest Contentful Paint – let’s go through some of the most useful…

PageSpeed Insights

PageSpeed Insights is one of the best tools for assessing Largest Contentful Paint because it offers four useful bits of information:

1. You can see your site’s Largest Contentful Paint times with real users from the Chrome UX report (if your site has enough traffic to be included in the report).
2. You can run simulated tests to see how your site performs.
3. Google will tell you the actual LCP element that it’s using for the test, which lets you know which element to optimize.
4. Google will provide suggestions on how to improve your LCP time.

Here’s how to use it:

1. Go to the PageSpeed Insights website.
2. Enter the URL of the page that you want to test.
3. Click Analyze.

Google will then show you results for both mobile and desktop – make sure to check both.

To find the main element that Google is using to calculate LCP, you can scroll down to the Diagnostics section and expand the Largest Contentful Paint element section:

Again, make sure to check both mobile and desktop because the LCP element might be different for each.

Chrome Developer Tools

You can also test Largest Contentful Paint time directly from Chrome Developer Tools using the Performance tab or its Lighthouse audit feature. We recommend using the Performance tab because it gives you more information.

Here’s how to start:

1. Open the page that you want to test.
2. Open Chrome Developer Tools.
3. Go to the Performance tab.
4. Make sure the Web Vitals box is checked.
5. Click the Reload button (noted below).

You should now see a full analysis of your site.

If you hover over LCP in the Network tab, you can see the time:

If you hover over LCP in the Timings tab, you can see the actual LCP element:

Google Search Console

While Google Search Console doesn’t let you test an individual page for its Largest Contentful Paint time, it is really useful for assessing sitewide performance.

Each page on your site will have a different LCP time, so you can’t just test your homepage and call it a day.

With Google Search Console, you’ll be able to see where each page on your site falls in Google’s “Good”, “Needs Improvement”, and “Poor” categorizations. The performance data comes from the Chrome UX report, so it’s based on real user data.

If you haven’t done so already, you’ll first need to verify your site with Google Search Console.

Once you’ve done that, here’s how to access the LCP report:

1. Open Google Search Console for your site.
2. Go to Core Web Vitals under the Experience tab.
3. Click Open Report next to the Mobile or Desktop chart.
4. Look for any issues in the Why URLs aren’t considered good section. If you click on the problem, you can see more information about which URLs are causing issues.

*Make sure to check both the desktop and mobile results, as the data might be different in each.

WebPageTest

WebPageTest is another handy option for running simulated performance tests.

Unlike PageSpeed Insights, WebPageTest lets you fully customize various testing metrics such as the test location, connection speed, device, and more. That’s the main benefit of using it over other tools – it gives you more options to configure the test.

Here’s how to run a test:

1. Go to WebPageTest.
2. Add the page URL that you want to test.
3. Expand the Advanced Configuration options to fully configure your test.

On the results page, you’ll see the LCP data, along with tons of other performance metrics (including a waterfall analysis).

How To Find the Largest Contentful Paint Element

If you want to improve Largest Contentful Paint, it can be really helpful to know exactly which element Google is using to calculate your LCP time.

For example, if you know that Google is using your hero image as the LCP element on your homepage, you know that you need to find ways to serve that hero image as quickly as possible if you want to improve your homepage’s LCP times.

As we mentioned earlier, you can find your Largest Contentful Paint element using PageSpeed Insights or Chrome Developer Tools.

Make sure to check both mobile and desktop results, as your LCP element might be different on different devices.

How To Improve Largest Contentful Paint in WordPress (or Other Platforms)

Now that you know all about Largest Contentful Paint, let’s get into some actionable tips for how to improve Largest Contentful Paint in WordPress.

While we will focus on WordPress for these tips, all of the tips are universal and apply to other types of websites.

Set Up Caching to Improve Server Response Time

Caching can improve server response time by reducing the processing work that your server needs to do before it can deliver the finished HTML document to visitors’ browsers.

If you’re hosting your WordPress site with Kinsta, you don’t need to worry about configuring caching because Kinsta automatically implements optimized caching for you.

If you host elsewhere, you can enable caching on your site using a free plugin like WP Super Cache or a paid plugin like WP Rocket.

For more options, check out our post with the best WordPress caching plugins.

Upgrade to Faster WordPress Hosting

While all of the tactics on this list can help you improve your LCP time, there’s no beating around the bush:

If you use slow, unoptimized WordPress hosting, your LCP times are always going to be capped by the quality of your host.

You might be able to make things a little better, but you’ll always struggle to achieve sub 2.5-second LCP times if your host is slow.

If you want the easiest way to improve your Largest Contentful Paint times, you can migrate your site to Kinsta. Not only does Kinsta offer performance-optimized hosting infrastructure, but we also have built-in features to handle a lot of the other optimizations on this list.

That means you can focus on growing your site instead of messing around with optimizing Largest Contentful Paint times.

If you’re interested, Kinsta will migrate unlimited websites from any host for free – learn more about free migration here.

If you’re still on the fence – try the rest of the tips on this list first. But if you’re still struggling after doing everything on this list, you might just need better hosting.

Use a Content Delivery Network (CDN)

Without a CDN, all of your site’s visitors need to download a page’s HTML and static assets from your hosting server.

If your visitors are located close to your server, that’s not usually an issue. But if your visitors are spread out around the world, this can slow down your site because of the physical distance between a visitor and your site’s server.

With a CDN, you can distribute your site’s static assets (or even your site’s finished HTML pages) to the CDN’s global network. That way, visitors can download files from the nearest location of the CDN, which is a lot faster.

If you’re hosting with Kinsta, we recommend using Kinsta’s Edge Caching feature for the best results.

Kinsta’s edge caching feature works by caching your site’s full HTML pages and static assets to Cloudflare’s global network (rather than just caching static assets like most CDN solutions).

This means that your site’s visitors can download the complete page from the nearest edge location, which speeds up both server response time and how long it takes your LCP resource to load.

To enable Kinsta’s Edge Caching, go to the Edge Caching tab in your site’s dashboard in MyKinsta.

If you’re hosting somewhere else, you can set up a CDN for your site’s static assets using popular CDN services such as KeyCDN, Bunny, StackPath, and others.

Avoid Render-Blocking JavaScript (Defer or Remove)

Render-blocking JavaScript is JavaScript that loads before your main LCP element even though it’s not needed at that time.

By delaying loading the LCP element, it will slow down your LCP load times.

To fix this, there are a few strategies that you can implement:

• Remove unnecessary JavaScript if possible.
• Defer the JavaScript so it doesn’t block loading your site’s main element.
• Delay the JavaScript until a user interacts with your site.

For most people, the easiest way to implement this functionality is via plugins like Autoptimize or WP Rocket.

For a full guide on how to do this, we have two very detailed posts:

• How to eliminate render-blocking resources on WordPress
• How to defer the parsing of JavaScript

Avoid Render-Blocking CSS and Optimize CSS Delivery

Just as unoptimized JavaScript can slow your site down, unoptimized CSS can also do the same.

Essentially, you want to load as little CSS as possible. And for the CSS that you do need to load, you want to load it in an optimal way. Typically, this means that you want to load important CSS early, while delaying non-critical CSS until later in the loading process.

If you’re not a developer, the easiest way to achieve this is by using performance optimization plugins like Perfmatters, WP Rocket, or FlyingPress.

For example, WP Rocket offers built-in features to remove unused CSS on a page-by-page basis and serve CSS in an optimal way.

If you want a much deeper look at how to do all of this, check out our complete guide on how to optimize CSS.

Minify Your HTML, CSS, and JavaScript

In addition to the code optimization techniques above, you’ll also want to minify your site’s HTML, CSS, and JavaScript.

Essentially, this removes unnecessary characters and white space from your site’s code to shrink its size.

If you’re hosting with Kinsta, Kinsta can automatically handle minification via our Cloudflare integration. Here’s how to control this feature:

1. Open your site’s dashboard in MyKinsta.
2. Go to the CDN tab.
3. Click Settings next to Image Optimization.
4. Check the boxes for CSS and JS and save settings.

If you’re hosting your site elsewhere, you can use a free plugin like Autoptimize to minify your code or one of the premium comprehensive plugins like Perfmatters, WP Rocket, or FlyingPress.

Or, check out our full code minification tutorial to learn more. While the tutorial focuses on JavaScript, you can use the same methods and plugins to minify other code, as well.

Use Server-Level Compression (Gzip or Brotli)

Server-level compression lets you shrink the size of your site’s files using technologies such as Gzip or Brotli.

For example, the compression that we use for the Kinsta website reduced the file size of the Kinsta homepage by 85.82%.

If you’re hosting your WordPress website with Kinsta, you don’t need to worry about this because Kinsta enables Brotli compression for all sites automatically.

If you’re hosting your site elsewhere, you can use this free tool from GiftOfSpeed to check if your site has Gzip or Brotli enabled.

If your site isn’t using compression, you can follow our guide on how to enable Gzip compression to set it up.

If you’re using Cloudflare to serve your site’s content, Cloudflare also has a built-in setting to enable Brotli compression:

1. Open your site in the Cloudflare dashboard.
2. Go to Speed → Optimization in the sidebar menu.
3. Enable the Brotli toggle.

Compress and Resize Images

If your LCP element is an image, finding ways to reduce the size of that image file will reduce the time it takes a user’s browser to download the image (and thus speed up your LCP time).

To reduce the image’s size, you should resize the image to the dimensions at which you’re actually using it, compress it using lossy or lossless compression, and serve it in an optimized format such as WebP.

This approach is just generally a performance optimization best practice – it’s not specific to Largest Contentful Paint.

For a more comprehensive look, check out our detailed guide to image optimization for websites.

And oh yeah – if you’re hosting your WordPress site with Kinsta, you don’t need to worry about this because Kinsta offers a built-in feature to automatically optimize your site’s images without the need for any third-party tools.

Here’s how to enable this feature:

1. Open your site’s dashboard in MyKinsta.
2. Go to the CDN tab.
3. Click Settings next to Image Optimization.
4. Choose your preferred level of image optimization and save settings – using Lossy will offer the biggest speed improvements, though it might have a small effect on image quality.

Preload the Largest Contentful Paint Image

If your LCP element is an image, another strategy to improve LCP is to preload the Largest Contentful Paint image. This is why you might see a recommendation like “Preload Largest Contentful Paint image” in PageSpeed Insights.

With preload, you can tell a user’s browser to prioritize downloading certain resources, such as the specific image that is your site’s LCP element.

The most non-technical way to preload LCP images is to use a plugin like Perfmatters, which offers a dedicated Preload Critical Images feature. All you need to do is specify how many images to preload – we recommend just starting with one, as preloading too many assets can have a negative effect.

There are also some free plugins at WordPress.org to achieve this, such as WPZOOM’s Preload Featured Images plugin, as well as other premium plugins, such as FlyingPress.

Check for Lazy Loading Issues

Another issue that can trigger the “Preload Largest Contentful Paint image” message in PageSpeed Insights is problems with how your WordPress site is lazy loading images.

Or, this can also trigger a “Largest Contentful Paint image was lazily loaded” warning in PageSpeed Insights.

Lazy loading lets you speed up your site’s initial load times by waiting to load certain resources (like images) until a user starts interacting with your site.

While that’s normally a good thing, it can slow down your LCP times if your site is trying to lazy load the image that is your LCP element. For this reason, you’ll want to make sure that your site isn’t lazy loading any images visible in the initial viewport.

If you’re using the native browser lazy loading feature that WordPress introduced in WordPress 5.5, you shouldn’t experience this issue because WordPress already automatically excludes the first in-content image as of WordPress 5.9.

If you want to exclude more than the first image, you can use the wp_omit_loading_attr_threshold function (but most people won’t need to do anything here).

However, if you’re using a JavaScript-powered lazy loading plugin, you might need to manually set up this exclusion in the plugin’s settings. For example, the Perfmatters plugin includes an option to let you exclude the first “X” images from lazy loading.

If your lazy loading plugin doesn’t let you set up this type of exclusion, you can switch to a different plugin that does.

Optimize Font Loading With Font-Display: Optional

If your LCP element is text, your site’s font loading process might delay the appearance of the text, which will slow down your LCP time.

Typically, this happens when using custom fonts. If your site is configured to wait to render any text until after the custom font has loaded, this will slow things down if the custom font file takes a long time to load.

To fix this, you can use the Font-Display: Optional CSS descriptor.

This tells the browser to use a fallback font if the custom font doesn’t load within a small window (usually around 100ms or less).

In plain language, this basically means that the browser should give the custom font a chance to load. But if the custom font doesn’t load quickly enough, the browser should just use a fallback system font to avoid delaying the content any further.

Alternatively, you can also use Font-Display: Swap, which loads the fallback font right away and then “swaps” in the custom font once the custom font loads. However, this approach can cause issues with Cumulative Layout Shift if the fonts are different sizes, so you’ll want to be careful.

Unless your custom font is absolutely necessary to your website’s design, using Font-Display: Optional is usually the best option from a Core Web Vitals perspective.

If you’re comfortable using CSS directly, you can manually edit the Font-Display property in your child theme’s stylesheet.

If you don’t want to use CSS, you can also find plugins to help you do this, though most of them are focused on optimizing for Google Fonts:

• Asset CleanUp – supports Google Fonts for free and custom local fonts with the Pro version.
• Perfmatters – offers a feature for Google Fonts.

If you’re using Elementor to design your site, Elementor also includes a built-in option to let you use this for pages that you create with Elementor:

1. Go to Elementor → Settings.
2. Open the Advanced tab.
3. Set the Google Fonts Load drop-down equal to Optional.

Not sure what LCP is and why improving it matters? This guide can help! Learn what LCP means, why it matters, and how to improve it right here Click to Tweet

Summary

Learning how to improve Largest Contentful Paint is important for improving your site’s user experience and maximizing your search engine rankings.

There are generally two parts to improving Largest Contentful Paint – speeding up your server response time and then optimizing your site’s code to render the LCP element as quickly as possible.

If you don’t want to worry about slow server response time, you can move your WordPress site to Kinsta. Kinsta’s performance-optimized architecture is specifically designed to deliver your site as quickly as possible.

Plus, with Kinsta’s Edge Caching feature, you can cache your site’s pages to Cloudflare’s global network, which means visitors from all around the world will enjoy lightning-fast server response times (and, consequently, lightning-fast LCP times).

If you want to learn more, you can check out these pages for more information about Kinsta’s managed WordPress hosting or Kinsta’s managed WooCommerce hosting.

If you’d like a professional to help you with some custom LCP performance optimizations, you can also find a provider in the Kinsta Agency Directory.

The post Largest Contentful Paint Explained: How To Improve Your Time appeared first on Kinsta®.