How can I exclude an image from Lazy Load?

Hi, Guarav!

The easiest way is to add an additional CSS class to the image class attribute. If you add skip-lazy to the image tag it will automatically be skipped from lazy loading.

If you’re comfortable using WordPress filters you can also use those to customize where Jetpack lazy images are activated.

For example:

function gaurav_customize_lazy_images( $blocked_classes ) {
    $blocked_classes[] = 'guarav-header-image-classname';
    
    return $blocked_classes;
}
add_filter('jetpack_lazy_images_blocked_classes', 'gaurav_customize_lazy_images');

I can see how disabling lazy loading for the logo would be useful, but what are other places that you’re looking to disable lazy loading? I wonder if there’s anything we can do to improve on that side of things as well, if there are places that lazy image loading shouldn’t be active in general.

Hi @pyronaur.

I can see how disabling lazy loading for the logo would be useful, but what are other places that you’re looking to disable lazy loading?

There are some pages/posts in which an image or two come(s) above the fold. Eagerloading those helps in site loading.

Thanks a ton for the snippet.

I have an extra question though, how long does it to create Critical CSS for a site that has 1600 pages+posts? It’s taking too long for me.

There are some pages/posts in which an image or two come(s) above the fold. Eagerloading those helps in site loading.

That makes total sense, thanks ??

I have an extra question though, how long does it to create Critical CSS for a site that has 1600 pages+posts? It’s taking too long for me.

Critical CSS is generated from a subsample of pages and posts, so it shouldn’t really matter whether you have 100 or 10000 posts. But – because the Critical CSS is generated from your browser – it is going to take a bit of time. Additional post types and taxonomies are what’ll increase the generation time, as well as your network connection, server response time, etc.

Out of curiosity – can you time how long it approximately takes for you to generate Critical CSS?