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
Identification-for-lazyload

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.
(Check ‘lazysizes Javascript library’ in assets repo.has available or not).
2. Add the following lines to your theme.liquid just before the tag:
< script src=”{{ ‘lazysizes.min.js’ | asset_url }}” async=”async”>< /script >
3.Change the image tags in your theme by adding class “lazyload” to the image tags and changing the src attribute to data-src attribute.

Example:-

Before:-
< img data-src=”{{ image | img_url: ‘800x’ }}”
data-sizes=”auto”
data-aspectratio=”{{ image.width }}/{{ image.height }}”
data-srcset=”{{ image | img_url: ‘2500x’ }} 2500w,
{{ image | img_url: ‘2000x’ }} 2000w,
{{ image | img_url: ‘1800x’ }} 1800w,
{{ image | img_url: ‘1600x’ }} 1600w,
{{ image | img_url: ‘1200x’ }} 1200w,
{{ image | img_url: ‘800x’ }} 800w,
{{ image | img_url: ‘600x’ }} 600w,
{{ image | img_url: ‘400x’ }} 400w,
{{ image | img_url: ‘200x’ }} 200w,
{{ image | img_url: ‘800x’ }} 3x,
{{ image | img_url: ‘600x’ }} 2x”
height=”{{ image.height }}”
width=”{{ image.width }}”/ >
After:-
< img class=”lazyload” />
data-src=”{{ image | img_url: ‘800x’ }}”
data-sizes=”auto”
data-aspectratio=”{{ image.width }}/{{ image.height }}”
data-srcset=”{{ image | img_url: ‘2500x’ }} 2500w,
{{ image | img_url: ‘2000x’ }} 2000w,
{{ image | img_url: ‘1800x’ }} 1800w,
{{ image | img_url: ‘1600x’ }} 1600w,
{{ image | img_url: ‘1200x’ }} 1200w,
{{ image | img_url: ‘800x’ }} 800w,
{{ image | img_url: ‘600x’ }} 600w,
{{ image | img_url: ‘400x’ }} 400w,
{{ image | img_url: ‘200x’ }} 200w,
{{ image | img_url: ‘800x’ }} 3x,
{{ image | img_url: ‘600x’ }} 2x”
height=”{{ image.height }}”
width=”{{ image.width }}”/ >