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.
Add that number in Perfmatters, then you’re done.
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.
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.
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.
Lmk if you have any questions.
Cheers,
Tom
