How To Reduce or Fix Largest Contentful Paint (LCP) Issue in WordPress

Google Core Web Vitals is here. Google launched the Page Experience Signal update, which brings many changes to SERP ranking, as the boost it brings for websites with Good Core Web Vitals.

LCP also makes up to 25% of the Pagespeed score. Learn how to reduce or fix LCP issues in WordPress with the top 10 tips.

What is the Largest Contentful Paint (LCP)

LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.

It’s ranked as “Good”, “Needs Improvement” or “Poor” scores, respectively represented by green, yellow, and red colors. These are the labels that appear on Search Console, alongside the issue based on field data.

To get an LCP “Good” label, it should load within 2.5 seconds of when the page first starts loading. The threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.


How to check LCP

Always check for Core Web Vitals field data or strive for results from live users. Since Search Console Core Web Vitals data may take a while or be delayed for small website owners, do a test simulating most of your userbase or set up a tool to capture Core Web Vitals field data.

To get field data use Web Analytics by Cloudflare, which we have a guide for.

For testing LCP lab data and field data(when the website has enough data) use Pagespeed. Go to Pagespeed Insights, do a page test, and go to “LCP” under the results. There are two results, mobile, and desktop, the first we go to is mobile:

image 3
Pagespeed mobile LCP test results

The mobile LCP in the result above is a <h2> tag, a text element. Click on the desktop tab to see the desktop LCP. The desktop LCP result may be different than the mobile result.

To see issues related to the LCP, click on the tab below the screenshots “Show audits relevant to” and click LCP.

image 2

Best ways to fix or optimize your LCP in Wordpress

Optimizing LCP is making sure the LCP asset loads early. For that, you can use browser or server-side optimizations so that either the browser or the server(site) finds and loads it earlier.

Set the Fetch Priority High of the LCP

Impact: 38% of Improvement

Boost the priority of the LCP image by specifying fetchpriority=”high” on the image element. To use it download the Wordpress Performance Team Fetchpriority plugin or use Perfmatters.

Use fetch priority high on above-the-fold images, including the mobile image to speed up their load time.

Perfmatters 20% OFF Coupon: WPALPHA

image 11

After fetching in high priority an image, make sure the LCP will be evoked early by loading its CSS early and removing non-essential files from loading before the LCP.

Delay, Defer, or inline render-blocking JavaScript

Impact: Variable

Delaying or deferring non-essential javascript can make the LCP load earlier if the Javascript loads before the LCP. Inline essential javascript(small amount), can make it also appear early. 

This technique requires advanced testing as your website may not be compatible with this approach and will produce errors.

Setup Critical CSS

Impact: Medium

Consider a Critical CSS plugin to load the essential CSS before any assets. WP Rocket offers a Critical CSS and a Remove Unused CSS feature alongside many other Core Web Vitals optimizations.

Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for the homepage, posts, and pages.

Remove unused CSS

Impact: High

Removing unused CSS can lead to LCP load sooner. To remove unused CSS from WordPress, you either use Asset Cleanup, Perfmatters, or Wp Rocket.

Wp Rocket’s “Remove Unused CSS” feature strips unused CSS but may cause issues, especially with page-builder plugins. What defines the plugin/solution you will use may depend on your theme. The remaining options, Asset Cleanup and Perfmatters may only have the interface as a differential.

Only remove 100% unused CSS files after clicking and interacting with all elements on the page.

Get your Unused CSS removed and all pages visually tested!

Host Google Fonts locally

Your theme may be using Google Fonts to load fonts on your website, and they are probably slowing down the speed. Host them on your site(locally) using Perfmatters.

Perfmatters 20% OFF Coupon: WPALPHA

Avoid Combine CSS or JS

If you’re using a page builder and a caching plugin, you probably enabled the combined JS or CSS feature. Although this feature can improve the loading in the desktop version, it may make the TTFB metric worse, causing the LCP to load later.

On slow device connections(3G), the impact on LCP will be worse as the network will delay parsing the elements.

Switch to leaner HTML elements

Impact: High

If you’re using a slider in the header or a large image, switch to a CSS background color(gradient color) or an animated CSS background. It can also reduce the CLS, as sliders may cause them.

Use a smaller(in file size) image or element for the mobile viewport. Consider removing the slider from loading only on mobile, and using an image instead.

If you’re using a background image, switch to an inline image and improve the LCP in many seconds. Sliders can cause the page to not pass the mobile-friendly test, which is part of the Page Experience Google algorithm.

Use a blurry placeholder technique for loading dynamic javascript elements or large images, reserving space for them until they appear.

Consider a CSS-only element to reduce the amount of loading time for the LCP.

Use CDN for images and SVGs

Impact: Medium

CDN(Content Delivery Network), loads the images from distributed servers around the world to speed up the load time. We have a list of free image CDNs and the fastest WordPress CDNs.

Use Cloudflare APO

Impact: Low to High

Cloudflare currently offers Automatic Platform Optimizations (APO) for 5$ USD/month, and it caches the HTML of Wordpress to improve the TTFB(time to first byte). Cloudflare APO is compatible with WP Rocket and many other plugins.

You can also improve your TTFB by choosing a hosting with good TTFB field data. TTFB has a large impact on the LCP metric.

Improve icon font loading or switch icons to SVG

Impact: Low

To improve font loading and LCP, go to your website, look for all the icons used on the pages, and note each class name down. Load only the necessary classes on the font icon css file now. Font Awesome has a cheat sheet listing all icon assets’ classes name

Fontello lets you build a css and font files by choosing only the necessary icons from various icon types, such as Font Awesome, Typicons, Entypo, and many more.

You should have a reminder that for adding new icons, it will need to be manual. 

Limit access from users with bad Core Web Vitals

Impact: High

Core Web Vitals are global, not deferred by country.

Limit access to a region where you’re failing Core Web Vitals. Install and set up Cloudflare Web Analytics. With the available data, you can define if some country contributes to lowering the Core Web Vitals. Install Cloudflare reverse-proxy CDN and block the region via firewall rules.

You should allow Googlebot and other search engine crawlers to crawl your website through their bot crawlers. Crawlers can be from multiple locations. Please note this approach can also cause a reverse effect and worsen the metrics, as your blocked users may use a VPN with a lower speed to access the site.

Get your LCP Optimized!

Boost Your WordPress Speed. Subscribe Now!

*No spams

Notify of

Inline Feedbacks
View all comments