[Resolved] Native Lazy Loading not working

[Narender]

Hey folks!
I am using the latest version of GeneratePress, GP Premium, GenerateBlocks Pro, etc. Recently, I noticed that the images inside the article content aren’t getting the native lazy loading tag automatically. Then, I tried deactivating all the plugins and checking the lazy load implementation. The problem occurs only when I am activating the GeneratePress Premium Plugin.

As soon as I activate the plugin, the Native Lazy Loading tag loading="lazy" goes away from the content image. Here is a sample article you guys may debug.

[Ying]

Hi there,

As you are already using GB, can you try using the image block from GB instead of the WP image block?

Let me know if that works.

[Narender]

Hey Ying,
I don’t use Block Editor. I prefer the Classic Editor so using the same.

[Ying]

Hum..but you have GB and GB pro installed and activated, GB pro is a paid plugin.

Anyway, the issue is from the Blog module of GP premium, it should be fixed for GPP 2.2.0-alpha.1.

In the meantime, you can use the lazyload function of WP Rocket.

[Narender]

For this particular website, I use GB Blocks just for some portions such as Query Loop for the Homepage & Sidebar, Entry Meta, etc. Will wait for the theme update…

[Narender]

Hey,
I am using the recently updated versions of GP Premium and GeneratePress Theme but still, the issue is the same. Native Lazy Loading isn’t working for the posts created with the Classic Editor. Hasn’t it been fixed?

[David]

Hi there,

do you have a sample post that has more than one image in the content where i can see the problem?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Narender]

Hey David,
I have added two images to this single post. However, it wasn’t the case earlier. The Native Lazy Loading Tag used to appear even if I had a single image in the content.

[Ying]

Hi there,

I can’t replicate the same issue on my end using classic editor with the latest GP and GP premium.

Can you try disable all other plugins?

[Narender]

I have just deployed a staging site for your guys to debug it. I have disabled every plugin except Classic Editor, GPP, and Generate Blocks and the issue still persists for me.

[David]

Ok, so what is happening here:

WordPress lazy load has a few different rules as to when it adds the lazy-loading class.
One of those is the wp_omit_loading_attr_threshold filter:

https://developer.wordpress.org/reference/functions/wp_omit_loading_attr_threshold/

By default this threshold value is set to 1. Which means the first image in your post content, whether that be the featured image or a media attachment gets excluded from lazy loading.

To show this, I edited one of your posts to include 4 images:

https://test.odishassc.in/gujarat-postal-circle-recruitment/

Image 1 has NO lazy attribute.
Images 2 and 3 HAS the lazy attribute.
Image 4 has NO lazy attribute as it the same image attachment as Image 1.

So this is working as expected.

The difference with GP Premium de-activated:

In your GP Premium -> Customizer > Layout > Blog –> Featured images you have the Post featured images disabled.
When you disable GP Premium the featured image now gets output in your post content, and it gets counted as the first image.

So on posts that only have a single image, you will see no lazy load.
If you want to make sure all images have the lazy load, add this PHP Snippet:

add_filter( 'wp_omit_loading_attr_threshold', function($omit_threshold){
    if ( is_single() ) {
        $omit_threshold = 0;
    }
    return $omit_threshold;
} );

Does that make sense ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Narender]

Thank you very much, David. It totally makes sense now.

[David]

Awesome – it took me a while to understand it lol
Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts