[Resolved] How disable lazy load for a specific image

[Roberto]

Hi,
I’m trying to not lazy load the first image in my website (https://giacomodenanni.it) adding “skip-lazy” class and data-skip-lazy attribute, but it seems to not having effects. I’m using WordPress default lazy load.
Do you have any suggestion?

Thanks!

[David]

Hi there,

add this PHP Snippet to your site.
Then any Image block with the skip-lazy class should be excluded.

add_filter( 'wp_get_attachment_image_attributes', 'fp_no_lazy_featured_image', 10, 3 );
function fp_no_lazy_featured_image( $attr ) {
    if ( false !== strpos( $attr['class'], 'skip-lazy' ) ) {
    	$attr['loading'] = "eager";
    }
    return $attr;
}

As a general note – above the fold images “should” be automatically excluded from the native browser lazy loading.

[Roberto]

Hi,
I add the code to functions.php file, and class skip-lazy to the Image Block, but Google Lighthouse or GTMetrix still showing the issue “Don’t lazy load Largest Contentful Paint image”, testing the homepage .
I don’t know if you need this information, but I’m using Autoptimize, using your suggested settings, so without lazy load setting, only the WordPress one.

Do you have any suggestion to lower the LCP measure and fix the issue above?
Thanks

[David]

I made a change to the PHP snippet above, can you try that:

https://generatepress.com/forums/topic/how-disable-lazy-load-for-a-specific-image/#post-2440743

[Roberto]

Hi, thank you so much David. Unfortunately the snippet is still not functioning.

Do you have any other suggestion? Isn’t really strange that it’s not functioning?

Thanks again!

[Fernando]

Hi Giacomo,

The loading="lazy" attribute is a browser-level lazy loader. By default images above the fold will not be lazy-loaded by it.

With that said, GTMetrix may be a little out of date on that. The native browser lazy loading on Chromium browsers ignores images above the fold – See here for more info: https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds

But if you want to remove the attribute then see the snippet one user provided here:

https://generatepress.com/forums/topic/avoid-native-lazy-loading-of-featured-image/page/2/#post-2183453

Moreover, do you have any other plugins for image lazy loading? I see you have Autoptimize which has such a feature. Can you temporarily disable it along with any other plugin with such a feature, and then test here: https://pagespeed.web.dev/

[Roberto]

Unfortunately I couldn’t fix the issue, so I decided to set image lazy loading with Autoptimize with exception for the first two images above the fold.
So far so good.

[Fernando]

I see. Glad you resolved the issue!

[Author]

Posts