If You’re Not Lazy Loading Your Images, You’re Being Wasteful

Think about the last time you went out to dinner. Did you order a 5 course meal, but then only eat 2 of them? Of course not, that would be a waste. So then why are you serving an entire page of images to your website visitors when they’re only looking above the fold?

I had previously written about lazy-loading your images – but at the time the implementations were still new and cumbersome. I worried about the compatibility of the technique with common browsers. And to be honest – it was going to require rework and I was lazy.

It’s now almost 2019, and there are no more excuses. Most browsers implement the Intersection Observer API, common libraries make it super simple to implement, and speed is more important than ever.

How I Implemented Lazy Loading in 60 seconds

I know that heading sounds like an exaggeration, but here’s how simple it is using a popular lazy loading library:

1. Add a javascript include for the lazy loading library.
2. Replace all <img src=””> with <img class=”lazy” data-src=””>
3. Paste 3 lines of javascript to initialize the library. SIMPLE!

Seriously. I’m going to time myself while I implement it on our homepage right now…

…and done! Okay 83 seconds, I’m slow. I bet you can do it faster. Let’s look at the results.

Before and After Lazy-Loading

Our homepage is a pretty simple landing page, consisting of 30 requests over 971 KB, 11 of those resources being images.

Now let’s upload our lazy-loading updates and try again:

(Note that you’ll have to do hard-reload, clear cache, or use a new private browser to ensure we’re not taking advantage of the browser cache in our testing)

Well isn’t that beautiful?! Page size is cut in half and shaved off a good percentage of load time. Hooray for under 1-second page load times!

Why didn’t I lazy load all the images? Because I didn’t do the ones above the fold. There’s no point since they will immediately be in view. Lazy loading those above the fold may actually make those images appear slower, and I don’t want the user to be able to notice any difference. I only had to lazy-load 5 of our below-the-fold images to get these amazing results.

The jQuery Lazy Plugin

My previous article implemented lazy loading in plain javascript, but I wanted something more robust. I scoured the internet for popular lazy-loading libraries until I found the jQuery Lazy plugin. Here’s why I like it:

• It’s super fast to implement (see 3 steps above, done literally in seconds)
• It’s lightweight, 4.9 KB standalone, even less delivered through gzip or brotli compression
• It loads the images just slightly before they enter your view. Other approaches will wait until they’re in view, so there’s a delay for the image to load and see the page elements reorganize. No flicker effect with this one.
• It works on the browsers that haven’t yet implemented Intersection Observer, making it widely compatible.

Stop Being Wasteful!

If you’re making your visitors download all your images before they show any intent on looking at them, you’re just being wasteful. Stop it! Your server, and your users will thank you.

With the quick implementation I did on our homepage we’ll be saving each visitor that doesn’t scroll all the way down about 500 KB of data transfer. That’s a lot on a mobile phone!

How much can you save your visitors?