Blog

The most frustrating part of using the internet is waiting for heavy pages to load, but it can have much more severe consequences for Shopify store owners. Even down to a second or two, slow-loading websites can drastically reduce on-site conversions and, therefore, revenue and profit. 

The problem is that for an eCommerce website to be successful, store owners need incredibly high-quality images that increase page load speed. It's a catch-22. What, oh what, is a business owner to do? 

The answer, implement lazy loading. 

What is Lazy Loading?

Lazy-loading is a technique that defers the loading of non-critical resources when a page load request is made. 

Without lazy loading in place, a website will load all the images within a webpage at their full size by default. And a site visitor has to wait for all of this loading to be completed before interacting with the website.

If a Shopify store has many products, all the product images will be loaded simultaneously. This can, of course, destroy a page's load time.

With lazy loading images on a Shopify site, the images will be loaded as the user scrolls down the page. This is often accomplished by having low-quality lightweight Shopify placeholder images that appear on the initial load. Then, when the user scrolls to the point where an image enters the viewport, a higher quality version of that image will be loaded. This method avoids the user seeing whitespace as they wait for the image to load, further improving their website experience.

Lazy Loading Advantages

• Reduces initial load time by only loading content when needed
• Saves bandwidth by loading resources only as necessary
• Improves user experience with faster access to critical content
• Decreases server load by spreading out requests over time

Lazy Loading Disadvantages

• Can lead to a disjointed user experience if content loads slowly or erratically
• May negatively impact SEO as search engines might not index lazy-loaded content properly
• Increases complexity of website development and maintenance
• Can cause issues with users who have JavaScript disabled as lazy loading often relies on it

Does Lazy Loading Improve Performance?

Yes, a Shopify site's performance can be significantly enhanced with lazy loading images. For example, if a website contains a lot of imagery, this technique will allow the page to load more quickly simply because it has less to deal with. 

It is not only an issue of speed but also data usage. Let's say a user loads a page and only sees the content that sits above the fold. Multiple images could be loaded beneath the fold that eats away at the users' data, yet they aren't even seen. 

Lazy loading images and video reduces initial page load, overall weight, and system resource usage. All of these things improve performance.

Does Lazy Loading Affect SEO?

SEO specialists agree that page and image loading times are among the most critical factors affecting SEO. Google highlights the importance of a quick load speed concerning website bounce rate:

• As a page load time goes from 1 second to 3 seconds, the probability of bounce increases by 32%
• From 1 to 5 seconds, the likelihood of bounce increases 90%
• From 1 to 6 seconds, it increases 106%
• From 1 to 10 seconds, it's 123%

Research also shows that website conversion rates drop by an average of 4.42% with each additional second of load time.

Additionally, concerning Google's new Page Experience Update, improving your site's Core Web Vitals has never been more critical. One great way to do that is to activate lazy loading.

Should I Use Lazy Loading?

If your Shopify store hosts multiple high-quality images, then lazy loading can reduce load speed and data use, increase user experience and, potentially, conversion rate. 

With that said, there are also times when lazy loading should not be used. As tempting as it may be to lazy load everything, we recommend not using lazy loading on anything above the fold. 

Any element above the fold should be considered a critical asset and loaded typically.

A Note on Shopify Placeholder Images

Another thing to consider is the importance of using Shopify placeholder images. If these aren't utilised alongside lazy loading, it can cause a cumulative layout shift (CLS). Such shifting can confuse the user and create a poor experience.

How is Lazy Loading Implemented?

Adding lazy loading to Shopify has never been easier. Just follow these instructions:

1. Download the LazySizes JS file.

1. Add the following code in the section of the theme.liquid: <script src=”lazysizes.min.js” async=””></script>
   
   
   
2. Finally, add the lazy load class to your image tags.

There you have it; your image will now be lazy-loaded, and the backend code should look something like this:

Using the LazySizes Lazy Loader on your Shopify site is as fast as adding a class name to an image tag. 

A Note of Warning

Lazy loading became a web standard back in 2019. As a result, most modern browsers now support using loading=" lazy" in your HTML code. However, how you choose to implement lazy loading must consider what browsers you support and, of course, what you want to lazy load. 

You will need to use a Javascript solution to provide compatibility with older browsers or perform lazy loading on elements without built-in lazy loading. 

The good news is that numerous existing libraries can help achieve this. Alternatively, get in touch with us for help.

How Blend Can Help with Lazy Loading on Shopify Websites

We want users to remain on our clients' Shopify websites, interact with them and hopefully convert. Unfortunately, this can't be done if users leave your site out of frustration. 

Over the last decade, attention spans have dropped on average from around 12 seconds to 8 seconds, so the likelihood of a user hanging around to wait for images to load is becoming less and less.

Lazy loading is a great tool to help lower load time. It can also help reduce bounce rates, increase conversions and give your Shopify website SEO a much-needed boost. 

Most importantly, it will provide your customers with a better user experience and make them much more likely to return to your website in the future.

Our team at Blend consists of UI & UX designers, Front & Backend developers, CRO Consultants, Growth Marketers, and Strategy Consultants, and we can help you implement lazy loading across your Shopify site through our service offering.