How to Reduce Largest Contentful Paint in WordPress

how to reduce largest contentful point

Largest Contentful Paint – LCP is one of the three important factors of Core Web Vitals, it measures the time it takes to load a page’s content.

Google takes Core Web vitals as a measure to determine the user experience on your Site, thereby deciding your Site’s ranking on Google’s Search Engine. So you have to find out the elements that affect your page load and optimize those elements to increase the page loading speed.

The largest element is usually any of these:

  • <H1 tag>
  • Image, Background image
  • Video
  • Animation
  • Block-level element

If your website’s LCP is < 2.5s and measured by Google Page Speed Insight, it will be considered fast.

How-to-measure-and-improve-LCP-Core-Web-Vital

Depending on which element it is, there are specific optimizations you can do to make your LCP element load faster (especially reducing TTFB, eliminating render-blocking resources, and reducing resource load times). Optimizing CSS, images, fonts, and JavaScript also improves LCP.

All these tips on improving Largest Contentful Paint are specific to WordPress.

1. Optimize Your Largest Contentful Paint Element

If your largest contentful paint element is an image or a background image.

LCP Largest Contentful Paint image

  • Compress and preload it.
  • Optimize image size, format, and size before uploading
  • Reduce image’s size using JPEG2000, WebP
  • Serve it from a CDN.
  • Use Plugins that support image loading Lazy Load Plugin by WP Rocket.

Largest Contentful Element

reduce size of background image

If your largest contentful paint element is a video or animation:

  • Optimize video and animation size, format, and Compress it before uploading
  • Avoid self-hosted videos and upload them to YouTube instead.
  • Videos and animations in the hero section will inevitably slow down LCP.
  • Use Plugins that support image loading Lazy Load Plugin by WP Rocket.

LCP Largest Contentful Paint

Video largest Contentful Paint Element

If your largest contentful paint element is a block-level element:

  • Use blocks properly and simplify your design.
  • Determine which text nodes belong to your LCP element.
  • Block elements often have a lower LCP than video/animations.

Video largest Contentful Paint Element

2. Reduce your Largest Contentful Paint image by speed Plugins

You can use speed plugins to assist with preloading your Largest Contentful Paint if your LCP element is an image. This can be done with Speed Plugins like WP Rocket or Perfmatters.

preload the largest contentful paint image

3. Reduce TTFB to Improve WordPress Page Load Times

TTFB stands for Time to First Byte. To put it simply, this is a measurement of how long the browser has to wait before receiving its first byte of data from the server. The longer it takes to get that data, the longer it takes to display your page.

Therefore, reducing TTFP (To Under 600ms) will improve your Core Web Vitals. It will help better user experience and will get a high ranking in Google Search Engine.

TTFB Time to First Byte

A TTFB of 600ms or over will be flagged in Lighthouse. This usually occurs on cheap, shared hosting (GoDaddy, Bluehost, EIG brands). Backlinko also found SiteGround has a slow TTFB.

Join the WordPress Hosting Facebook Group to get unbiased feedback. We all know how many biased affiliates are out there (including me, but I at least try to steer you in the right direction).

I personally use Cloudways who was rated #1 in 18 Facebook polls and is highly recommended in many Facebook Groups. It’s cloud hosting and you have a choice between DigitalOcean, Vultr High Frequency, and other cloud providers. These are much faster than cheap, shared hosting.

4. Reduce Largest Contentful Paint by Eliminating render-blocking resources

In WordPress, eliminating render-blocking resources in WordPress is often fixed by deferring JavaScript in a plugin such as Autoptimize. Common solutions also include using inline critical CSS, removing unused CSS and JavaScript in asset unloading plugins, and preloading your fonts.

eliminate render-blocking resources

WP Rocket and other cache plugins may have an option to load JavaScript deferred and optimize CSS delivery which can help. However, Autoptimize and Async JavaScript are specifically designed to optimize CSS and JavaScript which usually gives you better scores.

5. Improve loading speed by serving Assets from a CDN

Serving images and other assets from a CDN can improve your largest contentful paint and overall load times.

Cloudflare and BunnyCDN are two popular options. If using Cloudflare, consider using their automatic platform optimization to serve your WordPress site from Cloudflare’s edge network. Some plugins like Flying Images both compress images and serves them from Statically’s CDN.

6. Optimize your CSS And JavaScript will improve your CLP

Optimizing CSS and JavaScript is very important as it affects your page loading speed. Removing unnecessary CSS and JavaScript will improve LCP and increase Core Web Vitals score.

Remove CSS and JavaScript

Remove unused CSS and JavaScript – this can be done using plugins like Asset CleanUp or Perfmatters. Plugins, page builders, and other things can load across your entire website, so you can disable them if they’re not being used in certain places. Other tools like RapidLoad (premium plugin by Autoptimize), and online tools like PurifyCSS can also remove unused CSS.

Optimize CSS delivery – some cache plugins like WP Rocket have an option to optimize CSS delivery, but it doesn’t always work or improve performance/scores. Make sure you test that optimizes CSS delivery working, set a fallback critical CSS, generate critical CSS, and clear cache.

Minify, combine, defer, inline – can be done in most cache plugins as well as Cloudflare, Autoptimize, and Async JavaScript. As I mentioned earlier, I recommend Autoptimize and Async JavaScript since it does a better job of handling CSS and JavaScript than other methods.

Third-party JavaScript – JavaScript from third-party code can cause a higher largest contentful paint especially if it’s loading above the fold. See your reduced third-party code report in Lighthouse and optimize these. Many things can be hosted locally (Google Fonts, Analytics, Tag Manager, and Gravatars) using plugins like OMGF, Flying Analytics, and WP User Avatar. You can also use browser hints like preload, prefetch, and pre-connect as mentioned in this tutorial.

7. Swap Google Fonts Display

Fonts are often one of the biggest contributors to both Largest Contentful Paint and cumulative layout shift.

Swap Google Fonts Display plugin will find all Google Fonts in a webpage and set its font display to swap. By default browser will wait until the Google Fonts are downloaded to display the font. This is the reason for the error ensure text remains visible during Webfont load in Google PageSpeed Insights.

Swap google fonts dislay

8. Improve CLP by Cache Plugins 

Which cache plugin you’re using and how it’s configured has a large impact on your WordPress site’s largest contentful paint.

Some cache plugins like LiteSpeed Cache and SG Optimizer use server-side caching which is typically faster (at caching) faster than file-based cache plugins. However, plugins like WP Rocket come with a lot more speed optimization features than most other cache plugins (defer and delay JavaScript, preload, pre-connect, prefetch, mobile cache, optimized CSS delivery, etc).

The cache plugins I just mentioned are solid choices and I have tutorials for both WP Rocket and SG Optimizer. Just make sure you test all the settings and take advantage of its features.

9. Pre-connect and Prefetch Third-Party Domains

If you have third-party code loading on your WordPress site, consider using browser resource hints like prefetch and pre-connect to establish early connections to those third-party domains.

Preconnect and prefetch third party domains

This can be done manually in plugins like WP Rocket or Perfmatters. WP Rocket automatically pre-connects CDN URLs and third-party fonts, but you will still need to add prefetched domains.

10. Restest Largest Contentful Paint – LCP after optimization 

Run your site through Lighthouse or GTmetrix and retest your largest contentful paint.

If your website’s LCP is < 2.5s and measured by Google Page Speed Insight, it will be considered fast.

Restest Largest Contentful Paint

how to check Largest Contentful Paint

how to check Largest Contentful Paint

11. How do I improve Largest Contentful Paint in WordPress?

Find your WordPress site’s largest contentful paint element in your Lighthouse report which is either an image, background image, video, or block element. Optimize that element, for example, you can preload your LCP image. Reducing TTFB and eliminating render-blocking resources are also top priorities when improving LCP in WordPress.

12. How do I improve Largest Contentful Paint using WP Rocket?

WP Rocket can improve Largest Contentful paint by preloading your LCP image, loading JavaScript deferred, optimizing CSS delivery, and minifying/combining CSS and JavaScript. It can also exclude hero images from lazy load and use browser resource hints to establish early connections to third-party domains.

Hope this helped! Drop me a comment if you have questions.

Leave a Reply

Your email address will not be published. Required fields are marked *