[Support request] Exlude Image Above the Fold from LazyLoad by WP Rocket

Hi there,

I’m not sure I 100% remember how WP Rocket excludes images from lazyload but I believe you can use class selectors for exclusion.

Use the class is-logo-image for the logo images.
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

As for your featured image, it depends. If you meant the background image (featured image) of the page hero, it’s a bit tricky to do.

We’ll have to do it dynamically since we can’t list all of them within the text field provided in the plugin.

Luckily, WP Rocket has a filter for that.

Try this PHP snippet:

function rocket_lazyload_exclude_src( $src ) {
	$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
		if ($featured_img_url) {
			$src[] = $featured_img_url;
		}
	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

Ah, my bad I was looking at another site.

I’m not exactly sure if that plugin you’re using has a feature to exclude lazyload on images.

It’s best to ask the plugin support/developer on their recommended way to exclude images from lazyloading within their plugin.

Note: This is a third-party plugin. Its functionalities are outside of our scope.

As for the featured image, I was more concerned about the first images showing on posts and pages, not the background image of the hero page since that is mostly just on the homepage.

Will the PHP snippet you provided help with this issue in Google Pagespeed Insights?

It won’t be of any help since you’re not using WP Rocket.

If you can get the filters your plugins use for image exclusion from the developer, we can try helping you out with the PHP writeup.

“Preload the image used by the LCP element in order to improve your LCP time”

Try this:

Use a Hook element with this code in it.

<?php 
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
	if ($featured_img_url) {
		echo '<link rel="preload" href="'.$featured_img_url.'" as="image" crossorigin>';
	}
?>

Also make sure you have “Execute PHP” checked and set the display rule location to “Entire site”.