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

Updated on February 1, 2023 | By

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.

Learn how to reduce or fix WordPress LCP 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.

lcp

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

Consider the following solutions for solving or improving LCP issues:

  1. Setup Critical CSS
  2. Switch to lighter HTML elements
  3. Use CDN for images and SVGs
  4. Preload the LCP
  5. Use Cloudflare APO
  6. Improve icon font loading or switch icons to SVG
  7. Limit access from users with bad Core Web Vitals
  8. Cut and use a different image for the mobile
  9. Avoid page builders or update yours

Setup Critical CSS

Impact: Medium

Consider a Critical CSS plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for the homepage, posts, and pages.

WP Rocket also offers a Critical CSS feature alongside many other Core Web Vitals optimizations.

Switch to lighter HTML elements

Impact: High

If you’re using a slider in the header or a large image, switch to a simple CSS background color(gradient color) or an animated CSS background. It can also reduce the CLS, as sliders may cause them. Consider also removing the slider from loading only on mobile, and using an image instead.

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.

Preload the LCP

Impact: Low

Preload above-the-fold images including the mobile image to speed up their load time. Use a WordPress function to preload the image only on the specific pages where it appears, or use a plugin to do it automatically.

Use Perfmatters and its conditional preloading to preload assets only on certain parts of the website, or its “Preload Critical Images” beta feature that will automatically preload the number of leading images that you choose (0-5).

After preloading an image, make sure the LCP will be evoked early by preloading its CSS and removing non-essential files from loading early than the LCP.

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 is contributing 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.

Cut and use a different image for the mobile

Impact: Low

Cut the size of the LCP image and use a smaller image for the mobile viewport. Modern themes have built-in UI to change responsive images.

Avoid page builders or update

Impact: High

Consider a theme that has a mobile-first CSS approach, which is a stylesheet for mobile different from desktop. Many of the popular page builders don’t have this approach.

Update your theme builder to the latest release, it may have improvements on its CSS, and thus the DOM.

Elementor has a feature to optimize the DOM, go to Elementor > Settings > Advanced. Using this feature can potentially break your website features, use it wisely.

image 6
Elementor Optimize DOM feature

Get your LCP Optimized!

Leave a Comment