How to selectively disable lazy load

Lazy loading is one of the most used web optimization techniques for WPO and improvement in the core web metrics, and in fact one of the most meaningful.

Basically, it is not to load any image, iframe, video, while the user does not get to navigate to its location, loading gradually as the visitor scrolls down the page.

This means that the browser does not have to download resources that may not be necessary to display, with the consequent improvement in loading times and saving resources of the browser, device and even the server.

It’s a great technique that, in case you didn’t know, WordPress already incorporates by default, natively.

Why should I disable lazy loading if it’s so great?

Well, it turns out that there are times when you will want to control, or even disable, the lazy loading of media, of some media, or of some media on some page, in some situation, etc.

In addition, you will also sometimes find that Google PageSpeed will show you as errors that affect the LCP images in the first fold (above the fold) with lazy loading, which is solved by removing the lazy loading attribute.

Why is this so? Well, to put it briefly, because lazy loading slows down the loading of that resource, and that makes the loading of your page – simply – slower, at least in that first part, in that above the fold.

This is what we are going to learn today, how to selectively control lazy loading.

Note: Unless otherwise stated, all PHP codes that I am going to share should preferably be added to a customization plugin or, failing that, to the functions.php file of the active child theme.

Disable WordPress native lazy loading

The first thing, nothing selective, but you should know, is that you can disable WordPress native lazy loading altogether.

Although it seems that it has nothing to do with the purpose of this guide it makes perfect sense, because sometimes, it is better to activate and manage the deferred loading with plugins, and for this the first step – if the plugin does not do it – is to disable the native WordPress lazy loading.

The code is this:

/* Disable native lazy loading WP */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Code language: JavaScript (javascript)

If you prefer, you can also disable it with plugins like this one or this one.

Disable lazy loading by ID and size

Starting to selectively customize deferred loading, a first approach would be to disable lazy loading for certain media (images, etc.) by indicating their ID and size.

The code would look like this example:

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );Code language: PHP (php)

In this case we deactivate the image with ID 4532 in its large size (large)

Disable lazy loading on the first image

Considering what I mentioned at the beginning of this guide, the problem detected by Google PageSpeed regarding lazy loading in the LCP metric, one way to solve it is to disable lazy loading on the first image of the page being visited.

This could be the image of a carousel, the featured image of a post or page, or simply the first image of the content.

There are several ways to do this, depending on how you have lazy loading enabled…

Without plugins

If you don’t use plugins or you want a code to disable lazy loading of the first image in WordPress you can use this code:

/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');Code language: PHP (php)

With Autoptimize

If you use the lazy loading of this plugin you would have to add this code to deactivate it from the first image of the page, whatever it is:

/* Disable lazy load with Autopimize of the first image */ 
add_filter( 'eio_lazy_fold', function( $count ) {
return 1;
});Code language: PHP (php)

If, for some reason, it does not work, it is possible that the first image is not the content image, but for example, the header logo, in which case you can try changing return 1 to return 2 to disable the deferred loading on the first 2 images, not only on the first one.

Another method offered by the plugin developers is with this other code:

add_filter( 'autoptimize_filter_imgopt_lazyload_from_nth', function(){return 1;});
Code language: JavaScript (javascript)

Again, you can change the number of images by changing the return 1 to return 2 for the first two, return 3 for the first three and so on.

And finally, if you prefer, you can do it from the plugin interface itself, indicating the number of images you want to exclude.

With WP Rocket

If you use the fantastic WP Rocket plugin the possibilities expand and a lot.

But, for now, here is the code to disable the first image if you use WP Rocket’s lazy loading:

/* Disable lazy load first image with WP Rocket */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) { 
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->setAttribute('class','alignnone size-full remove-lazy');
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
function rocket_lazyload_exclude_class( $attributes ) {
$attributes[] = 'class="alignnone size-full remove-lazy"';
return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );Code language: PHP (php)

If you prefer not to do it with code, WP Rocket offers other ways to exclude the first image, or any image for that matter. The trick is to add the CSS identifier of the image in the exclusions box of the plugin’s LazyLoad settings.

In the box, you can include the CSS class, the filename of the image or iframe, whichever you prefer. If you choose to apply the exclusion to a CSS class you can identify it by right-clicking and inspecting it in the browser to display it in the browser’s developer tools.

This exclusion box will not only be useful to disable the lazy loading of the first image of the posts or pages, but, through the exclusion by CSS class, you can apply the selective lazy loading to more media, no matter where they are.

With SG Optimizer

Also with SiteGround’s optimization plugin, SG Optimizer, you can exclude the first image, or whatever, from the deferred loading. Again, you can do this in 2 ways.

On one hand, by adding the CSS class in the exclusions box of the deferred loading.

Or, if you prefer, with a code like this one:

/* Exclude css classes lazy load with SG Optimizer */
add_filter( 'sgo_lazy_load_exclude_classes', 'exclude_image_from_lazy_load' );
function exclude_image_from_lazy_load($classes) {
$classes[] = 'name_class_1';
$classes[] = 'name_class_2';
return $classes;
}Code language: PHP (php)

Just replace the names of the example classes(name_class_1) with the ones you want to exclude.

Disable lazy loading in other parts

Considering the particular case of disabling lazy loading in the first image, important to avoid errors in the LCP reading of the main web metrics, let’s see how to disable deferred loading on other resources.

With WP Rocket

This plugin, as usual, allows all kinds of operations, such as excluding any media by adding in the exclusions box of lazy loading its CSS class or even the name of the file, really simple.

Disable lazy load on specific entries

Do you want to disable the lazy load on specific posts or pages, there is not much mystery. With WP Rocket you will find in the editor settings box from which to enable or disable any general optimization.

However, if you prefer to use codes, it is also possible, here are a few…

Disable lazy load on featured images

A very practical code would be to disable lazy loading on featured images, like this:

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' );Code language: PHP (php)

Disable lazy load on individual entries

With this code you will disable deferred loading on posts, but it is maintained on pages and in the blog archive:

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
if ( is_single() ) {
add_filter( 'do_rocket_lazyload', '__return_false' );
}
}Code language: JavaScript (javascript)

Disable lazy load on all entries

With this code you disable deferred loading on entries but not on pages:

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
if ( is_page() ) {
add_filter( 'do_rocket_lazyload', '__return_false' );
}
}Code language: JavaScript (javascript)

Disable lazy load on blog page

If you prefer not to have deferred loading in the post archive, in the blog, the code is this one:

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
if ( is_home() ) {
add_filter( 'do_rocket_lazyload', '__return_false' );
}
}Code language: JavaScript (javascript)

Disable lazy load on front page

With this other code you disable deferred loading on the home page of your website:

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
if ( is_front_page() ) {
add_filter( 'do_rocket_lazyload', '__return_false' );
}
}Code language: JavaScript (javascript)

Disable lazy load by file name

Do you have several images with similar names that you want to exclude from the deferred upload? See what a neat code to exclude all those containing certain text in the file name:

function rocket_lazyload_exclude_src( $src ) {
$src[] = 'unfinished-image-name';
return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );Code language: PHP (php)

Disable lazy load by image source

An interesting use would be to be able to exclude images from deferred loading based on the source domain, for example:

function rocket_lazyload_exclude_src( $src ) {
$src[] = 'wp.com'; //Exclude lazy load from images served from wp.com
return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );Code language: PHP (php)

In the above example we exclude from the lazy load any image served from the wp.com domain, the one normally used by Jetpack to serve images from its CDN or the thumbnails of related posts.

Disable lazy load for gravatars

If you do not want deferred loading in Gravatar.com avatars the code to add will be this:

remove_filter( 'get_avatar', 'rocket_lazyload_images', PHP_INT_MAX );
Code language: JavaScript (javascript)

Disable lazy load in CSS classes with code

Finally, if you prefer a code to disable deferred loading in certain CSS classes the code would look like this:

function rocket_lazyload_exclude_class( $attributes ) {
$attributes[] = 'class="css-class-to-exclude"'; //Change class to exclude lazy load
return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );Code language: PHP (php)

With Autoptimize

In the Autoptimize plugin we will find an exclusion box, in which as with WP Rocket, we can include CSS classes or file names. Simple and effective.

With SG Optimizer

I end with SG Optimizer as it is the plugin that I believe offers the best solution for selective activation/deactivation of deferred loading, as it is completely optional, by means of simple selectors.

Simply enable or disable where you want to apply lazy loading:

• Images (default)
• Iframes
• Videos
• Gravatars
• Thumbnails
• Responsive images
• Widgets
• For mobiles
• In shortcodes

In addition to the possibility of excluding CSS classes in the exclusion box, as we saw before.

It seems to me the perfect way to address this need.