How To 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.

To help improve your Core Web Vitals, we choose the best available optimization tasks for fixing and improving LCP on WordPress.

What is the Largest Contentful Paint (LCP) and how to check yours

The Core Web Vitals are ranked as “Good”, “Needs Improvement” or “Poor” labels, together with green, yellow and red colors. These are the labels you’re gonna receive at 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. According to Google, a good threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.

How to check your Largest Contentful Paint (LCP)

As a tip of ours, 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, we recommend testing simulating most of your userbase or setting up a tool to capture Core Web Vitals field data.

To get field data we recommend Web Analytics by Cloudflare, which we have a guide for: How To Get Core Web Vitals Field Data

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

The mobile LCP in the result above is a <h2> tag, a text element.

The desktop LCP in the result above is also a <h2> tag, a text element.

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

Best ways to fix or optimize your LCP in WordPress

After getting field data on Search Console, you’re gonna receive Core Web Vitals results. If you’re presented with the LCP issues – “lcp issue longer than 2,5s” or “lcp issue longer than 4s”, consider the following solutions for solving them.

Change the slider or the background image to a CSS background-color property or an animated CSS background with SVG

Impact on LCP: High

If you couldn’t solve the “lcp issue: longer than 2.5s” issue, you can switch your header background from an image to a simple CSS background color(gradient-color) or an animated CSS background. This can remove more than 2 seconds in some cases from LCP loading time. It can also reduce the CLS.

Use a blurry placeholder technique on javascript elements(dynamic) or large images, properly reserving space for them.

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

Setup critical CSS

Impact on LCP: 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 your homepage, posts, and pages. You can also use WP Rocket(paid) and its Optimize CSS delivery feature. Choose a plugin that is compatible with your current plugins.

If you haven’t bought Wp Rocket yet, consider using my reflink.

Click here to fix the Wp Rocket CLS issue caused by Critical CSS.

Cut and use a different image for the mobile

Impact on LCP: Low

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

Use a CDN for images and SVG’s plus lazyload your images

Impact on LCP: Low

Upgrade the load time from your images, with an image CDN. You can use our list with the 8 best free CDN plugins for WordPress.

If you have many background images, you need to choose an Image CDN service that supports background images, or use Jetpack Image CDN and add the images manually:

/* Replace $image with whatever variable or function is being used to store the image URL or an id, class from the image.*/

if (function_exists('jetpack_photon_url')) {
$image = jetpack_photon_url($image);
}

Popular Image CDN plugins:

Jetpack(Free unlimited image CDN)

ImageKit (Free 20GB monthly tier, SVG support, WEBp support)

Serve HTML pages cache-first (Paid)

Impact on LCP: Low

Cloudflare currently offers Automatic Platform Optimizations (APO) for 5$ USD/mo, and it caches the HTML of your WordPress website. This is possible due to Cloudflare Workers that cache dynamic content. Cloudflare APO can also improve First Contentful Paint(FCP) and Speed Index.

Cloudflare APO is compatible with WP Rocket and many other plugins, check the compatibility here.

Optimize DOM by avoiding page builders

Impact on LCP: High

Consider a theme that has a mobile-first CSS approach, a stylesheet for mobile and desktop. 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.

Preload the largest contentful paint image and disable unnecessary lazyloading

Impact on LCP: Low

To preload the largest contentful paint (LCP) image, follow the steps:

• Install the Head & Footer Code
• Go to the page where you want to preload the images
• Add the following preload <link> tags to Header & Footer Code > Head Code: 

<link rel="preload" as="image" href="your_image_here.png">

By using the Head & Footer Code plugin, you’re making sure you’re preloading the image only when necessary, since each page may have a different LCP.

How to preload a responsive largest contentful responsive image

To preload a responsive image you can add imgsrcset and imagesizes to the <link> element. To preload the following image:

<img src="bear.jpg" srcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" sizes="50vw" alt="bear test image">

You can do the following:

<link rel="preload" as="image" href="bear.jpg" imagesrcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" imagesizes="50vw">

Lazyloading the LCP image may delay its appearance. You can disable the lazyload and preload the logo and the first image of the slider, for example. You should avoid lazy loading elements inside the viewport(above the fold), and lazyload images below the fold, outside the viewport.

Improve icon font loading, remove unused icon fonts, or switch icons to SVG’s

Impact on LCP: Low

Icon Font is responsible for most of the bad LCP across WordPress websites.

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: https://fontawesome.com/v5/cheatsheet/free/

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

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

Limit access from a region with failing Core Web Vitals

Impact on LCP: High

Limit access to a region where you’re failing Core Web Vitals. Install and set up Cloudflare Web Analytics. With the data available you’re able to define if some country is contributing to lowering the Core Web Vitals. Install Cloudflare DNS and block the region via firewall rules.