Lazy Loading feature on the website is not functioning properly

Technical Q&A
,
4

Hello @isuru_1

One of the most common recommendations I found is “Defer offscreen images” (LazyLoading). This is an indication that all of the site’s image assets are loading at once.

So you can use a lazy load for these images.

  • To defer the loading of offscreen images on your Shopify site, you will have to modify your Theme (theme. liquid file) to leverage the lazySizes library. Here’s how:
  • Download the lazy sizes Javascript library from here and upload it to your theme’s /assets folder.
  • Note(once check ‘lazy sizes Javascript library’ in assets repo. has available or not)
  • Add the following lines to your theme. liquid just before the tag
​
  • Change the image tags in your theme by adding the class “lazyload” to the image tags and changing the src attribute to the data-src attribute.
{% for img in product.images %}
{% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endfor %}

By fixing these issues, your website speed score can definitely improve.

If anything needs to be included or clarified then feel free to ask. We will surely help you.

Have a nice day!