How to Fix LCP issue: Longer than 4s (mobile) [Five Ways]

If your search console data shows LCP issue: Longer than 4s (mobile) or (desktop) in WordPress or any other CMS, our guide will help you fix the same.

This is not just a random writeup, but our team fixed many of these LCP issues, and here are some of the samples. Below site using Page builders, and yet we improved the site.

Improved a site LCP issue from 4s to 2.5 s and now added a few more optimizations to completely eliminate the LCP issue.

Fixed a site to “Good,” which was on LCP issue: Longer than 4 seconds for more than a month.

Fix LCP issue: Longer than 4s

Here are the way to fix LCP issues:

1. Reduce Initial Server Response Time

At first, we need to keep the basics right. Combine your Google Analytics and Search console data and determine the target audience's locale.

Our recent client in the health care industry has its target audience in the Netherlands, but the site is hosted in Dallas, USA. This needs to be fixed with the utmost importance. We moved their site to Kinsta as they got a data center in Eemshaven, Netherlands.

Since the LCP data is calculated based on Chrome user data, there is no point in hosting the site at the farthest location from your target audience.

The reason for recommending Kinsta is they got the maximum of 24 server locations among any other hosting companies. Even within the USA or Europe, they have multiple locations, so you can choose a location closest to your audience.

This is how I fixed LCP below 2.5 seconds, and the site turned “Good” in Core Web Vitals.

Don't forget to claim two months of free hosting on Kinsta annual plans.

2. Invest in Fastest CDN

The server response time can be easily reduced if your target audience is from a single country, but sites like us get global visitors due to the type of tutorials we post.

If you are in such a situation as getting visitors from multiple locations, using CDN is mandatory to solve LCP issues.

Simply using a CDN doesn't improve LCP, and make sure you got Full Page Caching (HTML, CSS & JS) to improve TTFB, thus improving LCP.

If you are already using CDN and not using full-page caching, ask CDN support to implement it. Below is the site report where full page caching is not enabled.

Below is our site using full page caching and see how crazy faster the TTFB values are.

Below are the fastest CDN I've used & deployed hundreds of sites in the last four years.

• Google CDN
• StackPath
• Fastly
• Cloudflare
• BunnyCDN
• AWS Cloudfront

Out of these five, Google CDN is the fastest but requires your sites to be hosted on Google Cloud (Templ.io hosting comes with Google Cloud + CDN)

StackPath CDN is the next fastest in the North American region at $10 per month for unlimited sites.

Fastly requires a minimum of $50 per month billing, so I don't recommend them. Thanks, Neilsen, for the point; Flywheel now includes Fastly CDN on their plans for free.

Cloudflare is great but not the fastest in the free plan. You need to choose a $20 per month pro plan.

BunnyCDN is economical but at least 15-30 ms slower than CDNs mentioned above.

I skipped a few good CDNs like Azure, which requires $29 per month for support & AWS Cloudfront CDN, which is not easy for beginners to configure and use instantly.

So, if you consider the above metrics, StackPath is fast yet affordable to get started. Hint: WP Engine, Cloudways, and many other hosts use StackPath as the CDN partner.

3. Remove Unused CSS & JS

Apart from the above techniques, Unused CSS & JS is the major issue I found on most sites.

In WordPress, the CSS & JS loads on all pages irrespective of the usage. So, the ideal way is to load CSS & JS only when needed.

You can choose between PerfMatters (paid) or WP Asset Clean Up (free).

To make the job easier, I use PerfMatters on all my site including this site.

How to find the unused CSS and JS?

I can explain it in simple ways. Everyone might use a table plugin, likely to be TablePress. You might have created less than 10 tables using at some 10 posts, but the TablePress script loads on every page of the site, including the Homepage.

You can see the below site loads Page builder scripts while the page is built on Gutenberg. Thus by disabling the builder CSS & JS, you can reduce the page size by 3000ms. This how you need to remove the unwanted CSS & JS.

Just head over to any page and click on “Script Manager” in the top bar and you will get an option like this to turn off unused scripts in the page.

The above screenshot from PerfMatters clearly defines the file size and an easy option to disable the scripts.

Wait for a few days and see the Core Web Vitals score in Search Console magically gets improved.

4. Delay JavaScript Execution

WP Rocket added a new feature to delay JavaScripts loading at the beginning. Once activated, the JavaScripts will load only when it's needed.

By defauly, WP Rocket includes a most essential JavaScripts in the list. You can simply add new JS if needed.

5. Use Image CDN and WebP images

Most CDNs just cache your files (CSS, JS, images & HTML) into their POP locations and deliver fast loading pages. Normal CDN's doesn't alter the image and serve to end-user as it is present in your site.

But image needs to be compressed, should be delivered as adaptive images based on the user device, adding image width, and then need to deliver in WebP format.

Image CDN comes into play to solve the issue, and Cincopa.com wrote a nice guide on the difference between normal & image CDN.The ideal job of image CDN is

• Real-time image processing based on end-user;
• Delivering the right image size for the user's browser viewport;
• WebP ready images.

WP Compress is an ideal solution to get started. It's an image compression plugin and delivers adaptive images through Google CDN, and BunnyCDN combined.

If you don't want to utilize the image CDN, you can try delivering images in WebP format, 20x lighter than PNG. There are many free plugins available in the WordPress repository.

Wrapping up

These are the most common fixes to improve Core Web Vitals and if you can't still figure out how to fix, do reply in comments.

If you have any ideas to improve lcp issue: longer than 4s (mobile) ,add it in comments.