Add image lazy loading

[tdgroot]

Description (*)

In many situations, catalog lists can contain many images, while most of them remain under the first fold.

When running an audit using Lighthouse, it tells us the following.

So we need to add the loading="lazy" attribute to the images on the catalog list. This attribute is supported on the following browsers (source):

• Chrome >= 76
  • Edge >= 79
  • Opera >= 64
  • Android Browser >= 80
  • Chrome for Android >= 80
• Firefox >= 75

In Chromium's aforementioned blog post, it seems that lazy loading is enabled for all websites on Chrome Android browsers with Lite Mode enabled.

Expected behavior (*)

Better performance for catalog pages. This is achieved by adding the loading="lazy" attribute to the image_with_borders.phtml template.

Benefits

Better performance for both users and Lighthouse reports.

Additional information

Not for now

[m2-assistant]

Hi @tdgroot. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, please, review the Magento Contributor Assistant documentation.

@tdgroot do you confirm that you were able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• yes
• no

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[magento-engcom-team]

Hi @tdgroot. Thank you for your report.
The issue has been fixed in #27033 by @tdgroot in 2.4-develop branch
Related commit(s):

• c00cef40fffb3b60d13077ee3d40dbde38e3cc4c
• 1a7977570c2638a33c8cc90b253b061fc934fe2d
• 182a47423a3f2a00daac739bb19072416fc75e89
• 0bd7a87110248a4efbc8cdb612e3c42ce9475942
• 56fde6c7a3e4d7a3e506e10b78523a8b988bf779
• 463c46072512b41d71bc13192ffbb5640c5ea394

The fix will be available with the upcoming 2.4.0 release.