Lazy Loading Images and Video

Lazy loading images - what is it?

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:

The portion of images and videos in the typical payload of a website can be significant. Unfortunately, project stakeholders may be unwilling to cut any media resources from their existing applications. Such impasses are frustrating, especially when all parties involved want to improve site performance, but can't agree on how to get there. 

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:
 

You've probably already seen lazy-loading in action, and it goes something like this:

• You arrive at a page and begin to scroll as you read the content.
• At some point, you scroll a placeholder image into the viewport.
• The placeholder image is suddenly replaced by the final image.

An example of image lazy-loading can be found on our website: