Add loading='lazy' to the Product Image block. Especially in need when used within the Products (loop) block.

[asafm7]

Add loading='lazy' to the Product Image block. Especially in need when used within the Products (loop) block.

[kmanijak]

Thanks @asafm7 for starting this discussion!

To give more context and confirm, that option would allow for optimization, so the images that are outside of the viewport, won't be loaded until necessary. That's especially useful in the mobile view, where the products are usually stacked on each other, so by default you see just 1-2 products, not let's say 10. Hence the image loading could be optimized.

I like the idea, however, I don't think that should be added to each of them. Rather than that, I believe that could be an option in the Inspector Controls whether the Product Image should be lazy loaded with the option disabled by default.

Users could then enable this option in a particular place, for example within the Products block.

The feature has pretty nice browser coverage as well: Can I Use.

I'm happy to hear others' opinions, cc: @imanish003, @shaunandrews, @Aljullu - do you see any obstacles for that?

Ref issue: https://github.com/woocommerce/woocommerce-blocks/issues/9248

[asafm7]

Thanks, @kmanijak .

I believe loading: 'lazy' is a polished and widely supported feature. Things like eagerly loading above-the-fold images are handled automatically:
https://web.dev/browser-level-image-lazy-loading/#:~:text=All%20images%20that%20are%20above%20the%20fold%E2%80%94that%20is%2C%20immediately%20viewable%20without%20scrolling%E2%80%94load%20normally.

Unless I'm wrong, there shouldn't be any downside to enabling it by default to all images, and the implementation is easy (just adding an HTML attribute)

[Aljullu]

Thanks for starting this discussion, @asafm7! This is indeed a very interesting topic and which might have a significant impact on page load performance as well as bandwith usage.

In order to implement this, I think it's worth reading WP's findings when they did something similar in WP core:

https://make.wordpress.org/core/2021/07/15/refining-wordpress-cores-lazy-loading-implementation/
https://make.wordpress.org/core/2021/12/29/enhanced-lazy-loading-performance-in-5-9/

What they ended up with: adding loading="lazy" to all content images except the first one. That seemed to give the best results in different metrics, including Largest Contentful Paint. However, I noticed the Query Loop block seems to lazy load all Post Featured Images.

So I think we have two approaches here:

1. Lazy load all product images to keep it consistent with the Query Loop block.
2. Take a more conservative approach and only lazy load images that we know are likely not to be in the viewport (ie: images which are not in the first row or are not in the first Products block instance).

I would lean towards option 1 for simplicity and we can refine in the future.

Rather than that, I believe that could be an option in the Inspector Controls whether the Product Image should be lazy loaded with the option disabled by default.

I'm not convinced about having an opction for this. 🤔 The reason is that I won't expect users to know what's the best value for this setting, so ideally we should make the decision for them IMO. However, it looks like WP core has some PHP filters for that which I think we should support. That would allow advanced users to tweak the behavior without the UI getting cluttered.

Regarding the urgency of this, IMO this is something that can be worked on after the Products block is out of beta. While it sounds like a nice performance improvement, I don't think it is a blocker.

[asafm7]

Thanks @Aljullu @kmanijak .

BTW, maybe I'm missing something, but as the Products block utilities the Featured Image block, which is independent - isn't more a Featured Image block issue rather than the Products block?

[Aljullu]

I might be wrong, but I think we are using a Product Image block which is different from the Featured Image block from Gutenberg. The code can be found here:

https://github.com/woocommerce/woocommerce-blocks/tree/trunk/assets/js/atomic/blocks/product-elements/image

But yes, this could be considered something to improve directly in the Product Image block. 🙂

[asafm7]

Thanks @Aljullu . Yes, that's what I meant. Sorry for the confusion.

So, should we move the ticket, re-tag it or re-open it elsewhere?

[kmanijak]

Thanks @Aljullu . Yes, that's what I meant. Sorry for the confusion.
So, should we move the ticket, re-tag it or re-open it elsewhere?

Product Image is the block from WooCommerce Blocks repo, so no need to reopen or retag the issues. https://github.com/woocommerce/woocommerce-blocks/issues/9248 is fine in its current shape.

1. Lazy load all product images to keep it consistent with the Query Loop block.
   I would lean towards option 1 for simplicity and we can refine in the future.

Same here, I would keep it simple.

Considering the discussion above I think we agree that it would be a good move to lazy load the Product Image, but that's not the highest priority for now. I'll go ahead and close this discussion now (remember that it can be still commented on) and let's stick to the issue https://github.com/woocommerce/woocommerce-blocks/issues/9248. I'll write an update there as well 🙌