Being a Shopify owner, you should know how disadvantageous it is to have a slow-loading site. But the question here is, what makes your Shopify websites so heavy to load?
Well, there are multiple reasons. As you know, a Shopify store may have a number of visual effects, style sheets, crisp graphics, high-definition images, non-optimized videos, and plugins to keep your customers interested. They all consume lots of space, therefore slowing down your website.
But this problem can be resolved using a simple strategy called lazy loading.
Lazy loading can drastically lower your website’s loading time, reducing your customers’ bounce rates and increasing your conversions. It can also result in improving your Shopify website's SEO.
Want to find out more about lazy loading and how it can positively speed up your page loading? Read on.
What Is Shopify Lazy Loading?
Lazy loading is also called on-demand loading. It is a useful programming technique that delays the loading of visual elements unseen yet by your visitors until they scroll down or click further.
Say you have 100+ pictures on your webpage. If your website loads all of them up front, chances are your page speed might drop greatly. And you lose sales because of it. But with lazy loading, your website will only display the first batch of images of the page the user is currently on, with other images down below being blurry.
This way, it makes your pages seemingly faster, and also more responsive, creating a smoother visitor experience.
Generally, you can lazy load images, videos, text, or any other media files on your web pages. Given Shopify stores are usually image-rich, the lazy loading of images becomes essential.
How Does Shopify Lazy Loading Work?
Lazy loading works by using JavaScript code or HTML attributes like 'defer' and 'async' to reduce elements needed for loading initially, hence cutting down your initial page weight, memory usage and page load time. This way, your store runs faster, delivers content in time, and your customers won’t unhappily quit.
For a visitor, how would that feel then? Well, when you browse a web page, images out of your view focus will be fuzzy, because these high-quality images are swapped temporarily by some low-resolution blurred images. As you interact on the page more, and bring them into the viewport of your screen, the high-quality and clear pictures will return.
Technically, you can implement lazy loading by replacing HTML src attributes into data-src as a placeholder. Once a page visual becomes visible to users, your JavaScript will dynamically update the data-src URL with the src attribute.
Why Do You Need To Implement Lazy Loading For Your Shopify Store?
Lazy loading is important to your Shopify store in different ways. Here is a glimpse of what it can do:
-
Reduced load time and enhanced SEO. Google favors faster sites. Lazy loading lowers the initial time needed to run the visuals on your page, reducing the pressure on your servers, hence your site runs faster, and your store SEO performance may improve.
-
To conserve bandwidth. When all images are loaded simultaneously, it takes unnecessary time and resources. However, lazy loading only delivers content upon request. With less data transmitted at one time, you save more bandwidth costs.
-
To enhance customer satisfaction. Customers can browse your pages seamlessly, instead of staring at a loading circle, a progressing bar or a white screen all the time. This can improve your site's conversion rates and page views.
How to lazy load images on Shopify?
There are multiple ways to execute lazy load on your store. Check below.
-
Select a Shopify theme supporting lazy loading
This method involves the use of a Shopify theme that’s already integrated with lazy image loading, such as Ella. However, you shouldn’t compromise other important functionalities of your theme.
-
Add lazy loading manually
Here you’ll need some coding background. Our recommendation is to use lazysizes.js image lazy loader because it is fast and optimized for SEO.
- Go to the theme assets folder in your Shopify store. Add the lazysizes.js library to the folder. Then insert it in theme.liquid.
- Look for image tags in the theme files. Swap the images’ src attributes with data-source. Your image tag will be turned into a small coding line like <img src="IMAGE_URL">
- Include the “lazyload” class and update the images. The coding line with the “lazyload” class added should look like this: <img data-src="IMAGE_URL" class="lazyload">
- If you want animation effects, use CSS styling.
You can also use a specific script to lazy load images on Shopify. Simply add your specific code as follows:
- Open Shopify Admin.
- Go to Online Store and choose Themes.
- Click Actions > Edit Code and open the Layouts directory.
- Select theme.liquid and add this code to the online editor:
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
Tip: Ensure to paste the code before the </head> tag section. When done, save the changes to lazy-load your Shopify store images.
-
Hire expert services
If you are not well-conversant with coding, we advise you to seek the help of professional developers like SEOAnt’s expert team. They will ease your burden and manually implement your lazy loading accordingly.
How to Check If Your Shopify Lazy Loading Works?
There are three ways to tell if you have successfully implemented lazy loading on your website.
- Check manually
Simply scroll down the lazy loaded page yourself and see how the pictures engage with you. Are they blurry before scrolling but becoming clear after you scroll down? If yes, your Shopify lazy loading is working.
- Leverage the Shopify Analyzer
This tool will check if lazy loading works and offer practical tips to optimize your Shopify store.
Use your browser's Inspect tool. To check if your Shopify lazy loading works, right-click on a page, select View Source on the page, and search lazy. You should find 'lazy' elements if your Shopify lazy loading works.
- Check with the Chrome DevTools
Launch the tool, open Network and click the Img filter. Reload your webpage and the images above the fold will show up in the image list of the tool. Scroll your page and you should see the images appear on the list one by one. It means your lazy loading is working.
When Is It Not Advised to Implement Lazy Load on Your Shopify Images?
Although tempting, not every single image on your Shopify store should be lazy loaded. Here are some cases:
-
For images above the fold like the header and banner of your website. If they are not displayed to customers immediately, your Shopify site will appear visually incomplete, impacting their impression about your brand.
-
When you use the Shopify Content Delivery Network (CDN), whose servers perform the loading tasks on your behalf.
-
If you are only lazy loading to bait your page speed scores and not considering humanized user experience on your website.
-
If your Shopify site already loads quickly with a strong server network, there is no need to lazy load your images.
When Should You Lazy Load Images On The Shopify Store?
The main point of lazy loading your website’s images is to serve your customers first and search engines next. Here are scenarios when you can consider lazy loading:
-
Images that appear after the fold. You can apply lazy loading as it makes sense to load the images gradually since most users may not even reach the last images and it helps speed up the site.
-
When you have many images yet you don’t use CDN, or don’t have strong servers.
-
When your text content matters more than images to site visitors.
Lazy Load Design
Lazy loading your Shopify images shouldn’t be hard. For the best possible results, you can try these options to help you do it right:
-
Use an image's dominant color when loading. This is also aesthetically pleasant for your site visitors.
-
Apply an entertaining blurry effect as images load. Using a lazysizes plugin called Blur-Up, you can apply a visually appealing yet stylish blurry effect to your images. This can be also done via script in theme.liquid.
-
Use a spinning wheel GIF while the image is loading. This is also a useful trick to lazy load your Shopify images. It first displays a placeholder GIF of a spinning wheel before the real image can appear.
-
Put your store's logo to replace the whitespace. This can help strengthen your brand.
-
Use a low-quality image placeholder. You can add images with poor quality to display first before the original photo loads fully. This improves your website’s interactivity with people browsing.
-
Specify image container width and height using CSS. This helps to prevent CSS from making sudden layout shifts without your knowledge. If not careful, it can disrupt your site’s UX.
Lazy Load Videos
As with images, so too can you lazy load videos. Lucky if you already use a Content Management System (CMS), lazy loading attributes on images and videos may be automatically available.
Otherwise, use a plugin to enable lazy loading for your videos, irrespective of the browser your site visitors use. This is a more secure way of lazy loading. Some web browsers don't support default lazy loading settings in CMSs.
If you have any trouble putting this into reality, panic not. Don’t hesitate to seek professional help. For example, SEOAnt expert services will make it a breeze for you to lazy load your videos.
How Do I Get Rid Of Lazy Loading On Shopify?
Although lazy loading is ideal for your store, there may be times when you simply want to remove it. Read below to know different ways to go about it.
-
Change the theme. Most Shopify themes have automatically enabled lazy loading. To get rid of it, you have to change the theme to one that doesn't have this setting.
-
Remove the lazy loading script. If you added lazy loading by editing a Shopify theme, you could delete the code to remove lazy loading.
-
Replace the src attribute with data-src. This applies if you added lazy loading to specific images.
-
Remove the Javascript code. If you added loading to a JS document on your store's assets directory, deleting it will get rid of it on your Shopify store.
Does Lazy Loading Help Or Ruin My Site's SEO?
It helps your site SEO. In fact, lazy loading is a top image optimization strategy to help your Shopify site SEO efforts. Here is why :
- It decreases website load time. This improves your site’s discoverability, ranking, and user experience.
- It also improves your site LCP (Largest Contentful Paint) metrics which is crucial for SEO rankings. LCP measures how long a page’s main content loads to be ready for interactions. It could be images or blocks of text that appear on the first page (usually above the fold).
Other Shopify Speed Optimization Tips
Apart from lazy loading, there are other things you can do to increase your Shopify website speed:
- Compress your image file sizes: Use professional tools like SEOAnt image optimizer feature to reduce your picture sizes by up to 80%, without quality loss.
- Create AMP: Implement Accelerated Mobile Pages to help your pages load faster on mobile views.
- Utilize one Hero Image: Instead of using sliders to display several images at one time, use a single high-quality Hero picture instead, which loads faster and captures your site’s essence.
- Work on your codes: Codes are also a big component of your page weight. You need seasoned Shopify developers to help minify JavaScript and HTML, remove render-blocking CSS and JavaScript. That way, your site speeds are higher even when the internet is lagging and saves data.
Conclusion
To this point, we have exhaustively discussed lazy loading in detail. You should have no problems getting started for your website's lazy loading practice. It is crucial for your website speeds, ranking, and SEO efforts. But, I must say that it isn’t as simple to have everything up and running without coding experience. Therefore, I recommend taking advantage of expert services offered by SEOAnt!
