How to handle opportunity : Defer offscreen images
Lazy loading is a performance optimization technique that loads images as the user scrolls down the page, instead of during the initial page load.
1. Why Lazy loading
Lazy Load delays loading of images in web pages. Images outside of View-port will not be loaded before user scrolls to them. lazy loading images helps with website performance. lazy loading can improve site performance for up to 30% with Responsive images.
2. Identification for lazyload
Tools like GT matrix,lighthouse,Page speed insights
3. How do you lazy load images on Shopify?
follow below the steps :-
1. Download the lazy-sizes Java-script library from here and upload it to your theme’s /assets folder.
2. Add the following lines to your theme.liquid just before the tag: