Lazy Load Images in Shopify for a Faster Site | Speed Optimization

2019-01-20T14:28:03+00:00December 14th, 2018|Performance Optimization|0 Comments

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.

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.

If you’re on the edge of your seat waiting to hear how this story ends, I’ll share… we did more optimization work on their site, and here’s a snapshot of their performance today:

BOOM!

Major weight reduction helped make significant speed improvements.

Most sites with a lot of edits and installed/uninstalled apps benefit from our full service packages, but every site benefits from lazy loading.

… unless you already have lazy loading, in that case good job 👍

How to Add Lazy Loading to Your Shopify Theme

Option A) Save your time and grab our Shopify lazy loading service here and we’ll handle it for you.

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 instructions to implement using lazysizes are on that page if you scroll down.

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).

To see if you have lazy loading on your site, load up a longer page with images out of view, for example yourshopifysite.com/collections/all.

If you scroll down and see images fading/animating into view, then you probably have it (we’ve seen themes load images but hide them, then reveal when scrolling).

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 likely don’t have it, and are missing out on speed gains pal.

Lazy loading can usually speed up your Home page, Collection pages, Product pages, and Blog page.

When we implement lazy loading, most of your store is good for the future and will automatically lazy load images, except blog posts or pages where you enter content in the Shopify editor.

But don’t sweat it, we show you how to manually add lazy loading so you can use this on article pages too (and get those blog posts lighter to get better ranking).

What’s Next?

If you landed here looking to optimize your Shopify site, here are some other common areas you can get some speed gains:

  • Disable quick shop feature (where you click a button on collection products to show the product’s details)
  • Automatically optimize your images with Crush Pics
  • Cut back on apps, elements loaded per page, and carousels (I recommend A/B testing or using heat map software to see what your users are interacting with)

If you’re interested in optimization services done for you by one of our Shopify Optimization Specialists, head over to our Shopify Optimization Services page to see how we can help.

About the Author

Joe is a Shopify Expert, eCommerce entrepreneur, and the founding architect of Speed Boostr. Outside of tech he's into travel, trees, books, and music 🤙

Leave A Comment