Want to enhance the user experience on your Shopify store? Site speed is important to be taken care of. Apart from several ways, image lazy load is one of the best ways to increase the site speed and overall performance.
Lazy loading is the site performance-enhancing technique used to slowly load images and other media files only when a user scrolls down the page except for initial page loading. Lazy load also comes with another name called defer offscreen and hidden images.
Among plenty of ways, Lazy loading with blurred image effects is one of the most effective ways and highly preferable on Shopify. There is almost a 10% to 30% reduction in the page weight that can be seen after implementation.
Now, let’s understand what makes lazy loading, a highly effective tool to speed up Shopify speed and performance.
Importance of Lazy Loading Shopify Images
Shopify is a well-known CMS designed for eCommerce sites. Since eCommerce websites are usually much heavier than others, optimization remains in the greatest need. Lazy loading is one such way to optimize Shopify sites for speed.
Lazy loading increases browser response to fast loading pages since it’s not loading all the images right away. Thus, lazy loaded images don’t contribute to the initial page load and show many great benefits such as:
- Make site lighter and faster
- Increases google rankings and conversions
- Improve mobile load time
- Reduce server requests
- Decrease weight on the web page
Lazy load works through the replacement of the src attribute with a data-src placeholder. This makes the image not load in the standard HTML sequence. With this, javascript is then used to grab that placeholder URL and update the element’s src attribute. As a result, the site only loads an image when it comes into view.
So, you can see a significant load time reduction while optimizing your Shopify by lazy loading.
Now, it’s time to know how it can be done – how to implement lazy loading to your Shopify store.
How to Lazy Load Shopify Images & Themes
Images and themes are a huge part of Shopify stores. Compelling themes and product images build customers’ trust and ensure a better user experience.
So, whether you are using the fastest Shopify themes or higher quality pictures, it is crucial to make them lazy load. Here is how to do it:
- Add lazysizes.js library to your theme assets folder and include it in the theme.liquid
- Locate the image tags in your theme files
- Update those image tags by replacing src with data-source and adding the “lazyload” class
- Add CSS styling to get animation effects
You can check out thorough instructions on using lazy sizes and locate how to add lazy load to your images and themes.
Files that need to be edited in your Shopify are based on the theme you choose. But you can take a look for template code in lazy sizes that loads images, and replace it with the lazy loading syntax.
For example, you can swap out your img tags by using the lazy sizes library after getting it installed in the theme.liquid file:
Replace: <img src="IMAGE_URL">
With the new lazy loading syntax:
<img data-src="IMAGE_URL" class="lazyload">
Download the latest file from the lazy sizes page to install the library. Upload to your Shopify theme Assets folder and name it lazysizes.min.js, then include it in your theme.liquid <head> section in this way:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
Once you set up this code, your images will become lazy loaded and remain faded until you don’t scroll down the web page rather than loading with the initialization of the page.
This way you are speeding up your Shopify store by decreasing FCP, LCP, and more.
When you implement lazy loading, your store will be ready for making lazy load images.
Also, don’t get confused between JPG or PNG image formats to foster your lazy loading. JPG image formats are best to choose for photographic images instead of PNG as JPG loads faster at the same resolution.
How to Check Implemented Lazy Loading on Your Shopify Site
You can run and use Shopify Analyzer to confirm that you have successfully implemented lazy loading on your site.
There is another way to see the lazy loading of your Shopify site. The second way to check your lazy loading implementation is by right-clicking on the page & inspecting browser code. Then select “View source” and Search for “lazy” on that page.
If you don’t find any elements with “lazy” then you have probably not done it properly.
If you view the source and see some “lazy” elements, it’s still useful to run an analyzer tool to make sure they’re loaded with true lazy loading and not just placeholder lazy loading.
Difference between True Lazy Loading and Placeholder Lazy Loading
If you are still getting warnings in the analysis tool after you have set up lazy loading, then it might be because of “placeholder lazy loading” rather than “true lazy loading”.
True Lazy Loading is when images don’t have an src attribute and don’t load when the page loads. This type of lazy loading only happens when the user scrolls into view.
Placeholder Lazy Loading is when images have a small placeholder thumbnail that loads on the initialization of the page. In this loading, as the user scrolls down, the larger regular image replaces the thumbnail.
Placeholder lazy load can be a great option for design preference. But if you want to maximize your Shopify site speed and performance, we recommend converting images to “true lazy loading”.
The Best Way to Optimize Shopify Store Speed
If you are looking for a Shopify speed optimization solution, you can give W3 Speedup a chance to do it for you. We have helped thousands of Shopify owners who are now running their store at lightning speed.
In case you are in a dilemma & wondering what to do with slow Shopify, let us guide you. Whether it is lazy loading or increasing conversions, we have the best way to make your Shopify site faster for you. Contact us if you are interested.
Great Article!! I really thank you for your information.