How to Improve “Largest Contentful Paint” in WordPress

If you are aware of Core Web Vitals, then you need no introduction for “Largest Contentful Paint

Also termed as: LCP

Optimize LCP in WordPress

Improving LCP is the first and foremost step to optimize your web pages for global visitors apart from First Input Delay and Cumulative Layout Shift.

LCP part of Core Web Vitals.

Here is our web pages tested against new Core Web vitals and LCP optimization is the major reason to achieve this feet.

Want live data? Check this URL on PageSpeed insights and probably we will be scoring 100 in both mobile and desktop.

If you are launching a new site or optimizing an existing WordPress site, follow the guide along with us, and learn how to optimize sites from “Poor” to “Good” by following Google Guidelines.

Note: This post is the very first update of LCP optimization for WordPress with simple to use solutions through which most sites can score “Good” in Search Console. However, based on the feedback, I'll make sure to update the post often with medium to advanced optimization techniques. Our goal is to help businesses to optimize their sites without any third-party support.

How To Optimize LCP in WordPress

According to Google, these are the four factors which results in poor LCP value.

  • Slow Server Response Time
  • Render-blocking Javascript and JSS
  • Slow resource load times
  • Client-side rendering.

Although Google classifies optimization in above order, our WordPress optimization guidelines are slightly different.

While our team has been working on various platforms optimizing LCP, nothing comes as easy as doing optimization in WordPress CMS.

Here are the best ways to improve LCP of your WordPress sites.

1. Reduce Server Response Times (TTFB)

TTFB measures how fast your server is sending the first byte of data to the end-user.

Lower the response time, faster is your webpages.

You need to choose the Fastest WordPress Hosting to deliver fast loading pages. If your site is slow and still your hosting provider says “everything is fine”, they're probably overselling and you need to pick a fast host.

I use and recommend the following hosts that works just out of box.

Why Cloudways? Let's do a practical comparison. The below TTFB results are from the site hosted on SiteGround Startup plan that costs $19.99 per month. The TTFB starts from 245ms in USA and more than 500ms in Europe while takes more than one second in Asian countries.

Let's take the below site hosted on Cloudways $10 per month Digital Ocean plan and the site TTFB loads from just 15ms and average 250ms in European locations and takes 600ms TTFB from Asia countries.

You can see how faster Cloudways when compared to SiteGround (both the sites comes with same setup, no CDN involved, USA data centers).

You can also do a comparison with any shared hosting company and I bet Cloudways always tops the results when it comes to performance.

While Google recommends less than 200ms TTFB as good, you need a solid host like Cloudways to pass Core Web Vitals scores.

This is Notification Box

I created this to let you know that Cloudways was running a Black Friday deal with a 40% discount on any of their 50+ plans. Once the deal gets over, I'll remove this box.

With this Cloudways deal, you will get

  • Access to fastest hosting (less than 20ms TTFB)
  • Free plugin to move your sites instantly to Cloudways
  • Access to their Breeze caching plugin
  • Productive control panel, unlimited site hosting on all plans.
  • 24/7/365 days of support
  • With 40% applied, you will be paying just $6/month for the first four months (while choosing the Digital Ocean $10 plan)

TAKE ME TO REGISTRATION

I also put the sites to test from Pingdom to monitor response time from 25 US locations and there is no surprise, Cloudways averages 336 ms while SiteGround averages around 676ms.

Cloudways – 336ms
SiteGround – 676ms

If you check my blog, you can see I wrote a lot of real reviews with such uptime, response time details of many hosting companies but nothing comes close to what Cloudways offers for just $10 per month.

While Server response time is the base to fix LCP issues, you shouldn't compromise on cheap shared hosting which is going to be renewed at more than $10 per month and requires yearly billing. On the other hand, Cloudways costs $10 per month forever and doesn't require any yearly billing.

If you can't move your sites out of SiteGround or other shared hosts due to billing period, then check this guide on improving TTFB in SiteGround.

You can see our site loads in less than 50ms across most US & Europe locations and loads between 50-150ms in Asia which is the farthest location from my physical server.

In most cases, if your host TTFB is less than 1000ms, the upcoming optimization will do wonders to improve TTFB. However, if your TTFB is over 1000ms across all locations, choose a good TTFB Hosting and follow the below optimization techniques to make your URLs turn from “Poor” to “Good” in search console.

Use Code: BIO25 to get $25 free credits for the first month on Cloudways. Works only on new accounts.

2. Optimize WordPress Caching

For any type of WordPress sites, caching is the most essential thing. Most Managed WordPress Hosting runs server-side caching which is faster than PHP based plugin caching. If your hosting company doesn't offer caching on the server, use W3 Total Cache or WP Rocket for optimization.

For this tutorial, I'm considering WP Rocket since it does the job perfectly than any other caching plugin in the market.

Once activated the plugin, follow the below options for optimal settings.

Cache Tab: Enable Caching for mobile devices and also enable “Separate Cache Files for Mobile devices”. Every other option can be left default.

File Optimization: Under Basic settings, enable all the options.

  • Minify HTML
  • Combing Google Font Files
  • Remove Query Strings From Static Resources.

Since we are planning to use CDN, you can either choose minify HTML in the plugin or you can enable the same on CDN. We can see more on this later.

The same goes for CSS and JavaScript Files Settings. Since we are going to use CDN, we can skip Minify CSS & Java Script Files.

Now, if your server is using HTTP/2, you shouldn't be combine CSS and JavaScript files.

While most sites recommend you to combine for fast loading pages but it's not correct way unless you don't know what HTTP type you servers are using. Head to HTTP/2 test and check once or ask your host for more info.

The final option is “Load JavaScript Deferred”. Enable this option, to eliminate render-blocking JS on your site to improve load time.

Also, you can enable Safe Mode For jquery (test manually)

Media: Enable Lazy Load for images as this got recommended by Google across all their optimization contents. You can also enable LazyLoad for iframes and Videos. Replace YouTube iFrame with preview images.

Enable “Disable Emoji” and also “Disable WordPress Embeds”

Preload: Most users ignore these settings but along with speed, preload settings should be optimized for better SEO rankings as the sitemap is the one which is going to tell Google about your site's new content.

Enable “Activate sitemap-based caching preloading” and WP Rocket automatically finds your sitemap if you major SEO plugins like Yoast, Rank Math. If not, manually enter the sitemap URL in the text box.

You can also wait for WP Rocket Black Friday 2020 Deal to get at least a 30% discount on their plans.

Under the Prefetch DNS request, you can add your Google analytics, fonts, or any other external requests. This option should be done as mandatory since Google recommends this for great Core Web Vital results.

WP Rocket team added a Github page with the most possible URLs that require DNS fetching. Even if you don't use WP Rocket, you can use the same on your caching plugins to improve load time.

To make things perfect, run your domain at Prefetch.xyz to get the list of domains that can be prefetched.

//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//youtube.com
//api.pinterest.com
//cdnjs.cloudflare.com
//pixel.wp.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//disqus.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//stats.wp.com

3. Use Fastest CDN

Now, we completed initial steps and we move on adding CDN to your sites. Here are the major CDNs I used to deploy and optimize hundreds of WordPress sites.

Here are the fastest CDN in North America (USA & Canada) based on 300million tests per day.

Since CDN is pretty important, so I'm adding a few more info here. jsDelivr is open source CDN for developers, Google CDN can't be used separately unless you host your sites on Google (Templ.io offers Google Cloud + CDN).

CDNetworks, CacheFly, Akamai, Verizon are priced at least more than $100/month and Fastly requires $50/month billing. Though Cloudflare is free but not the fastest CDN and one needs to pay $20/month for a single site on the Cloudflare Pro plan.

Out of all, StackPath CDN is the fastest yet cheap priced at $10/month for unlimited sites. BunnyCDN is economical but at least 10 – 15ms slower than StackPath.

Since Cloudflare is free, I'm writing this post with its configuration settings, and here is the official guide to WordPress StackPath settings.

Once your site is added to Cloudflare, you'll be presented with two nameservers and update the same on your domain panel. Navigate to Speed and select Optimization. Under Auto Minify Choose all (JavaScript, CSS, and HTML) and also turn on Brotli.

You can either enable minify here or manage the same on settings of WP Rocket. However, Cloudflare settings are optimal for me.

Now, navigate to Caching tab and do the following settings.

  • Caching Level – Standard
  • Browser Cache TTL – Respect Existing Headers
  • Always Online – ON.

Finally to Page Rules. This is the important settings to improve your TTFB on a whole new level.

Through PageRules we are going to deliver HTML pages from Cloudflare instead of your server.

By enabling this option, Cloudflare will store your content on its global data center locations. Even if your server is in the USA and while someone visits the site from Singapore, the contents will be delivered from Cloudflare Singapore location instead of the USA, thus the TTFB is highly reduced.

The concept is called Full Page Cache. Once the above steps are done properly, you will get the TTFB like this.

Now, you have solved five of Google optimization suggestions like

  • Slow Response Time
  • Render-blocking JavaScript and CSS optimization,
  • Lazy Load images,
  • DNS prefetching
  • Edge HTML caching with Cloudflare CDN.

4. Remove Unwanted & Slow Loading Plugins

If you are running a blog most of the above settings are enough to improve LCP like how I did it for this blog.

If you can't achieve the desired results, follow reading the advanced LCP optimization.

To perform any of these functions, your site needs to be audited first.

Head to Gtmetrix.com and run the slow loading URL. Now check the waterfall tab and see which files take time to load. Now you need to think whether

  • Any necessary plugins take time to load? Optimize or replace it.
  • If unwanted plugin takes time to load? remove or replace it.

I'm concluding here like, there are various other factors that can slow down your site. But after optimizing hundreds of sites, I believe the above things are the most common issues that we fix for any WordPress sites.

My most recent work.

Here comes some of the additional ideas to implement on your site.

A picture is worth a thousand words. Publishing blog posts without images aren't worth in 2020 and largely affects leads and conversions.

With mandatory presence, Image optimization is one of the major factors to improve LCP.

5. Compress Images for Optimal Delivery.

If you are using a premium host like Liquid Web, it comes with inbuilt image optimization which does perform lossless image compression for unlimited images uploaded on the site.

Alternatively, you can use free image compression plugins like WP Smush, Imagify, etc which does the job in limited numbers as they don't allow bulk optimization of more than 50 images.

6. Use Image CDN to optimize images

The ideal option for image optimization is using an Image CDN (as recommended by Google)

Your site images come with fixed size and gets delivered in the same format irrespective of end-user screen size. This hugely affects Core Web Vitals in common as the images are not optimized for user experience.

This is where Image CDN comes us to recuse and here are the features

  • Deliver images based on screen size
  • Converts your image to WebP format for fast loading
  • Loads images only in viewport
  • Delivery via CDN

WP Compress is the all-in-one image optimization tool for WordPress. WP Compress not only cleans up your images but also serves images from its global CDN network powered by Google Cloud, the fastest CDN in the globe. That's not the only thing, WP Compress also delivers optimized images based on screen size.

Here is my WPCompress Dashboard. One-Click option to deliver Adaptive images, WebP, Lazy Load, and Deliver from CDN.

I found the device based image delivery to be most effective since mobile optimization is the hardest part of Core Web Vitals.

Just compressing the image is not going to be effective as users browsing from different viewport devices may face loading issues and the only way to fix the issue is delivering the right image size for the visitors' browser either mobile or desktop.

7. Client-side Rendering

There are no common settings to fix with Client-Side Rendering. If your sites are shown “Good” in search console, we can safely ignore these setup.

In a worst-case scenario like running a resource-hungry WooCommerce site, this client-side rendering can be very useful and make sure to analyze the site to find the critical issues.

Since this involves custom optimization works, we are skipping this Client-side rendering as only upon checking the site, anyone can give ideas.

Hint: Javascripts is the most common thing that needs to be optimized here. Some general ideas are

  • Choose themes with less or no JavaScript functions (For ex. Astra)
  • Choose themes or plugins that are lightweight.
  • Avoid fancy widgets or embedding social media posts often
  • Use WP Rocket iFrame settings while embedding Youtube videos.

Based on optimizing more sites in the coming days, I can expand the article with more ideas if time permits.

//see you all soon.

Source 1, Source 2.

Optimize LCP in WordPress

4 comments add your comment

  1. Thank you, Mike! It is a very useful article, even for W3 Total Cache users like me.

  2. This is an awesome post. I followed your tips and my lighthouse score went up by 30 points. Thank you for putting this post together.

  3. this is very helpful and actionable post that i can understand.
    thank you so much!!

    i try to run my domain at Prefetch.xyz, but i can’t get the domain list.
    is there other tool that i can use for check external domains on my webstie?

    i would like to migrate my website to Cloudway (Lindoe), how to choose the package? do you have any suggestion?

    • Hi, appreciate your response. If Prefetch.xyz didn’t return any results, then probably, you don’t have any URLs that need to be prefetched. To confirm further, you can load your page in Chrome and right click, open “View Page Source”. Now search for “Prefetch” and you can check the prefetch URLs.

      Regarding Cloudways, I suggest you choose Vultr as their performance are better when compared to Digital Ocean and Linode. For optimal performance, choosing a 2GB plan is good and don’t forget to use our code BIO25 for $25 free credits.

Leave a Comment

0 Shares
Share via
Copy link
Powered by Social Snap