Images are usually the heaviest elements of a page. Therefore, if there are many images on a page, then you should not download them all at once. Firstly, it will speed up page loading, secondly, it can significantly reduce server load, thirdly, it will save traffic for the user, and finally, it will increase Google’s Page Speed index, which is very important for your store traffic.
Lazy-load or “lazy” loading is a way of displaying content on a site, when elements, the appearance of which determines an external resource, are loaded not immediately with the requested page, but asynchronously - as needed. Such elements include, for example, images (<img>) and frames (<iframe>). They are united by the presence of the src attribute indicating the source of the resource.
When the browser "sees" the src attribute of an element, it makes a network request to the specified address, which increases the time for the document to be fully loaded. Accordingly, the more external resources synchronously connected to the page, the slower it loads. To avoid multiple simultaneous requests and optimize load speed, we use the lazy-load technique. By the way, the example of lazy loading can be seen on the main page of our site.
Fortunately, lazy loading is a solution that lowers initial page payload and load time but doesn't skimp on content.
If you were interested in the topic as you can greatly speed up the loading times of your store pages, you could see some instructions for a particular page:
Lazy loading is a technique that defers the loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, "non-critical" is often synonymous with "off-screen". If you've used Lighthouse and examined some opportunities for improvement, you may have seen some guidance in this realm in the form of the off-screen Images audit: