Fix LCP issue: Longer than 4s (mobile) or (desktop)

LCP issue longer than 4s

If your search console data shows LCP issue: Longer than 4s (mobile) or (desktop) in WordPress or any other CMS, then 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.

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

Currently working on this site.

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

Our very first LCP issue fixed site in May

Fix LCP issue: Longer than 4s

Now, I'm taking a client site in our queue which I'm going to work in coming days and here is the Google Pageinsights report.

Here are the way to fix LCP issues:

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 audiences locale.

In our case, the health care industry client has their target audience in the Netherlands but the hosting server location is in Dallas, USA. This needs to be fixed with the utmost importance.

Since the LCP report is based on chrome users data, there is no point in hosting the site at the farthest location from your target audience.

There are many hosts like Kinsta that offers Managed WordPress hosting services from 24 global data center locations. If your site is not on WordPress, choose Cloudways which is equivalently good providing service from multiple global data center location.

Even many shared hosting companies like SiteGround got data center in all regions (US, UK, Asia and Australia) and I recommend them if you're looking for a decent host under $10 per month.

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 situation like getting visitors from multiple locations, using CDN is mandatory to solve LCP issues.

Simply by 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 a full page caching, then ask you 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 which I use & deployed hundreds of sites in the last four years.

Lower is faster

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

StackPath CDN is the next fastest among North American Region as cheap as $10 per month for unlimited sites.

Fastly requires a minimum $50 per month billing and the fastest CDN next to StackPath and also fastest in the Australian region. Thanks, Neilsen for the point, Flywheel now include Fastly CDN on their plans for free.

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

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

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

Remove Unused CSS & JS

Apart from above techniques, CSS & JS usage 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.

CSS and JS in LCP

You can choose between PerfMatters (paid) or WP Assest Clean Up (free). To make 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 lesser than 10 tables using at some 10 posts, but the TablePress script loads on every page of the site including Homepage.

You can see this site homepage 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.

I turned off Social Warfare Scripts loading in homepage

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

Use Image CDN and WebP images

Most of the 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 what 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.

To solve the issue, image CDN comes into play and wrote a niche guide on the difference between normal & image CDN.

  • The ideal job of image CDN is
  • Real-time image processing based on end user need
  • Delivering the right image size for the user's browser viewport
  • WebP ready images
Credits – WP Compress

Till these days, most sites just compress the image size using plugins but not optimizing it further.

Optimole uses Amazon Cloudfront CDN to deliver images from their 200+ locations while WP Compress uses Google Cloud to deliver images.

Apart from the above exclusive image CDN services, you can also utilize similar service on Cloudflare Pro plan and BunnyCDN for $9.99 per month.

If you don't want to utilize the image CDN, you can try delivering images in WebP format which is 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.