How to Instantly Lazy Load Images on your Shopify Store
First of all, what is lazy loading?
Lazy Loading, also know as Deferring Offscreen Images or Asynchronous Loading is a method implemented on websites to improve their page speed.
Let me give you an example of how this works:
When the above web page loads, all images/graphics and text are loaded in one go. This slows down the website. The box marked “1” is the only thing a visitor sees before they decide to scroll down. With lazy loading implemented, the loading of the image below the box is delayed.
This is beneficial because:
- It reduces the first load time of the website.
- It improves the Google PageSpeed Score of the site
- It benefits the SEO of the page as the page speed is taken into account when determining rankings.
Lazy loading for Shopify stores can be extremely beneficial. These benefits can be even more effective on image heavy pages like collections.
How do I Lazy Load Sites? (The slow way)
This involves downloading lazy loading files, uploading to your Shopify assets folder, Calling the lazy loading library on every page of your store and editing <img src> tags manually
There’s an extensive guide already created by Huratips. Check it out here.
How do I Lazy Load Sites? (The fast way)
I was dealing with this problem with my own Shopify store so I decided to get an app made to do all the grunt work for me automatically.
Presenting….. Lazify!
With Lazify, you can lazy load collection pages, blog pages and product description images with one click. (More features on the way!)
If you’d like to check it out, here’s the link: Lazify App Listing
