How to Improve “Largest Contentful Paint” in WordPress

Our guide on “Largest Contentful Paint WordPress” comes with a tested and proven framework to improve the Largest Contentful Paint in WordPress.

Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time takes for the largest content element in the viewport to become visible.

Largest Contentful Paint is a user-centric metric, and to provide a good user experience, the Largest Contentful Paint should occur within the first 2.5 seconds of the page load time.

How to Improve "Largest Contentful Paint" in WordPress 1

Improving the Largest Contentful Paint in your WordPress sites is the first and foremost step to optimizing your web pages for visitors, apart from First Input Delay and Cumulative Layout Shift.

How to Improve "Largest Contentful Paint" in WordPress 2
LCP is part of Core Web Vitals.

We have optimized our WordPress site to pass Core Web Vitals, and the Largest Contentful Paint is the primary reason to achieve this as we brought them below 2.5 seconds (earlier, it was 4.0 seconds).

How to Improve "Largest Contentful Paint" in WordPress 3

Want live data? Check this URL on PageSpeed insights, and we will probably be scoring 100 on both mobile and Desktop if you test from any part of the world. Our WordPress site also passed “Good” in the search console, even though we use Thrive Architect on most pages.

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

1. Use a hosting service with a fast server response time. This post of Fastest WordPress Hosting tested 16 hosts to find which host is the fastest. Go through it and see whether your host is fast or not.

2. Remove Unused CSS & JS using PerfMatters plugin.

3. Use WP Rocket for caching and to “Delay JavaScript Execution,” which dramatically improves “Largest Contentful Paint” by at least 50%

BONUS: Use NitroPack.io to automatically improve your scores. None of the above steps are required. NitroPack will take care of everything. Use Code “BLOGGINGIO” to get a 5% discount on any plans. Below is a sample of how it works.

How to Improve "Largest Contentful Paint" in WordPress 4
Before
How to Improve "Largest Contentful Paint" in WordPress 5


After

How to Improve "Largest Contentful Paint" in WordPress 6
Before NitroPack
How to Improve "Largest Contentful Paint" in WordPress 7
After NitroPack

TRY NITROPACK FOR FREE

What Does NitroPack Do?

NitroPack includes

  • A guaranteed score of 75+ on mobile and 90+ on Desktop.
  • CDN powered by Amazon Cloudfront with 200+ global POPs.
  • Advanced caching mechanism.
  • Complete Image Optimization Stack.
  • HTML, CSS, and JS minification and compression.
  • Proprietary, world-class speed algorithm.
  • Use code “BLOGGINGIO” to get 5% OFF on premium plans.

GET STARTED FOR FREE

Note: This post is the first update of the Largest Contentful Paint improvement guide for WordPress with simple-to-use solutions.

According to Google, these four factors result in the low Largest Contentful Paint value.

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

While our team has been working on various platforms optimizing Largest Contentful Paint, nothing comes as easy as optimizing WordPress CMS.

Below are the best ways to improve the Largest Contentful Paint of your WordPress sites.

How to Improve the Largest Contentful Paint in WordPress

1. Reduce Server Response Time (TTFB)

The lower the response time, the faster your webpages, and it will magically improve the Largest Contentful Paint of your WordPress websites.TTFB measures how fast your server sends the first byte of data to the end user.

Based on 10k tests per month, the Templ host has the lowest server response time. In fact, only after using them did I pass the Core Web Vitals in just seven days (case study here).

Templ is affordable Cloud hosting powered by Google Cloud + CDN + DNS. The company offers Google CDN full-page caching and is the only host to offer this feature in the entire industry.

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

How to Improve "Largest Contentful Paint" in WordPress 8

Let's take my WordPress site hosted on Templ $15 plan, and the site TTFB loads in less than 300 ms globally. In particular, Templ using Google CDN produces sub-100ms TTFB across all US locations.

How to Improve "Largest Contentful Paint" in WordPress 9

You can also compare my above site result with any of your hosts, and I bet Templ always tops when it comes to performance.

While Server response time is the basis for fixing the Largest Contentful Paint issues in WordPress, you shouldn't compromise on shared hosting, which will be renewed at more than $10 per month and requires yearly billing. On the other hand, Templ costs just $15 per month (with $30 free credits) forever and doesn't require any annual billing.

2. Optimize WordPress Caching

Optimizing the caching is the easiest way to create the Largest Contentful Paint in WordPress-based sites. Most Managed WordPress Hosting runs server-side caching 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 caching.

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

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

How to Improve "Largest Contentful Paint" in WordPress 10

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

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

  • Minify CSS and JS files
  • Optimize CSS and JS files.
How to Improve "Largest Contentful Paint" in WordPress 11

While most sites recommend combining CSS/JS files, it's not the correct way. If your server uses HTTP/2, then don't combine CSS/JS. Head to HTTP/2 test and check once or ask your host for more info.

How to Improve "Largest Contentful Paint" in WordPress 12

The final option is “Load JavaScript Deferred.” Enable this option to eliminate render-blocking JS on your site to improve load time. It can break WordPress sites. 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 content. You can also enable LazyLoad for iframes and Videos. Replace YouTube iframe with preview images.

How to Improve "Largest Contentful Paint" in WordPress 13

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

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

How to Improve "Largest Contentful Paint" in WordPress 14

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

How to Improve "Largest Contentful Paint" in WordPress 15

Under the Prefetch DNS request, you can add your Google analytics, fonts, or 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

CDN plays a vital role in your WordPress sites' Largest Contentful Paint scores. In fact, no matter how fast your server is, CDN is essential to connect your server with the end user.

Here are the significant CDNs I use to deploy and optimize hundreds of WordPress sites.

This is the list of fastest CDN in North America (USA & Canada) based on 300million tests per day.

How to Improve "Largest Contentful Paint" in WordPress 16

Since CDN is necessary, I'm adding more info here. jsDelivr is an open-source 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, and Verizon are priced at least more than $100/month and Fastly requires $50/month billing. Though Cloudflare is free, it's not the fastest; one must pay $20/month for a single site on the Cloudflare Pro plan.

StackPath is the fastest yet cheap, priced at $10/month for unlimited sites. BunnyCDN is economical but at least 10 – 15ms slower than StackPath, but they're improving significantly.

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 WordPress is added to Cloudflare, you'll be presented with two nameservers and update the same on your domain panel. Under Auto Minify, Choose all (JavaScript, CSS, and HTML) and turn on Brotli. Navigate to Speed and select Optimization.

How to Improve "Largest Contentful Paint" in WordPress 17

You can either enable minify here or manage the same on the 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.
How to Improve "Largest Contentful Paint" in WordPress 18

Finally, to Page Rules. These are the basic settings to improve your TTFB on a new level.

Through PageRules, we will deliver HTML pages from Cloudflare instead of your server.

How to Improve "Largest Contentful Paint" in WordPress 19

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

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

How to Improve "Largest Contentful Paint" in WordPress 20

Now, you have solved five of Google's suggestions like

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

4. Remove Unwanted & Slow Loading Plugins

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

If you can't achieve the desired results, read the advanced Largest Contentful Paint optimization WordPress. To perform any of these LCP processes, your WordPress site needs to be audited first.

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

  • Do any necessary plugins take time to load? Optimize or replace it.
  • If an unwanted plugin takes time to load? Remove or replace it.
How to Improve "Largest Contentful Paint" in WordPress 21

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

How to Improve "Largest Contentful Paint" in WordPress 22
My most recent work.

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

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

With mandatory presence, Image optimization is a significant factor in improving Largest Contentful Paint.

5. Compress Images for Optimal Delivery.

Using a premium host like Rocket.net, it comes with inbuilt image optimization through Cloudflare Enterprise (Mirage and Polish), which does perform lossless image compression for unlimited images uploaded on the site.

How to Improve "Largest Contentful Paint" in WordPress 23
Cloud Image Optimization through all their global POP locations.

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

6. Use Image CDN to optimize images

Your site images come with a fixed size and are delivered in the same format, irrespective of end-user screen size. This hugely affects Core Web Vitals as the images are not optimized for user experience. The ideal option for image optimization is using an Image CDN.

Latest Update: Lately, I'm getting better results with full-page caching instead of Image CDN. You can skip this section if your hosting uses full page caching.

This is where Image CDN comes 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 the viewport

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 network powered by Google Cloud. That's not the only thing; WP Compress also delivers optimized images based on screen size.

How to Improve "Largest Contentful Paint" in WordPress 24
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 the most effective since mobile scores are the most challenging part of improving Largest Contentful Paint.

Compressing the Image will not be effective as users browsing from different viewport devices may face loading issues. The only way to fix the issue is to deliver the right image size for the visitors' mobile or desktop browsers.

7. Client-side Rendering

There are no standard settings to fix with Client-Side Rendering. If your WordPress shows “Good” in the search console, we can safely ignore these setups.

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

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

Hint: Javascript 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. Neve)
  • 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.

8. Delay JavaScript Execution

Through this feature of WP Rocket, you can delay specific loading JavaScripts that aren't required to load at the initial time. Some examples are live chat widgets, Analytics scripts, Facebook pixels, etc. I'm getting more success in recent times with this method.

You can easily use the GTMetrix waterfall tab to see which scripts can be delayed to reduce the initial load time, improving the Largest Contentful Paint score.

How to Improve "Largest Contentful Paint" in WordPress 25

WP Rocket includes a list of Scripts that can be delayed by default, which reduces 50% of our work.

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

9. Use NitroPack to improve the Largest Contentful Paint

NitroPack is our new favorite optimization service, suitable for non-technical folks and whoever needed a quick fix.

The below WordPress site is hosted on SiteGround GoGeek with caching performed by their “SG Optimizer” plugin. The Largest Contentful Paint score is 7.7 seconds on mobile and 2.0 seconds on Desktop.

Now, I used NitroPack free plan to test the site. The Largest Contentful Paint score is 2.8 seconds on mobile and 0.7 seconds on Desktop. That is more than 75% of improvements in the Largest Contentful Score.

How to Improve "Largest Contentful Paint" in WordPress 4
Before
How to Improve "Largest Contentful Paint" in WordPress 5


After

How to Improve "Largest Contentful Paint" in WordPress 6
Before NitroPack
How to Improve "Largest Contentful Paint" in WordPress 7
After NitroPack

For your better understanding, here is the table

Compare
SiteGroung GoGeek (Mobile)
Nitropack Score (Mobile)
Score
32
93
FCP
3.7s
1.1s
Speed Index
5.8s
2.1s
Largest Contentful Paint
7.7s
2.8s
Time to Interactive
7.5s
2.4s
Total Blocking Time
1220ms
210ms
Cumulative Layout Shift
0.055
0.241
Compare
SiteGroung GoGeek (Desktop)
Nitropack Score (Desktop)
Score
87
100
FCP
1.0s
0.3s
Speed Index
1.5s
0.5s
Largest Contentful Paint
2.0s
0.7s
Time to Interactive
1.1s
0.3s
Total Blocking Time
0ms
0ms
Cumulative Layout Shift
0.003
0

The major highlight is, NitroPack takes care of everything from caching, CDN, delay in script execution, HTML/CSS/JS minifying, and a complete image optimization module.

There is a free plan for you to test them out. If you are going for a premium plan, use code “BLOGGINGIO” to get a 5% discount on any plan.

Google announced the Core Web Vitals will be a ranking factor in 2021, and it's just a few months ahead of us.

Follow our guide to improve your Largest Contentful Paint score in WordPress. If you have suggestions or improvements to the content, please input your thoughts in the comments.!

Source 1, Source 2.

About Mike Toohey

Ex-WT, Freelance Linux Administrator. Passionate about writing on what I do & look here at bloggingio.com for my recent writeups. If not working, you can find me chilling with my dog, Ivy.

6 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.

  4. I would like to migrate my website to Cloudways (Lindoe), how to choose the package? do you have any suggestion?

  5. Thanks for sharing about the techniques for Improving Largest Contentful Paint” in WordPress