How to Improve Largest Contentful Paint: 5 Tactics for WordPress

This article will explain:

• What Largest Contentful Paint (LCP) is
• How to test/measure your website’s LCP
• How to improve Largest Contentful Paint using five methods

Let’s get started!

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint is a user-focused web performance metric from Google that measures how long it takes for the “main” content of a page to load. Depending on the page, this “main” element could be a block of text or some type of image.

For example, if we were testing the CodeinWP homepage on a desktop device, the Largest Contentful Paint time would measure how long it took the “A hub for WordPress enthusiasts, business owners & everyone who wants to build their own website” text block to load.

👇 Below, we’ll show you how to figure out the Largest Contentful Paint elements on your site.

Largest Contentful Paint is one of three Core Web Vitals metrics that Google uses to measure a website’s performance. The other two are as follows:

• First Input Delay (FID). How quickly a web page responds to someone’s first interaction, such as clicking on one of the fields in a signup form. In March 2024, this will be replaced by Interaction to Next Paint (INP), which will measure how quickly users receive visual feedback after interacting with a web page. For example, if someone clicks on a top-level menu item, the time it takes for lower level menu items to appear would be the INP.
• Cumulative Layout Shift (CLS). How much a web page’s layout changes as elements of the page load.

Another related metric is First Contentful Paint, which measures how long it takes for the first element of a web page to appear. This isn’t considered one of the Core Web Vitals metrics, but it’s still a good thing to pay attention to when optimizing your website.

All of these metrics are connected, so learning how to improve your Largest Contentful Paint can help you improve other web vitals as well.

What is a good Largest Contentful Paint time?

A good rule of thumb is that the shorter your LCP is, the better it is. More specifically, experts recommend aiming for an LCP of 2.5 seconds or less.

Achieving this ideal LCP can help you in a couple of ways:

• Avoid negatively affecting your search engine rankings. While having a good LCP time won’t shoot you to the top of the search results pages by itself, having an overly slow LCP time can negatively affect your site’s rankings.
• Lower bounce rates. There’s data showing that slower pages correlate with higher bounce rates, which makes sense because users don’t want to wait around for your content to load.

We’ll talk about how to test your site’s times in the next section. If you’re not getting the times that you want, we’ll then show you how to improve Largest Contentful Paint on your site.

Of course, because there are other factors involved in loading times, having a good LCP doesn’t guarantee high rankings or low bounce rates. You’ll still need a great content strategy for instance. But, it’s a great first step to achieving those things.

How to measure Largest Contentful Paint (and find LCP element)

There are several tools you can use to measure the Largest Contentful Paint time of a page (and find the element that is used to calculate Largest Contentful Paint).

1. PageSpeed Insights

PageSpeed Insights is a great way to test the Largest Contentful Paint time of a single page on both mobile and desktop. You’ll also get to see two data areas: Discover what your real users are experiencing and Diagnose performance issues.

The first area will show you performance metrics based on your visitors’ experience on your site in the past 28 days. This data is highly valuable as it comes from a variety of users, devices, and browsers. However, this data is only available for sites popular enough to be in the CrUX database.

The good news is that all sites can access performance data from PageSpeed Insights. This data includes your First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift, and Total Blocking Time. You’ll also get performance ratings for accessibility, best practices, and SEO, with deeper explanations of them further down the page.

Another helpful detail in PageSpeed Insights is that it will also let you see the exact element that is considered the “main” content on that page. That is, your Largest Contentful Paint time will measure how long it takes this specific element to load.

To find this, scroll down to the Diagnostics section under Diagnose performance issues and expand the Largest Contentful Paint element accordion.

⚠️ Note – your page’s LCP element can be (and often is) different on desktop and mobile devices.

Many other WordPress speed testing tools can also let you test Largest Contentful Paint, such as WebPageTest.

2. Google Search Console Core Web Vitals Report

Whereas PageSpeed Insights is useful for testing a single page, Google Search Console is really handy if you want to see how your site performs in Largest Contentful Paint across all pages (as well as the other Core Web Vitals metrics).

This will let you quickly find specific pages on your site that aren’t performing well when it comes to Largest Contentful Paint.

First, make sure that you’ve verified your site with Google Search Console. Then, you can find your site’s Largest Contentful Paint performance in the Core Web Vitals report.

You can view separate reports for both desktop and mobile. You’ll want to focus your efforts on fixing pages marked as poor URLs or URLs need improvement.

The big advantage of using this tool is that it provides real data based on how users from all over the world interact with a website. However, it doesn’t work for all sites. If your site is new or low-traffic, you’ll get a message saying there’s not enough data available to get a report. In that case, your best option is to use PageSpeed Insights (or something like WebPageTest).

How to improve Largest Contentful Paint time

Here are five tips for how to improve Largest Contentful Paint on your site:

1. Optimize your site’s images 🖼️

Images are one of the most powerful tools around for drawing people into your site, but they’re also often large and complex files. If your LCP element is an image (which it will be on many pages), not properly optimizing that image will make it take longer to load and decrease your Largest Contentful Paint time.

We have a whole guide on how to optimize images for websites, which covers important tactics like adaptive resizing, compression, optimized image formats, and so on.

If you’d rather just have a plugin do everything for you, you can install the Optimole plugin. Optimole handles every part of image optimizing on autopilot – for all of your existing images (and any new images).

It will serve adaptive images (optimal size for each visitor), compress images in an optimal way, and convert them to the optimal format (e.g., WebP or Avif). It also automatically serves images via its built-in content delivery network (CDN).

You can also consider other image optimization plugins like Imagify, ShortPixel, and WP Smush.

2. Implement a content delivery network (CDN) 📡

The next way to improve your Largest Contentful Paint is to implement a content delivery network, more commonly referred to as a CDN.

A CDN caches website content in servers all over the world, allowing users to load your website from the server closest to them. This improves the loading time for visitors from locations far away from the main server hosting your website.

If you use Optimole, you’ll already be benefiting from a CDN for your site’s images. However, you might want to also serve your site’s other static files via a CDN (or even entire pages).

Many web hosts like Bluehost bundle a CDN into some or all of their web hosting plans. If your web host doesn’t include CDN with its hosting plans, you have two options: switch to a host that does or install a CDN on your website yourself. Setting it up yourself is a bit more complicated, but there are several high-quality CDN services for WordPress for you to choose from.

3. Use a caching plugin 🔌

If your host doesn’t already implement caching at the server level, another solution for how to improve Largest Contentful Paint is to use a WordPress caching plugin. These plugins reduce the work that your server needs to do to render each visit, which means that your server can serve up the page’s assets faster (and consequently make your LCP time a lot faster).

Some of these plugins do other things to speed up your website as well:

• CSS and JavaScript minification
• Database cleaning and optimization
• CDN management
• Image lazy load
• Heartbeat control
• Core Web Vitals optimization
• WP-CLI cache purging

We recommend WP Fastest Cache for a plugin that’s easy to configure and filled with advanced features to fully optimize your site speed. If you’re willing to pay, the WP Rocket and FlyingPress plugins are also great options because they can help with some of the other tips on this list, such as avoiding render-blocking JavaScript and CSS.

4. Consider upgrading your hosting plan (or switching to a host with better speed) 🖥️

Your hosting company and your hosting plan can influence your website loading speed in a few ways:

• Shared servers are slower because you’re sharing resources with other users. The difference here isn’t huge for small websites but it can be significant if one or more high-traffic websites are sharing a server. If your website is getting a lot of traffic, consider switching to a VPS hosting plan. There’s a good chance you’ll be able to upgrade to VPS without switching web hosts, but it’s also worth looking into cheap VPS hosting to save some money.
• CDNs, which we’ve already discussed, aren’t offered by all web hosts. Other web hosts limit them to certain plans. This can be a good reason to switch hosting plans or to a new company altogether.
• Some web hosts are slower than others regardless of the plan you choose. If you think your web host itself is the problem, look at reviews of the company from developers who have run speed tests. This can tell you if you’re right about the web host and need to switch.

If you’re thinking about switching companies, check out our list of the best web hosting companies for beginners.

5. Eliminate render-blocking resources (CSS and JavaScript) ⛔

Because LCP measures how long it takes the main content to load, you want to stop as many elements as possible from loading before that main element.

By default, your site might load JavaScript and CSS files early in the loading process that could be delayed until later in the process. By delaying (or “deferring”) these scripts until later on, you can make your LCP element load faster.

To achieve this, you can use the tools in performance optimization plugins like WP Rocket or FlyingPress.

For more details, check out our full guide on how to eliminate render-blocking resources.

That’s how to improve Largest Contentful Paint! 🚀

LCP is one of the most important website metrics to pay attention to. It has a big impact on your site’s user experience. Plus, if your LCP times are too slow, they could be a drag on your site’s Google search rankings.

😎 The good news is that improving your LCP doesn’t have to be difficult or involve code. In fact, there are five simple strategies you can use to improve not just your Largest Contentful Paint but also your overall site loading speed:

For some more general tips, you can also check out our full guide to website speed optimization and our tips for WordPress performance optimization.

Do you still have any questions about how to improve Largest Contentful Paint on your website? Let us know in the comments!