How To Preload Your Largest Contentful Paint Image In WordPress (One Of Many Image Optimizations WP Rocket Fails At)

Preload largest contentful paint image wordpress

Since LCP images are high priority (because they load above the fold and are seen first), they should be preloaded and excluded from lazy loading. In fact, all above the fold images should.

The easiest way to preload largest contentful paint images in WordPress is with the preload critical images setting in Perfmatters or FlyingPress. Just set the number of images that usually load above the fold (like 2-3) and they will be preloaded and excluded from lazy load.

With WP Rocket, they recommend installing an extra plugin just to preload LCP images. The problem is, LCP images are often different on each page, and manually preloading each one is time consuming. Plus, this doesn’t exclude them from lazy load or address background images. You would need to download a separate helper plugin to exclude a specific number of images from lazy load, then add a skip-lazy CSS class to any background images loading above the fold.

 

1. Preload Critical Images In Perfmatters

Perfmatters preloads critical images by the number of images that usually load above the fold. In most cases, it’s 2-3. For me, it would be 3 (logo, sidebar image, and the top blog post image).

Count them for your website.

Above the fold images

Add that number in Perfmatters, then you’re done.

Preload critical images perfmatters

 

2. Preload LCP Images Manually

If you don’t want to buy Perfmatters, Preload LCP image adds a preload field where you’ll add the image URL. And if you happen to be using GeneratePress, Astra, Divi, or a few other themes, Preload Featured Images does it automatically (same with LCP Booster for WooCommerce with the main product image). Which means you don’t have to add an image URL for all your pages.

Preload largest contentful paint image wordpress
The “Preload LCP image” plugin adds an image URL field to be preloaded
Preload featured images plugin
The “Preload features images” plugin does it automatically (but only with select themes)

 

3. Exclude Them From Lazy Load

LCP images should be excluded from lazy load. Otherwise, it creates delays and increases LCP.

Optimole

Since WP Rocket isn’t good for image optimization, I recommend trying Optimole. It has a setting to “exclude the first X images from lazyload” which again, should be 2-3 for most sites.

Exclude above the fold images from lazy load optimole

WP Rocket

WP Rocket can exclude a certain number of images from lazy load. You’ll need to open the helper plugin in a text editor, then change number of images to be excluded from lazy load.

<?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 );

Also make sure background images are excluded from lazy loaded since they’re in CSS. Some plugins + page builders do this automatically while some cache plugins have a skip-lazy class.

 

4. 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 any questions.

Cheers,
Tom

You Might Also Like:

Leave a Comment