Lazy Loading (Defer Offscreen images) in Magento 2

Lazy Loading defers the loading of an image that is not needed on the page immediately. An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually becomes visible.

These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

Lazy Load Offscreen Images:- Deferring offscreen images has three benefits.

• Speed : Lazy loading reduces the initial page payload by cutting the number of images that need to be loaded. As a result, browsers can render the page much faster
• Resource savings : Deferred images are only processed if the visitor needs them. This reduces the total number of bytes delivered on the page for users who immediately or don’t scroll down. If your CDN provider charges based on data transfer and HTTP requests, lazy loading can literally save you money. The same is true for visitors on limited data plans;
• Better resource utilization : Since some images are never loaded, lazy loading also saves resources like processing time.

The Opportunities section of your Page speed insight report lists all offscreen or hidden images in your page along with the potential savings in kibibytes. Consider lazy-loading these images after all critical resources have finished loading to lower Time to Interactive

< img src=”pub/media/wysiwyg/placeholder-565×300.jpg” />

data-src=”pub/media/wysiwyg/lazyloadimg.jpg”

alt=”lazyloadimg”

width=”300″

height=”300″ />

Eg:-

< img class =”lazyload”

src=”pub/media/wysiwyg/placeholder-565×300.jpg”

data-src=”pub/media/wysiwyg/lazyloadimg.jpg”

alt=”lazyloadimg”

width=”300″

height=”300″/>

< script src=”lazysizes.min.js defer=’’”></script >

Once you have implemented lazy loading, you will want to check if the behaviour of images on your website is as intended. The simplest way is to open developer tools in Chrome browser.

Go to Network Tab > Images.

Here, when you refresh the page for the first time, only the images that are to be loaded up front should get loaded. Then, as you start scrolling down the page, other image load requests would get triggered and loaded.

You can also notice the timings for image load in the waterfall column in this view. It would help you identify image loading issues, if any, or issues in triggering the image load.

Magefan extensions

Link:- https://magefan.com/magento-2-image-lazy-load-extension

Navigate to Stores > Configuration > Magefan Extensions > Lazy Load. Enable the extension by choosing “Yes” in Enabled select box and define blocks (Lazy Load Blocks text area) for which images should be loaded via lazyload

Admin setting for lazyload in Magento2:- Store=>configuration=>Amasty Extension=>Google Page speed optimizer=>image optimization=>Lazyload