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:
- Replace all <img src=””> with <img class=”lazy” data-src=””>
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
- 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?
3 thoughts on “If You’re Not Lazy Loading Your Images, You’re Being Wasteful”
Completely agree! I usually save visitors 2 to 5 megabytes by lazy-loading images on a Shopify store. Thanks for the tip about lazy-loading just “below the fold” images—I usually don’t do that and lazy-load everything 🙂
Correct. Using lazy load can improve the speed of website and saves a lot of bandwidth if user just want to see upper side of the site.
Lazy-loading is almost as bad as Infinite Scroll…..
…which is the devils’ spawn of the internet.
Neither provides info about the quantity of Content – so time to explore is unknowable.
Neither provides the certainty that “mile-markers” give for navigation back and forth.
What is wrong with numbered pages ?
Why is it so bad to give Visitors FULL info about the quantity of Content.
This Restaurant analogy is flawed.
“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?”
Did you order a 5 course meal without seeing ALL parts of the Menu…..
AND having those different parts CLEARLY labelled, sectioned or paged…
…with each section easy to return directly to ?
If you knew that you only wanted a Main course, surely you would jump straight to that Page…
…not scroll past unwanted stuff ?
If the Content is more than (say) 3 to 5 clicks of a “Page Down” button, it should be paginated.
Then, it should be possible to jump forward many pages….
…and jump back to a specific page.
Once upon a time that was what happened on websites.
Who decided to break from common sense … and why ?