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

[Fern]

Hi,

I am using WP Rockets LazyLoad plugin on my site, which gets me much higher speed scores than the Lazy Load option in Autoptimize, but doesn’t give me an option to exclude image classes.

Can you please help me stop the logo and featured image from being lazy loaded by this plugin?

Thank you!

[Elvin]

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

[Fern]

I don’t have the WP Rocket plugin (which is paid and has a lot of features already covered by other plugins on my website), just LazyLoad and it doesn’t give you any options to exclude images like in the documentation you linked to for WP Rocket.

This is what the options in LazyLoad look like – https://www.screencast.com/t/CVp9pqfjtj

How would I stop the logo from lazy loading in the absence of being able to exclude that class?

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?

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

[Elvin]

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”.

[Author]

Posts