LCP, or Largest Contentful Paint. is a core web vitals metric representing the time needed for the biggest part of the webpage to appear in the visitor’s browser. It’s one of the most important factors for website’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.
This post shares the techniques for improving LCP time that we’ve developed after optimizing over 4000 sites.
What Is Largest Contentful Paint or LCP?
Put, LCP, or the largest contentful paint time, is when the largest content becomes visible to the user. This includes everything 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 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 measure page speed from the visitor’s perspective versus other more traditional speed metrics like onload time or document complete time. or fully loaded time. Regardless of how high or low your fully-loaded time or onload time is. If the visitor perceives the page as slow, 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 Largest Contentful Paint 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 for Google to consider this metric 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 failure zone.
You’re going to see warnings in Google Search Console if your pages fall into the “needs improvement” or bad/fail zone.
How to Improve Your Largest Contentful Paint 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 on some of your other speed timings. In the case of LCP, two other metrics influence this one, or that should be the focus before you look at LCP timings. TTFB (time to first byte) and FCP (first contentful paint) metrics. If these two aren’t looking good. 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.
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 prerequisite 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 from time to time to first-byte speed. DNS is the “internet’s phone book” in simple terms; it translates hostnames to IP addresses. After you type the web address into the URL bar, your browser goes and ‘talks’ to the DNS host. This then turns the desired hostname 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 one of the top 3 fastest DNS hosts in the world at DNSPerf.com.
Note that you can only use Cloudflare for DNS hosting 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 worldwide that host some of all of your pages. This reduces the impact of geography on site speed. And allows your web hosting to handle a significantly higher volume of simultaneous visitors.
Our general recommendation for 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-sized sites. Cloudflare released a new service called APO in mid to late 2020. 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. We strongly recommend it to 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. It is usually the logo in the header since that’s 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 that deals with reducing your FCP time that would be worth digging into before tackling the LCP time.
NOTE: FCP and TTFB aren’t core web vitals metrics, but they have a strong impact on all the other metrics. Remember that poor TTFB and FCP timing will also cause other metrics to perform poorly. So it is 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 the 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. Your webpage size should be one megabyte or less in the perfect scenario, but this is not always possible or practical.
The first step here would be to check your pages’ size. 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.
SEO tools like Screaming Frog SEO Spider and ContentKing can do sitewide speed tests if you’re somewhat tech-savvy.
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. A newer image format, WebP, 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 via a plugin or CDN.
Depending on the site, we’ll use Shortpixel, EWWW, Imagify, or image optimization to inject web images. This article titled “How to Serve Images in Next-Gen Formats in WordPress” explains more detail.
Lazy Loading
Lazy loading prevents files outside the viewable area from loading when the page initially loads. This makes the page much smaller as not all images are loading. 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. Other heavy elements like Google Map embeds are 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 will be quite large.
Typically we’ll use Autoptimize for image lazy loading (explained in the next section) and WP Rocket for video lazy loading. If the theme or page builder supports it, use the native lazy loading features for video.
Step 4 – Disable Lazy Loading Above the Fold
While lazy loading images below the fold are great for reducing page sizes. Lazy loading images in the viewable area 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. We will usually manually review the top 5-10 pages on a site and add manual lazy load exclusions for pages with more than four images above the fold.
Step 5 – CSS & JS Optimization
Optimizing CSS and Javascript will help your LCP timing too.
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. Order our plan here and one of the team will review your site and tell you what’s doable in terms of site speed.
