LCP or Largest Contentful Paint, is a core web vitals metric that represents the time needed for the biggest part of the webpage (an image, video, etc.) to appear in the visitor’s browser. It’s one of the most important factors when it comes to your site’s speed because it’s when the visitor perceives the page as loaded.
To make Google happy, your largest contentful paint timing should sit under 2.5 seconds, so the largest content on the page should be visible and ready for interaction in no longer than 2.5 seconds. To pass Google’s Core Web Vitals Test for LCP timing, 75%+ of your visitors should get an LCP time of under 2.5 seconds.
In this post, we share the techniques for improving LCP time that we’ve developed after optimizing over 4000 sites.
Some of the steps are quite technical, so we’ve included an audio version of this article below that might make it easier to digest. Click play to listen.
Table of Contents
What Is Largest Contentful Paint or LCP?
Simply put, LCP or largest contentful paint time, is the period during which the largest part of the content becomes visible to the user. This includes everything that’s above the fold or “viewport” (the area visible to the user after the page initially loads), whether that’s a chunk of video, images, or other elements.
Why Is LCP Important and Why Is It A Google Core Web Vital Metric?
It’s important to understand that your LCP time is something completely different from page load time and you can have a very high load time or fully loaded time but have a good LCP time. On today’s web, LCP is generally a better measure of the site speed because it reflects the visitor’s perception of how fast the site loaded.
LCP gives us a method to reliability measure pagespeed from the point of the visitors perspective versus other more traditional speed metrics like onload time or document complete time or fully loaded time. Regardless how high or low your fully loaded time or onload time is, if the visitor perceives the page as slow then that timing is irrelevant.
Google recognizes LCP time as one of their new core web vitals metrics and it’s now part of their ranking algorithm which means LCP is important for both traffic and conversions.
What Should My LCP Time Be?
From a Google Core Web Vitals perspective it should take less than 2.5 seconds for the largest above-the-fold content of your page to become visible to the user. 75%+ of your website visitors need to have an LCP under 2.5 seconds in order for Google to consider this metric to be in the “good” zone for your website.
2.5-4 seconds will have you falling under the “needs improvement” zone and over 4 seconds is in the fail zone.
You’re going to see warnings in Google Search Console if your pages fall into the “needs improvement” or bad/fail zone.
Note That The Speed Of ALL Pages Matters
A common mistake when it comes to LCP timing (or any speed metrics) is thinking that the homepage is the only page that needs improvement. While the homepage is probably the most popular page on your site, all pages matter to both Google and your users. Google’s Core Web Vitals has a metric or set of metrics called “Origin Summary” which takes this into account. Your homepage can load lightning fast but if all other pages are slow then you’re likely going to fail the core web vitals test.
Load Speed Differs Per Device
Another important thing to remember is that the page load speed is going to differ depending on the device. So, for example, if you test a page on a desktop and it loads within 2.5 seconds, it might fail to load as quickly when tested from a tablet or a mobile device, and vice versa.
Pages Vary In Speed
Core web vitals is measured at both a site level and page level. As mentioned above the site wide score is known as origin summary, which measures the average results for the entire site. There’s also page level tests too if a page has enough traffic.
This means that your site as a whole can pass this test while some individual pages of your site might fail so important to keep this in mind when looking at the data.
Geography & Location Matters
Another important factor that makes an impact on the LCP time is geographic location. For example, if your site is hosted in the US, and most of your visitors and customers are also in the US, then your visitors are going to get roughly the same LCP time. If your visitors are spread around the globe, your visitors are going to get a varying experience depending on where they’re located and you may fail the core web vitals test as a result.
The best way to overcome this type of problem is to use a content delivery network or CDN. A CDN is a network of servers, located around the world, that store some of your data or the entire pages so they can be served to your site visitors faster. This improves load speed and removes most of the impact of geography on site performance. We’ll talk more about CDNs later in this article.
How to Improve Your LCP Timing In Detail
Now that we covered the basics, we can go into more detail on how to reduce your largest contentful paint timing.
This metric is dependent of some of your other speed timings. In the case of LCP, there are two other metrics that influence this one or that should be the focus before you look at LCP timings. These metrics are TTFB (time to first byte) and FCP (first contentful paint). If these two aren’t looking good, then it will be tough to improve your LCP, so let’s go over how you can do that.
Before doing anything it’s probably a good idea to do a few speed tests so you have a baseline starting point and know whether your changes are actually working. Site speed varies every time you run a test so a good idea to do a few of them across a couple of different tools. Try SiteSpeedBot.com and Google Pagespeed Insights as your starting points. Note that Google Pagespeed Insights by default tests from the US so it’s probably not a great test of LCP timing if your visitors are primarily outside the US or North America.
Step 1 – Fix Your TTFB Timing
TTFB, or server response time, is a broad measure of how responsive a server is. It’s the period of time from when something was requested from the server to when the first byte of the response is delivered back to the web browser. For WordPress, we ideally want to see this at 100 milliseconds to 200 milliseconds (0.1-0.2 seconds) in the country where the site is hosted, and between 200 and 500 milliseconds (0.2-0.5 seconds) internationally.
In cases where your TTFB is way out of these ranges, we strongly suggest you focus on reducing your TTFB before moving on to the LCP issues. Fixing this is essentially a pre-requisite for a better LCP time. This article on “how to reduce your TTFB” goes into detail on this but here’s a summary of how you can improve your server response times/TTFB:
Use Page Caching
Running a WordPress site at speed is pretty much impossible without having page caching in place. Page Caching builds pages in advance and stores them on the server so they’re ready to go when the visitor requests them.
Without a Page Cache, every time a visitor requests a page all the database lookups and PHP processing (the programming language in which WordPress was built) need to be done every time.
WP Rocket is our WordPress caching plugin of choice. It’s super user friendly, so you’ll find it easy to set up and use and includes a bunch of other site speed optimization features in addition to just caching.
Use Good DNS Hosting
Fast DNS hosting is a key factor in getting fast time to time to first byte speed. In simple terms, DNS is the “internet’s phone book” it translates host names to IP addresses. After you type the web address into the URL bar, your browser goes and ‘talks’ to the DNS host, which then turns the desired host name into an IP address so your browser can then go and request the page from that server.
We typically use and recommend Cloudflare for DNS hosting as they’re usually ranked as the one of the top 3 fastest DNS hosts in the world at DNSPerf.com
Note that you can use Cloudflare for DNS hosting only without all the CDN and firewall components.
As said before, we want our LCP time to be 2.5 seconds or below. Having TTFB jumping up past 0.5 seconds will usually push the LCP time out of our upper 2.5 second threshold.
Use a CDN
I mentioned briefly before that a CDN is important for site speed. It’s essentially a network of servers around the world that host some of all of your pages. This reduces the impact of geography on site speed and also allows your web hosting to handle a significantly higher volume of simultaneous visitors.
Our general recommendation when it comes to CDN services is Cloudflare as they’re one of the biggest CDNs with 160+ locations AND they have a free plan which is great for small to even medium size sites. Cloudflare released a new service called APO in mid to late 2020 which is a type of edge caching whereby entire pages from your site are stored on their network – the cost of this service is only $5/month and we strongly recommend it for all our customers. Previously this feature was only available on their $200/month plan.
Step 2 – Reduce Your FCP Timing (First Contentful Paint)
After dealing with your TTFB timing and performance next you should look at your FCP timing – FCP stands for first contentful paint. FCP is the time needed for the first element of the page to be served to the user. Simply put, it’s a period between a visitor’s request (click) and the appearance of the first element on the screen which is usually the logo in the header since thats the first piece of content on the page.
First contentful paint essentially answers the first question that comes to the visitor’s mind: “Is the page loading yet?” whereas your LCP time answers the question “has the page finished loading?”. The optimization processes for FCP and LCP are almost the same, so you’ll see some repetition here.
Before doing anything, test your FCP timing first from several different locations. We have a post here that deals with reducing your FCP time that would be worth digging into first before tackling the LCP time.
NOTE that FCP and TTFB aren’t core web vitals metrics, but they do have a strong impact on all the other metrics. Keep in mind that a poor TTFB and FCP timing will also cause other metrics to perform poorly, so important not to ignore them as part of your overall speed optimization process.
Step 3 – Reduce Page Weights aka Page Sizes
After your TTFB and FCP are fixed, the next step is to look at the size of pages. Naturally, a bigger page means slower loading time so important that we address page sizes site wide.
We want page sizes to be as small as possible. In the perfect scenario, your webpage size should be one megabyte or less but this is not always possible or practical.
The first step here would be to check how big your pages actually are. We suggest that you start by testing the homepage first, but remember that all site pages matter when it comes to the LCP, so make sure you test each page.
Our website speed test tool at SiteSpeedBot.com will give you detailed page size information and site speed recommendations and would be a good place to start – it’s free and takes about 60 seconds to run a test.
If you’re somewhat tech savvy SEO tools like Screaming Frog SEO Spider and ContentKing can do sitewide speed tests.
There’s some broad recommendations on reducing page sizes or page weights below and more detail on this post titled How To Fix The ‘Avoid Enormous Network Payload’ Warning In Google Pagespeed Insights
Image Compression & Optimization
If your site is like most WordPress sites images have probably been uploaded without any compression which means file sizes are bigger than they have to be. Using an image compression plugin like Shortpixel, Imagify or EWWW can in many cases significantly reduce the size of images across the site.
NextGen Image Optimization
You’re probably familiar with JPGs, PNGs and GIF image formats. There’s a newer image format, .WebP, that keeps the original image quality while reducing the file size even more significantly (up to 50% of the original JPEG or PNG). The only downside to this format is that it’s still not supported by all browsers so we need to implement this image file format either via a plugin or CDN.
Depending on the site, we’ll use either Shortpixel, EWWW or Imagify or image optimization and for injecting webp images. This article titled “How to Serve Images in Next-Gen Formats in WordPress” explains in more detail.
Lazy Loading
Lazy loading prevents any files outside the viewable area from loading when the page initially loads.. This makes the page much smaller as not all images are loading with the page. As the visitor scrolls down, images load as they come into view (or just before they come into view)
Lazy loading can also be applied to videos and other heavy elements like Google Map embeds and is especially important if you have multiple Youtube videos or media elements on a page. A standard YouTube embed is around 0.7 megabytes and a page with multiple Youtube videos is going to be quite large.
Typically we’ll use Autoptimize for image lazy loading (we’ll explain in the next section) and WP Rocket for video lazy loading or if the theme or page builder supports it, use the native lazy loading features it has for video.
Step 4 – Disable Lazy Loading Above the Fold
While lazy loading images below the fold is great for reducing page sizes, lazy loading images in the viewable area will usually hurt the LCP timing. This is because lazy loading is typically driven by a javascript file which means the above the fold images need to wait until the JS lazy load file executes before they can load.
We can solve this problem by excluding images above the fold from lazy loading. Autoptimize has a feature where you can exclude the first X number of images on each page from lazy loading which is why we use it. For most sites setting this number to 3 or 4 will solve this problem.
We also typically exclude the logo file from lazy loading and will usually manually review the top 5-10 pages on a site and add manual lazy load exclusions for pages where there’s more than 4 images above the fold.
Step 5 – CSS & JS Optimization
Optimizing CSS and Javascript will help your LCP timing too.
CSS Optimization
WPRocket has CSS optimizations built in and for most DIYers this is probably the best solution. It can inline above the fold CSS and defer the rest automatically *most of the time.
JavaScript Optimization
Slow javascript is probably going to hurt your LCP timing more than your CSS performance. Below we’ve outlined how we typically optimize javascript. This post explains how to defer and optimize javascript in much more detail.
Defer JavaScript
Deferring javascript means it executes later in the render process which frees up processing on the device to focus on rendering the page. Without this in place, ever time the browser encounters a javascript file in the code it will pause the rendering to process and execute the file. Typically we use the defer JS feature inside WP Rocket
Cloudflare’s Rocket Loader may also be useful here and is an automated way to defer JS that may squeeze slightly more performance out of your JS versus WP Rocket alone.
Pause JavaScript Until User Interaction
Another option is to pause the processing until the user interacts with the site which means the JS doesn’t download or execute until the user scrolls, clicks or otherwise interacts with the page This is great for Live chat code or Facebook Messenger code which can be very heavy and seriously increase the page size and chew a ton of processing power on the device. Again typically we WP Rocket for this but also use this feature in Perfmatters.
Move Javascript Down
Javascript code is processed top to bottom so code at the top of the page is processed earlier in the load. Simply moving code further down the page from say the header to the footer of the site will usually speed things up and particularly with third party tracking code, have no noticeable impact on the performance of the code.
Use Google Tag Manager
Google Tag Manager is a free product by Google, created for managing third-party tags. It offers different ways to trigger the code. The default setting is that the code is triggered as soon as someone hits the page. The other option is called window loaded, and it doesn’t trigger the code until the page is fully loaded. Basically, it doesn’t process the JS until the end of the page loads, so the way it works is similar to deferred JS and may be useful in some cases for more complex code.
Step 6 – Troubleshooting Difficult LCP Issues
The steps above will cover most scenarios but especially where the page design is more complex, these steps might not be enough to get under ou 2.5 second threshold. The steps below will help troubleshoot these edge case scenarios where the LCP may still be poor:
Fix 404 Errors
404 errors are always bad for speed and cause the page load to be unreliable and inconsistent. When the browser comes across a 404ing file or asset this will typically manifest itself as freezing or delays in the page load.
Our tool SiteSpeedBot will scan your page for 404 errors and is great for optimizing a single page but a tool like Semrush or Contentking will help you find 404s sitewide.
Avoid Using Video Backgrounds, Pop-ups, and Fade-ins
Any animated or moving elements like fade-ins, slide-ins, transition elements and video backgrounds will typically hurt your LCP timing. Lets look at these one by one:
Optimizing Popups
Pop-ups can often be considered as the largest content item on the page and are often the last thing to load so can therefore significantly increase the LCP time. Any easy way to solve this problem is to delay or pause the popup javascript file until the user interacts with the site.
Video Backgrounds
There are very few scenarios where video backgrounds are a positive thing – they look fancy but like sliders they do little to nothing to improve the visitors experience. Removing them and replacing with a high quality image is the best way to optimize them but if you must keep them then loading the video from a CDN and leveraging any lazy loading features your theme has will help here. Many themes have a feature whereby they can show a static image until the video loads and this will usually help improve the LCP time.
Fade-ins, Transitioning Effects & Animations
Any animated elements on a page are going to hurt your LCP metrics. This is because the LCP time becomes load time AND animation time combined and most animations run over a 300-800ms (0.3-0.8 second) time frame so you’re effectively adding 0.3-0.8 seconds onto the load time for no real benefit. Disabling animations and transition effects entirely is the solution.
YouTube Embeds Above the Fold
As stated earlier, YouTube videos can also be a problem but they’re especially a problem when above the fold. Today, most themes will let you include a preview image for the YouTube video on your page so just the thumbnail loads initially and then when the user clicks play the full player will load.
Want it done for you?
We’ve optimized over 4000 WordPress sites and can help make yours load lightning fast too! If you’re looking for someone to do this for you, complete the form on our homepage and one of the team will review your site and tell you what’s doable in terms of site speed.
Related Posts
How To Fix: “Largest Contentful Paint Image Was Lazily Loaded” In Google Pagespeed Insights