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.
How Lazy Loading Enhances Shopify Site Speed and Core Web Vitals
Lazy loading directly impacts Shopify store performance by reducing initial load times, enhancing Core Web Vitals metrics such as Largest Contentful Paint (LCP), and minimizing server resource usage. Core Web Vitals are critical for improving your site’s SEO and user experience, as Google considers these metrics when ranking websites.
Lazy Loading Advantages
By implementing lazy loading, Shopify store owners can:
- Reduce initial load time by only loading content when needed
- Save bandwidth by loading resources only as necessary
- Improve user experience with faster access to critical content
- Decrease 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
Will Lazy Loading Improve my Shopify Site's 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.
Pro Tip: At Blend Commerce, our team can help assess which parts of your Shopify store would benefit most from lazy loading, ensuring that your Core Web Vitals are optimised without compromising user experience.
How is Lazy Loading Implemented?
Adding lazy loading to Shopify has never been easier. Just follow these instructions:
- Download the LazySizes JS file.
- Add the following code in the section of the theme.liquid: <script src=”lazysizes.min.js” async=””></script>
- 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.
Why Choose Blend Commerce
At Blend Commerce, our expert Shopify developers audit and optimise Shopify sites to improve Core Web Vitals, including site speed. Our process involves:
- Detailed code audits: Identifying opportunities to enhance Core Web Vitals, from home pages to product pages and across. your site.
- Custom developer recommendations: Clear, actionable steps with estimated timeframes for implementation.
- Focus on measurable results: Metrics like load time reduction, and maximum time savings.
A Final 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, and penalise you on your CWV score.
Ready to Improve your Shopify Site's Speed?
If you're looking to optimise your Shopify site for better speed, user experience, and Core Web Vitals, lazy loading could be the solution. At Blend Commerce, we have the expertise to audit your code, implement lazy loading, and make targeted improvements that drive results. Reach out to us today to learn more.
Published: August 31, 2021
Last updated: October 21, 2024
