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

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:

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

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.

 

2. Preload LCP Images With Plugins

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

 

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'>

 

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.

<?php
/**
 * 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:  https://github.com/wp-media/wp-rocket-helpers/tree/master/lazyload/wp-rocket-exclude-x-first-images-by-attribute/
 * Author:      WP Rocket Support Team
 * Author URI:  http://wp-rocket.me/
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 * 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();

// EDIT ANY OF THE FOLLOWING AS NEEDED

// 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;

// STOP EDITING
/**
 * 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 QUIC.cloud will automatically detect above the fold images and exclude them from lazy load. Lazy load images must be on and you must be using QUIC.cloud.

Optimole

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.

 

5. Test Results In A Waterfall Chart

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

Lmk if you have questions.

Cheers,
Tom