Preload Largest Contentful Paint Image In WordPress (And Exclude It From Lazy Load)

Preload largest contentful paint image wordpress

Preloading LCP images makes them “high priority” because they’re seen first.

In fact, all above the fold images should be preloaded and excluded from lazy load, like your logo. If you forget to exclude them from lazy load, this creates a resource load delay and you may see “largest contentful paint image was lazily loaded” in your PageSpeed Insights report.

The easiest way to do both is by preloading critical images in Perfmatters or FlyingPress. Just set the number of images that usually load above the fold (i.e. 2-3) and it’s done automatically.

Other plugins like WP Rocket and LiteSpeed Cache don’t support preloading images. In this case, I recommend using Perfmatters (best option), the Preload Featured Images plugin (2nd best), or Pre* Party Resource Hints (worst option since it requires manually preloading them).


1. Preload Critical Images In Perfmatters Or FlyingPress

In Perfmatters, you’ll set the number of images that usually load above the fold. In most cases, this is 2-3. For me, 3 images load above the fold (logo, sidebar image, and top blog post image).

Count the number of above the fold images:

Above the fold images

Add that number to Perfmatters and they will be preload and excluded from lazy load:

Preload critical images perfmatters

FlyingPress has a similar setting but instead of setting a number, it tries to detect viewport images and automatically preloads them while excluding them from lazy load. Same concept.

Preload critical images flyingpress


2. Preload LCP Images With Plugins

If you’re using a plugin that doesn’t support preloading images (like WP Rocket), try these:

Preload featured images plugin
In the “Preload Featured Images” plugin, set the featured image size in the settings
Preload largest contentful paint image wordpress
The “Preload LCP Image” plugin adds a field for the image URL you want to preload


3. Preload LCP Images Manually

The last option is to preload LCP images with Pre* Party Resource Hints or by adding the code manually to the head of your page:

<link rel='preload' href='/image.png' as='image'>
Preload lcp image pre party resource hints
Use Pre* Party Resource Hints to “preload as image”


4. Exclude Above The Fold Images From Lazy Load

WP Rocket

While WP Rocket can’t preload images, it can exclude a certain number of images from lazy load. Open the helper plugin in a text editor, then change the number of images to exclude.

 * Plugin Name: WP Rocket | Exclude X first images from Lazy Load by Attribute
 * Description: Disables lazy load for the first X images by Attribute.
 * Plugin URI:
 * Author:      WP Rocket Support Team
 * Author URI:
 * License:     GNU General Public License v2 or later
 * License URI:
 * Copyright SAS WP MEDIA 2018
namespace WP_Rocket\Helpers\lazyload\exclude_by_attribute;
// Standard plugin security, keep this line in place.
defined( 'ABSPATH' ) or die();


// change class="ct-image to attribute of your choosing
$pattern = 'class="ct-image';

// change 2 to the how many images need to be skipped from the lazy load
$count = 3;

 * Disable LazyLoad on single post views.
 * @author Adame Dahmani
 * @param  string $html HTML contents.

add_filter( 'rocket_buffer', function ( $html ) use ($pattern, $count) {
	$html = preg_replace( '/'. $pattern .'/i', 'data-no-lazy="" '. $pattern, $html, $count );
	return $html;
} , 17 );

LiteSpeed Cache

Enable viewport images and will automatically detect above the fold images and exclude them from lazy load. Lazy load images must be on and you must be using

Litespeed cache vpi settings


Optimole can “exclude the first X images from lazyload” which again, should usually be 2-3. I recommend Optimole over Imagify since it has more features like mobile image resizing (for better mobile LCP), AVIF support, offloading backups, and integration with Cloudfront’s CDN.

Exclude above the fold images from lazy load optimole


5. Test Results In A Waterfall Chart

Open your waterfall chart (below is GTmetrix) to see the impact of preloading images.

Preloading lcp images in waterfall chart

Lmk if you have questions.


You Might Also Like:

Leave a Comment