Last Updated on by LAUNCHTIP
(Originally Published October 20, 2021.)

How to easily add ‘Lazy Loading’ to my Shopify store

According to a 2017 blog post called Beyond the Bubble, the average Internet speed around the globe is just 7mb/s. Therefore, it’s likely that your product pages are not loading as fast for the customers as you would want them to. 

An easy workaround is to add lazy load to your pages. The technique involves delaying the initialization of an object unless it’s required. It’s mainly used for images on a website. 

On the one hand, it improves performance and speed. On the other, it makes your customers think that the products are loading quicker in a phenomenon called perceived performance. 

You can add a lazy load to your Shopify store in the following ways. 

Add lazy loading script 

In this method, you’ll have to add a certain code to your store. Here’s how to do it. 

  • Go to Shopify admin and select Online Store. 
  • Select Themes and choose the theme you intend to edit. 
  • Select Actions and click on Edit Code. 
  • Go to the Layouts directory. 
  • Click on themes.liquid. 
  • Then, paste the following code before the </head> tag in the online code editor.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}

 

Save the changes. Now, the images in your store will be lazy-loaded. 

Add lazy loading to particular images 

You can also specify which images should be lazy-loaded if you do not want to apply the setting to the whole store. If you want a specific image to lazy load, apply the class ‘lazyload.’ Plus, replace the src attribute with data-src. 

<!-- Before -->

<img src="image.jpg" />


<!-- After -->

<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />

 

Add lazy loading to JS document 

If you add this Javascript code to the js.liquid or .js file on your store’s Assets directory, lazy load will be added to the site. 

$(document).ready(function(){$("img.lazyload").lazyload();});