Shopify lazy loading and why it's good for your store

Lazy loading is a crucial part of website optimization, especially when it comes to performance. Since the technique delays loading of below-the-fold resources, including images, your pages can load the initial view faster. This can lead to a better user experience, higher SEO rankings, and potentially, more sales.

In this guide, we’ll focus on explaining how lazy loading can help your optimization strategy. You’ll learn how to add lazy loading to your Shopify store for both single images and store-wide.

Enable lazy loading in one click with TinySEO

Automated SEO features

Speed optimizer

Visit TinySEO

What is lazy loading?

Lazy loading is a technique used to load non-essential resources (like images, videos, and scripts) only when the user scrolls to them. Since all website resources aren’t loaded at once, it helps improve website performance and page load time.

This method is known as “lazy” because it asks the browser to put off certain tasks. For example, let’s say you enable lazy loading and a user visits your page. They see all the above-the-fold content as soon as they open the site. Everything below-the-fold isn’t loaded until the user scrolls to it.

If you came here to learn how to add lazy loading to Shopify, you can jump straight to our guides:

• Enabling lazy loading for single images
• Enabling lazy loading theme-wide

How does lazy loading work?

When a user opens a page, their browser locates all the <img> tags in HTML code and queues it for downloading.

However, images take up a huge part of total page weight, so loading them simultaneously can slow down a web page.

Lazy loading helps by delaying the loading of below-the-fold images that website visitors do not immediately see. Here’s a visual example of how it works:

When a user opens the page, only above-the-fold images are loaded. Meanwhile, below-the-fold content has the loading = “lazy” attribute added, so images are blurry or or only load the dominant color until the user starts scrolling down to them.

The lazy loading attribute in HTML code looks like this:

<img
 src="white-shirt.jpg"
 loading="lazy"
 alt="White shirt on a male model"
/>

How lazy loading benefits Shopify stores

Every Shopify store’s product pages are packed with images. And that’s how it should be, people visiting your store should be able to see the product they like from every angle.

Lazy loading can help a lot with better store performance, this is how:

• Improved page load time – since lazy loading prevents the site from loading everything at once, the browser makes fewer initial requests, resulting in faster load times.
• Lower bandwidth usage – if a visitor leaves your site without scrolling to below-the-fold images, their browser won’t download those images. According to a study by Google, with lazy loading enabled, pages loaded 103% and 120% fewer image bytes on desktop and mobile, respectively.
• Lower bounce rates – if your Shopify store visitors can start browsing your store pages immediately after clicking on them, your bounce rates will undoubtedly be lower than if they were staring at a white screen for three seconds.
• Better rankings – because site speed is a ranking factor, implementing lazy loading could even result in better rankings over time.
• Higher conversion rates – A fast website equals a smooth shopping experience, and that equals more sales. You can read more in our article on how to fix low page speed affecting sales.

Remember that you will benefit from lazy loading images not only on your product pages, but also on your blog, homepage, and collection pages. That, paired with other Shopify image optimization techniques, will bring your store’s performance to the next level.

Does lazy loading affect SEO?

The short answer is definitely yes, lazy loading affects SEO in a good way. Modern crawlers can render images and can access their alt texts even if their loading is delayed.

First of all, let’s address the concerns. Modern crawlers can access images and their alt texts even if their loading is delayed. So, lazy loading won’t prevent image indexing.

If you implement lazy loading on below-the-fold images, it can help improve one of the three Core Web Vital metrics, Largest Contentful Paint (LCP). LPC is a metric that shows how much time it takes for the longest piece of content to show up on the screen.

Core Web Vitals have been a ranking factor for a while now, and an important one, so boosting LPC score can contribute to better rankings.

In general, lazy loading is a great way to improve Shopify store speed, which is key for good online store performance on search engines.

How to implement lazy loading on Shopify?

You can implement lazy loading on Shopify in two ways – for single images or the whole theme. Both methods require some coding skills, but we’ll try to guide you through it step by step.

Enabling lazy loading for single images

Implementing the loading = “lazy” attribute to each image individually is only good when you have few images or need a beginner-friendly method.

Here’s a tutorial on how to do it:

1. Go to your Shopify Admin and locate the image you want to add lazy loading to. For example, go to Content > Blog posts, open the post, and find the below-the-fold image you want to edit.
2. Click “Edit HTML” to access source code.
3. Locate the <img> tag. It should look something like this:

   <img alt="Your image description" 
   src="https://cdn.shopify.com/s/files/this-should-be-your-image-url.jpg">

4. Replace everything inside the <img> tag with a code like this:

   <img 
     src="https://cdn.shopify.com/s/files/this-should-be-your-image-url.jpg" 
     loading="lazy" 
     width="800" 
     height="500" 
     alt="Your image description">

5. Click Save.

Enabling lazy loading theme-wide

You can enable lazy loading for your whole website by adding loading=”lazy” attributes to different sections of your store.

Follow these steps:

1. In Shopify Admin, go to Online Store > Themes.
2. Click the Actions button and press Edit code.
3. Search for theme files with image tags. Click CTRL + F (or Cmd + F) and type in <img.
4. After the image tags, add the loading=”lazy” attribute.
5. Click Save.

Some theme files you could search for are product-card.liquid, featured-product.liquid, or product-template.liquid. However, the files depend on the theme you’re using.

How to check if my Shopify theme has lazy loading by default?

Most Shopify themes that are built on Online Store 2.0 have lazy loading enabled by default. In such a case, you shouldn’t add lazy loading manually to prevent duplicating it.

For example, we downloaded a few free themes that Shopify has to offer and found that Dawn, Craft, and Sense come with lazy loading enabled.

Here’s how to check if your theme has lazy loading enabled:

1. Open your collection or product page that has images below the fold.
2. Right-click any below-the-fold image and press Inspect.
3. Look for the loading=”lazy” attribute after the <img tag.
4. If you can locate it and you haven’t used an app or added it manually, it means your theme has lazy loading enabled by default.

Things to know before using lazy loading

Before we talk about testing lazy loading for Shopify stores, there are a few other things to bear in mind if you want the best possible results:

• Do not lazy load images above the fold. A study by Google showed that lazy loading of all images caused the LCP to slow down by 13%. However, removing the lazy loading attribute from above-the-fold images resulted in a 14% faster LCP.
• Use CSS to specify image container width and height. If you don’t, it will create sudden layout shifts that can be disruptive for user experience.
• Use modern image formats. When possible, use WebP, which is around 30% smaller than JPG and ~3x times smaller than PNG. This can help amplify your performance gains.
• Test on different devices. Lazy loading may act differently on mobile, so make sure to text for layout shifts and see if images load quickly.

Lazy load design type

When thinking about your website design, you have to choose appropriate placeholders for true lazy loading. After all, your store visitors do get a glimpse of them so you want a placeholder design that matches your brand and the overall feel of your store.

There are three main options to consider:

• Dominant color. Pick a color that dominates your image and load a plain color before your real image shows up. Stores that sell digital artwork or photography should consider a dominant color placeholder as the images should not be associated with low quality under any circumstances.

• Blurry images. An equivalent of the real image just in very low resolution could be a great option for retail stores since they give an indication of the object in the image.

• Spinning wheel. You can add an animation of a spinning wheel that shows up before the image loads. Alternatively, you can use your store’s logo.

In rare cases, you can choose to load thumbnails instead of your regular images until the person gets to them.

How to check if your Shopify lazy loading works?

You can easily check if Shopify images are lazy loading using your browser developer tools. The process will be similar to most browsers, including Chrome and Firefox. Here’s a quick guide:

1. Open the page with images that you enabled lazy loading to.
2. Right-click anywhere and click Inspect.
3. Go to the Network tab. Refresh the page.
4. Start scrolling from the top of your website. If resources are loading as you scroll, it means lazy loading is enabled.

Final thoughts

Lazy loading is a process of delaying the loading of below-the-fold images so that the main content loads faster. It can speed up your page load times and lower the bounce rates coming from frustrated visitors.

However, if implemented on above-the-fold images, it can worsen your LCP, so you have to be careful where you add it. There are multiple ways to approach this – you can add lazy loading for single images or store-wide, but it requires some coding skills.

If you’re afraid of breaking your site, make sure to back up your theme first or hire a developer. Alternatively, there are Shopify apps that offer one-click lazy loading setup.

×

About the author

Kristina Jaruseviciute

Kristina is a Content Lead at TinySEO responsible for informing and educating readers on all things Shopify-related. She covers a broad range of topics around SEO, AI visibility, website performance, and conversion rates to help merchants stand out in a competitive landscape.