What is Lazy Loading?
Lazy-loading is a technique that defers the loading of non-critical resources at page load time. Without lazy loading in place, a website will load an image at its full size by default. If a store has many products, that means all of those product images will be loaded at the same time. This can, of course, destroy a page’s load time.
With lazy loading, the images will be loaded as the user scrolls down the page. This is often done by having low-quality lightweight placeholders 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.
How do you lazy load images on Shopify?
Adding lazy loading to Shopify has never been simpler. Using the LazySizes Lazy Loader, the process is as fast as adding a class name to an img tag. First, we need to download the LazySizes JS file. Next, add the following code in the section of theme.liquid.
Should I use lazy loading?
Like almost every “should I?” question relating to websites, this one should be answered by focusing on the user. We all want users to remain on our site, interact with it and hopefully convert. This can't be done if they leave the site out of frustration. Over the last decade, our 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. Research shows that website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0-5)
Does lazy loading improve performance?
A site’s performance can be significantly enhanced with the use of lazy loading. If a website contains a lot of imagery, this technique will allow the page to load more quickly simply because it has less to load. 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. There could be multiple images loaded that eat away at the users’ data, yet they aren't even seen. This is a waste of the users’ time, as it causes the page to load more slowly and a waste of their battery, and worse, their money! Lazy loading images and video reduces initial page load, the page’s overall weight, and system resource usage. All of these things improve performance.
How do you implement lazy loading?
Though it may be tempting to lazy load everything, it is better to avoid lazy loading anything above the fold. Any element above the fold should be considered a critical asset and be loaded typically. Another thing to consider is the importance of using placeholders. If placeholders aren't used, it can cause a cumulative layout shift (CLS). You can read more about CLS in our blog on Core Web Vitals. Such shifting in the layout can be very confusing for the user and create a poor user experience.
Does lazy loading affect SEO?
Google uses more than 200 ranking factors in its algorithm, and specialists in SEO all agree that page and image loading times are among the most critical factors. According to Google, as a page load time goes from 1s to 3s, the probability of bounce increases by 32%; from 1s to 5s, the likelihood of bounce increases 90%, from 1s to 6s it increases 106%, and from 1s to 10s it's 123%. With Google’s new page experience update, improving your site’s core web vitals has never been more important. One great way to do that is to activate lazy loading.
The most frustrating part of using the internet is waiting for heavy pages to load, and with lazy loading, we have a great tool to help lower the load time. It can help reduce bounce rates, increase conversions and give our SEO a much-needed boost. Most importantly, it will provide our customers a better user experience and make them much more likely to return to our website in the future.
What Blend can do to help
Our Blend team consists of UI & UX designers, Front & Backend developers, CRO Consultants, Growth Marketers, and Strategy Consultants, all of which are our On-Demand service. Our company culture is focused on continuous learning and development. You will benefit from a tight-knit team that's on the pulse in a quickly changing Shopify environment as Shopify experts. Get the conversation started by getting in touch with us here