This morning I was testing my website performance with GTMetrix and PageSpeed Insights. Even though results were great, thanks to the theme I’m using (GeneratePress), both reports suggested me to remove “loading=lazy” from the Largest Contentful Paint as it can delay it.
Out of curiosity I started to look how to disable lazy loading from specific images in my website.
As you might know, since WordPress 5.5, our beloved CMS loads all images with the lazy tag per default.
I started to check for a solution that gives me the possibility to add a CSS class to all those images where the “lazy loading” needs to be disabled.
In WordPress there’s a filter hook called render_block that it’s possible to use for doing what I need. It essentially filters the content of a single block, like image block. What I need.
Copy this code snippet to your functions.php. Then add the “skip-lazy” class to the image that you don’t want to have the “loading=lazy” attributes and you’re done!
/* Remove lazy loading on specific images */
function mb_remove_lazy_loading_on_specific_images ( $block_content, $block ) {
if ( !is_admin() && ! empty( $block['attrs']['className'] ) ) {
if( strpos( $block['attrs']['className'], 'skip-lazy' ) !== false ) {
$myreplace = 'loading="lazy"';
$myinsert = '';
$block_content = str_replace( $myreplace, $myinsert , $block_content );
}
}
return $block_content;
}
add_filter( 'render_block', 'mb_remove_lazy_loading_on_specific_images', 10, 2 );What the above snippet does is very simple. I created a function that checks if the block attribute has a classname and if it has a classname called “skip-lazy”. Only when both conditions are true, using “str_replace”, the function remove “loading=lazy” from the block.
For those of you who don’t like writing code or just fear touching the backend of WordPress, there are different plugins you can use to disable lady loading on specific images. There’s a good one called Disable Lazy Load.
Happy Coding!
