Struggling with a slow Largest Contentful Paint speed on your WordPress site?
Largest Contentful Paint (LCP) is one of three metrics in Google’s new Core Web Vitals initiative. Beyond being an indicator of user experience, Google will also start using Largest Contentful Paint (and the other metrics) as an SEO ranking factor starting in 2021.
So if your WordPress site isn’t meeting Google’s Largest Contentful Paint standards, you’ll want to make some changes to try and get under Google’s threshold.
In this post, we’ll introduce you to Largest Contentful Paint and explain what it’s actually measuring. Then, we’ll go over some tips for how to improve your Largest Contentful Paint speed on WordPress.
What Does Largest Contentful Paint Really Mean?
Again, Largest Contentful Paint is part of Google’s Core Web Vitals initiative. If you want to learn about the other metrics and the initiative in general, you can go to our full WordPress Core Web Vitals explainer.
For this post, all you need to know is that the Largest Contentful Paint is something that Google cares about and also something that Google will start using as an SEO ranking factor in 2021 and beyond.
So – what is Largest Contentful Paint actually measuring?
When you use most speed test tools, such as GTmetrix or Pingdom, they measure how long it takes your site to completely load.
Largest Contentful Paint (LCP) takes a different approach. Instead of measuring your entire website’s load time, LCP measures how long it takes your most meaningful content to load.
More specifically, LCP is the render time of the largest image or text block visible within the viewport on the initial page load.
Let’s look at an example from my personal portfolio site (you can see it here).
On the desktop version of this page, the LCP metric is the picture of my smiling face, marked below. Again, that’s because it’s the largest visible image on the initial page load:
My site’s Largest Contentful Paint time is how long it takes for visitors to be able to see this image – the rest of my site doesn’t really matter (especially all the content that’s below the fold).
Why this metric? Because, in Google’s words:
[Largest Contentful Paint] marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.
It’s important to note that your Largest Contentful Paint might be different for different types of visitors. For example, on the mobile version of my portfolio site, the LCP is the <h1> text. This is because I hide my picture on mobile devices (since no one needs to see me filling up their phone screen):
What’s a Good Largest Contentful Paint Time?
To help you understand whether your LCP is good or bad, Google offers a range of values.
Ideally, you want your Largest Contentful Paint to be under 2.5 seconds.
Between 2.5 seconds and 4.0 seconds is in the Needs Improvement range and over 4.0 seconds is Poor:
My guess is that, when Google rolls out LCP as an SEO ranking factor, sites that score Poor won’t rank as high because Google doesn’t want to give searchers a bad experience (this is just my personal guess, though).
How to Find Your WordPress Site’s Largest Contentful Paint Time and Element
To see what your site’s Largest Contentful Paint time is and find the element that Google considers to be your page’s “Largest Contentful Paint”, you can use PageSpeed Insights.
At the top, you’ll see your Largest Contentful Paint time in the Lab Data section. Depending on how much traffic your site receives, you might also see real user data in the Field Data or Origin Summary boxes:
- Lab Data – a synthetic test from Google’s computers.
- Field Data – the real times that your site’s visitors are experiencing.
If you have a low-traffic site, you’ll probably only see the Lab Data – that’s fine.
To find the element that Google is using for your Largest Contentful Paint time, scroll down to the Diagnostics section, and look for the Largest Contentful Paint element. When you expand that section, you’ll see the specific element:
Again, you’ll want to check both the Mobile and Desktop tabs because you might have a different Largest Contentful Paint element for different resolutions.
How to Speed Up Largest Contentful Paint on WordPress
Now that you know how to find your WordPress site’s Largest Contentful Paint element, let’s go through some tactics to speed it up if you’re not getting the scores that you want.
Again, to improve your Largest Contentful Paint time, you need to speed up how quickly your server can deliver your “main” content. The biggest strategies to do this are to:
- Improve server response times by choosing a better host, implementing caching, or other strategies.
- Optimize your JavaScript and CSS to reduce blocking time/scripts.
- Shrink the size of files – for example, if your LCP element is an image, you want to reduce the size of that image. You should also compress other files with server-level compression such as Gzip or Brotli.
- Use preconnect to speed up important resources if needed.
Let’s go through these tactics in more detail…
1. Pick a Better Host
You can wait to follow through on this tip until you implement the other tactics. However, the basic fact is that if you have a slow host, your LCP is always going to be slow.
For example, if your host just plain takes too long to respond to visitors, none of the other tactics will be able to get you under Google’s limits.
For the best-performing hosting, we recommend SiteGround for most WordPress users – plans start at just $6.99 per month. Read our SiteGround review to learn more.
Other quality WordPress hosts are:
So – try the other steps first. But if they don’t work, you might need to come back to this step and make the switch.
2. Set Up Page Caching
If your WordPress host isn’t already implementing page caching at the server-level, you absolutely want to use a caching plugin to speed up your LCP. Caching makes it easier for your server to quickly deliver content, especially during busy periods.
By helping your server deliver content faster to visitors’ browsers, you’ll speed up your LCP.
You can check out the best caching plugins here. If you’re willing to pay, WP Rocket (our review) is a great option that can also help you implement other tactics on this list.
3. Use a Content Delivery Network (CDN)
If you have a global audience, a CDN helps you deliver assets faster to visitors who are located far away from your site’s main data center.
This will improve the LCP time for your audience as a whole, especially for far-away visitors.
Note – if you only target one specific area, you might not get many benefits from a CDN. For example, if you have a local business in Los Angeles, you’re probably not worried about load times for visitors from Russia.
You can find some great free and cheap WordPress CDNs.
4. Optimize Your Images
Your images play another big role in your LCP, especially if your LCP element is itself an image. If you can find ways to shrink the size of your image(s), that will speed up how quickly they load. For example, if you shrink your LCP image from 200 KB to 80 KB, your LCP time is going to go down.
First off, you should implement basic WordPress image optimization strategies. Those are:
- Resize the image’s dimensions according to your needs. For example, if you need to fill 800px, make it 800px wide (or maybe double that, to account for Retina screens).
- Compress the image to further shrink its file size – lossy compression will work for most WordPress sites.
To save time, you can use a WordPress image optimization plugin to automatically perform both tasks.
If you want to go further, you can also serve adaptive images based on each visitor’s device. For example, someone browsing on a smartphone would get a lower-resolution image than someone browsing on a 4K screen. This lets you give everyone a great experience while still optimizing load times for individual users.
Two easy options to implement adaptive images on WordPress are:
5. Optimize Your Code
Another way to speed up your LCP is to optimize your code so that:
- It takes up as little space as possible
- You don’t “block” loading your LCP element with unnecessary CSS or JavaScript that you could load later in the page.
First, you’ll want to set up minification for your HTML, CSS, and JavaScript. You can do this with the free Autoptimize plugin or many performance plugins, such as WP Rocket, can help you implement this.
Then, you’ll want to reduce CSS and JavaScript blocking time. Unfortunately, this gets a little technical, and some parts will require some coding knowledge.
To eliminate render-blocking JavaScript, you can use the free Async JavaScript plugin (from the same developer as Autoptimize). Or, WP Rocket also includes this feature. This makes your site “wait” to load less important JavaScript until after your LCP loads, which will speed up your LCP time (because fewer things are “blocking” your LCP from loading).
You can do the same thing for CSS…however there’s no easy plugin fix here. Essentially, you’ll need to:
- Inline critical CSS that’s needed for above-the-fold content by adding it to your site’s <head> section.
- Delay loading non-critical CSS until after your LCP content has loaded.
The free Autoptimize plugin can help you inline critical CSS and defer the rest. However, you’ll need some technical knowledge to figure out which CSS is critical and which can be deferred (or you’ll need to hire someone who can).
6. Use Server-Level Compression
Server-level compression can further reduce the size of your site. Gzip is the most common server compression algorithm, but you can also use Brotli.
Many WordPress hosts automatically implement Gzip compression for you – you can check using this Gzip compression test.
If your host hasn’t already enabled Gzip compression, follow our tutorial on how to enable Gzip on WordPress.
7. Use preconnect for Important Resources
This last one gets a little technical, but it gives you a way to establish important third-party connections early on to speed up load times. This graphic from Google shows the basic principle:
For example, if your LCP image comes from a CDN with adaptive media queries, using preconnect lets you speed up downloading that resource*.
This gets a little technical for this post. So here, I will link you to Google’s page on the topic.
* Google may or may not count an image from a CDN in your LCP. This gets pretty technical and beyond the scope of this post.
Speed Up Your WordPress Largest Contentful Paint Time Today
In 2021 and beyond, your Largest Contentful Paint time will be an SEO ranking factor (along with the other Core Web Vitals metrics).
So, beyond helping you improve your user experience, cutting down your LCP should help you maximize your SEO efforts.
With the tactics in this post, you should be able to improve your time. Better yet, most of these tactics are just generally good WordPress speed optimization strategies, so you’ll improve your other speed metrics, too.
Do you have any questions about improving Largest Contentful Paint on WordPress? Ask away in the comments!
