We’re Blend Commerce

Contact our team using the options below

hello@blendcommerce.com
+44 (0) 1789 765 822
+1 (833) 456-4236

Courtyard Offices, 55 High St, Alcester B49 5AF

Search our shop

    We’re Blend Commerce

    Getting in Touch

    Contact our team using the options below

    hello@blendcommerce.com
    +44 (0) 1789 765 822
    +1 (833) 456-4236

    Courtyard Offices, 55 High St, Alcester B49 5AF

    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.

    Finally, we need to add the lazyload class to our img tags.
    There you have it; our image will now be lazy-loaded.

    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?

    Lazy loading became a web standard back in 2019, using loading=” lazy” in the HTML is supported by most modern browsers. How you choose to implement lazy loading must consider what browsers you support and, of course, what you want to lazy load. To provide compatibility with older browsers or perform lazy loading on elements without built-in lazy loading, you will need to use a Javascript solution. Numerous existing libraries can help achieve this.

    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.

    Final Thoughts

    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

    About the author

    Jesse, Shopify Developer

    Jesse

    Shopify Developer

    Jesse is an experienced front-end developer and has worked with clients such as Yamaha, Epson, Universal and Volvo. His main goal in development is to create lightweight and environmentally friendly web solutions. He is creative, has a passion for web animation and is currently studying a diploma in UX Design.

    Let's achieve better Shopify store performance. Together.

    We help clients achieve significant results. On average, clients who work with Blend on design & development projects for their Shopify store achieve these results after 3 months: