Updated: June 25, 2019

What is Lazy Loading?

Lazy Loading is a performance optimization technique that loads images as the user scrolls down the page, instead of during the initial page load.

Also known as “defer offscreen images“.

We often see a 10% – 30% reduction in page weight by implementing lazy loading.

On the browser side, the page loads faster because it’s not loading all the images right away.

On the tech side, it works by replacing the html image src attribute with a data-src placeholder – this prevents the image from loading in the standard html sequence. Then javascript is used to grab that placeholder url and update the element’s src attribute, loading the image when it comes into view.

The Google effect: Lazy loaded images don’t contribute to the initial page load, so your site is lighter and gets the benefits that come with a faster load time (improved rankings and traffic).

Why is Lazy Loading Awesome?

  1. The page loads faster!
  2. Faster pages = better SEO rankings
  3. Faster pages = better conversion rates

Consider this:

mobile speed affects conversion rate

Now let’s take a look at this example of a customer’s home page before and after implementing lazy loading:

BEFORE

shopify page before lazy loading

Pretty heavy page with a slow load time at this point, buuuuuut…

AFTER

shopify page after lazy loading

Check the highlights after this one optimization:

  • Mobile load time improved by over 2.5 seconds
  • 20 fewer server requests
  • Page weight decreased by 1MB
  • Nice!

Those stats are using webpagetest.org with mobile LTE 12Mbs download speed.

The site is still heavy at about 10MB (we can usually get sites down to 1MB – 2MB with a full optimization… but even with just the lazy loading you can see the significant load time reduction.

How to Add Lazy Loading to Your Shopify Theme

Option A) If you like saving time and want it done for you, we have a Shopify lazy loading service here.

We can usually lazy load videos as well (if they’re not at the top of the page).

Option B) If enjoy working with code and want to take a crack at it, you can use a library like lazysizes to implement on your site.

The detailed instructions to implement using lazysizes are on that page if you scroll down.

The summary is that you’ll:

  1. Add the lazysizes library to your theme assets
  2. Optionally add some CSS styling
  3. Locate the files in your template serving up your images
  4. Update the image tags by swapping “src” with “data-source”, adding the”lazyload” class, and testing

Sometimes you can run into problems, depending how the theme code is setup, but that’s the fun part of the challenge 🤓

The exact files to edit in your Shopify site will vary based on your theme, but generally you want to look for the template code that loads images, and swap in the lazy loading syntax explained by lazysizes (or whatever library you end up choosing).

For example, if you’re using the lazysizes library I recommended, once you have that installed in your theme.liquid file, you want to swap out your standard img tags:

<img src="IMAGE_URL">

With the new lazy loading syntax:

<img data-src="IMAGE_URL" class="lazyload">

To install the library, download the latest file from that lazysizes page, upload to your Shopify theme Assets folder and name it lazysizes.min.js, then include it in your theme.liquid <head> section like this:

<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>

*The <style> part is used to create a subtle CSS animated fade in effect.

Once you have the code setup, you’ll see your images fade into view as you scroll down your site, rather than all at the initial page load (you can also refresh this page and scroll down really fast to try and catch the affect here).

Lazy loading can usually speed up most of your site – Home, Collections, Product pages, and Blog posts all benefit.

When we implement lazy loading, most of your store is good for the future and will automatically lazy load images. In some cases there may require manual intervention for future elements, but we’ll explain if that’s the situation in your theme.

How to check if lazy loading is set up on your website

To see if you have lazy loading on your site, you can run it through the Shopify Analyzer.

lazy loading test example with Shopify Analyzer

A second way to check is by inspecting the browser code by right clicking on your page, then selecting “View source”. Search for “lazy” on that page – if there aren’t any elements with “lazy” then you probably don’t have it.

If you view source and see some “lazy” elements, it’s still worth running through an analyzer tool to make sure they’re all loaded with “true lazy loading” (and not just “placeholder lazy loading”).

True lazy loading vs placeholder lazy loading

You might have lazy loading already set up, but still getting warnings in analysis tools.

This is likely because you have “placeholder lazy loading” instead of “true lazy loading”.

True Lazy Loading: Images don’t have a src attribute, so they don’t load on page load, only when the user scrolls into view.

Placeholder Lazy Loading: Images have a small placeholder thumbnail that loads on initial page load, then as the user scrolls the larger regular image replaces the thumbnail.

Sometimes having placeholders is a design preference, and that’s ok. But if you want to maximize performance we recommend converting to “true lazy loading”.

What’s Next?

If you want us to implement this for you, head over to our Optimization Services page and select Lazy Loading.

If you landed here looking to optimize your Shopify site, here are more tips for speed gains:

  • Automatically compress your images with Crush Pics
  • Make sure you’re using JPG image format instead of PNG for photographic images (PNG’s are often 2x – 10x larger for the same resolution
  • Run your site through the Shopify Analyzer to see what optimization opportunities you have, and how to approach them
  • If you’re feeling ambitious, check out our full performance optimization guide: How to Optimize a Shopify Site.