Filter to exclude images from lazy load

Hello @pautgn ,

There is no need to add the .webp version in the filter. Once you exclude the image by URL this will cover the additional image sizes and the .webp version of the image. As for the correct listing under the filter, you should apply new images on a new line for example:

add_filter( 'sgo_lazy_load_exclude_images', 'exclude_images_from_lazy_load );
function exclude_images_from_lazy_load( $excluded_images ) {
    // Add the src url of the image that you want to exclude from using lazy load.
    $excluded_images[] = 'https://mydomain.com/wp-content/uploads/your-image.jpeg';
$excluded_images[] = 'https://mydomain.com/wp-content/uploads/your-image2.jpeg':

    return $excluded_images;
}

Best regards,
Georgi Ganchev
SiteGround.com

Hi, I copied the code from the plugin page but I think a ” ‘ ” is missing here:

add_filter( 'sgo_lazy_load_exclude_images', 'exclude_images_from_lazy_load );

I suppose it should be:

add_filter( 'sgo_lazy_load_exclude_images', 'exclude_images_from_lazy_load' );

right?

If I’m right please fix it in the plugin page.

Regards.

And also the ” : ” here:

your-image2.jpeg':

I suppose it should be ” ; ” instead of ” : “

Right? Can you please put the complete code?

Hello @pautgn ,

Thank you for the feedback, we have corrected the inline code. Unfortunately, it is not possible to edit it from my previous reply here in the forum.

Please accept our apologies about that.

Best regards,
Georgi Ganchev
SiteGround.com

Ok then the correct code for 4 images is this one, right?

add_filter( 'sgo_lazy_load_exclude_images', 'exclude_images_from_lazy_load' );
function exclude_images_from_lazy_load( $excluded_images ) {
$excluded_images[] = 'https://mydomain.com/wp-content/uploads/your-image.jpeg';
$excluded_images[] = 'https://mydomain.com/wp-content/uploads/your-image2.jpeg';
$excluded_images[] = 'https://mydomain.com/wp-content/uploads/your-image3.jpeg';
$excluded_images[] = 'https://mydomain.com/wp-content/uploads/your-image4.jpeg';
return $excluded_images;
}

Yes @pautgn ,

That is the correct code.

Hi,

When “Lazy Load Media” = ON, I see in the source code that it removes the native WordPress loading=”lazy” of all the images and adds the “lazyloaded” class.

I had a list of above-the-fold image URLs to exclude them in the functions.php,… but before doing it, PageSpeed Insights already shows in GREEN that the above-the-fold image is NOT being lazy loaded… showing me along with the message the above-the-fold image that has your “lazyloaded” class,… Then, Why Google shows it to be already correct, not being lazy loaded? (when it has you lazyloaded class).

Could it be that in SG Optimizer you have added something that checks if it’s an above the fold image and although you assign the lazyloaded class you don’t lazy load it?

Obviously, if Google already shows it in green I’m not going to bother to exclude URLs of images above the fold if for some reason they already are being excluded,… but I would like to know why is this happening…

Regards.

WordPress have it’s native lazyloading which can be disabled if needed with a filter:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Basically, when the lazyloading is enabled from our plugin it removes the lazy tag added by WP and adds ours, still for the excluded images no changes are made. This is why for them – the default functionality applies.

You can then enable lazyloading from our plugin and exclude the specific images from the lazyload with the filter as we already explained.

Best regards,
Georgi Ganchev
SiteGround.com

Thanks, is what I was understanding,… but the weird thing here is:

-Before enabling your lazy load, and before excluding any image, so WP native lazy load is working: PageSpeed Insights says in RED that images above the fold shouldn’t be lazyloaded.

-After enabling your lazy load (and still without excluding any image) now PageSpeed Insights shows in GREEN that images above the fold are correctly NOT being lazyloaded (but they have your lazyload class),… so I was asking if your plugin does some extra work to not apply lazy load on above the fold images,… (and all the other images are correctly lazy-loaded).

Regards.

Yes, we serve a specific JavaScript code when Lazy Loading is activated from the plugin. And there are specific checks in order to assure that the above-fold images will be loaded as expected. Please note that we are not aware of how PageSpeed tool exactly simulates the browser loading in order to determine if an image is lazy loaded or not.

Best Regards,
Dimitar

Ok,

Can you please add to the plugin documentation that checks? It’ll be very useful.

And then we don’t need any code to exclude image URLs on above the fold,…

Regards.

Thank you for the update. We highly appreciate your feedback.

Best Regards,
Dimitar