I hate hate hate lazy load. Why? Because it hurts UX (user experience) at the benefit of maybe tricking page speed tests. It’s basically a cheap way of trying to speed up your page speed score by loading fewer items in the beginning. Problem is to the human eye, it makes things load slower!
Sure…there’s the logic that items farther down on the site shouldn’t be loaded if the user hasn’t scroll there. True…but do you really have control over which items are lazyloaded and are you so sure their delayed load won’t affect user experience?
Let me go deeper into the subject of when you should (and shouldn’t) use lazy load.
When you SHOULDN’T use lazy load:
- You have images above the fold. (it delays your header/banner load)
- You have a store. (shoppers can’t fast-scroll as quickly through your site)
- Doing it only to fool pagespeed scores. (while hurting UX for actual human users)
- You’ve got a CDN. (their servers do the work, and not yours)
- Have only a few images on each page. (static assets are easily cached and load quickly anyways)
- You have a fast-loading website and strong server. (no point in delayed asset loads if your current site and server handle them well)
The point of your website is to serve users first and robots/search-engines second. Why should you have an image that loads later rather than sooner? The point of the improving page loads is to load things FASTER, not slower. Letting your site load images right away makes your site appear to load faster for users. (Are you forgetting the word LAZY in “lazy load”? It means things load slower!)
Don’t know how to load things faster? That’s a fair place to be, you can improve it in a wide variety of ways! My site can help you with that.
When you SHOULD use lazy load:
- Most of your images are below the fold, at least a few scroll-clicks from the top of the site. (makes sense not to load images/items that users might not even scroll to)
- You’ve got huge images, and no CDN. (saves server resources/bandwidth)
- You’ve got many images, and no CDN. (saves server resources/bandwidth)
- Images aren’t integral to your user experience. (users come only for your text)
- Using it for SCRIPTS, not images. (perfect for speeding up page load)
- Your web-server is really weak. (lazy load will save server processing)
- You care about page scores. (and believe in their supposed benefits, even though I don’t)
So there you go, a few instances where I would recommend lazy load. But other than these few scenarios, it’s best to get a CDN and let all your image assets load naturally!
The last say on lazy load
Ultimately, lazyload should only be used to speed up page load or decrease server use. And NOT to compensate for poor web coding or underpowered web server. When used correctly, lazy load should have no visual impact on your web pages. Used incorrectly, lazy load affects user experience.
Want to argue more about lazy load?
No. You load less AND you save your visitor’s bandwidth. Of course it makes no sense to lazy load images above the fold and of course it makes sense to lazy load images below the fold only – what else? As long as you can be sure that the visitor has more choices than scrolling down you should use lazy loading. Not on a onepager (no other choice than scrolling down). But as long as you offer e.g. a Hamburger menu button you would waste all of those users bandwidth who want to use that menu.
Nothing new, I guess?!
Hmmmm….I wrote a whole guide explaining my position but your reply doesn’t acknowledge any of the carefully-written explanation for it.
“You load less…”
– No. Lazyload doesn’t “load less” if your users end up loading the entire page anyway. In the scenarios where they’ve don’t, I’ve properly acknowledged lazyload’s utility in those instances.
“…AND you save your visitor’s bandwidth.”
– I’ve never refuted this and not sure how that’s relevant to my main detraction (USER EXPERIENCE). Bandwidth has nothing to do with user experience. It doesn’t relate to the line you quoted from me in any way. And furthermore, most site speed issues nowadays have much more to do with all the CSS/JS/PHP processing. Except for the occasional newbie cases of unoptimized images, image size rarely the main issue for site speed.
“As long as you can be sure that the visitor has more choices than scrolling down you should use lazy loading.”
– This is kind of funny and exactly my point. How does the user see those choices quickly if you’re lazy loading everything? We’re assuming every visitor’s logic upon visiting a page is to read in place or scroll, right? Well, they’re definitely gonna scroll if some things are taking longer to load. Or what about the folks who wait patiently for things to load before scrolling? Sounds to me, you’d lose either way. But sure…lazy load all the stuff on bottom if you want…that doesn’t bother me and my post already accounts for that.
I didn’t get your comment about wasting bandwidth with a hamburger menu. The hamburger menus I’ve used were a few KB or so.
This problem is solved by excluding lazyoading images above the fold. You should check out the plugin Flying Images which has this option. I use it on different sites I manage and works like a charm. Better scores + better load time + no UX sacrifice.
I’ve seen it lag many images below the fold. Especially on shopping sites when I fast scroll. I’d love to see sites where you say it works like a charm. Please pass the URL so I can study what you did.
Hi Johnny, thanks for the reply!
One site I have it activated on is https://radvanfortuinkopen.nl/
I have set the bottom margin to 500px and excluded the first 5 images. Personally, I don’t see any lag when scrolling.
Let me know what you think.
Ahaha, I just went through the site. Ok, you have so few images on this site and the images are so close to the fold that the lazy load A) doesn’t affect them much, but also B) doesn’t help them much either. But yes…I did see a slight delay when I fast-scroll on your home page. In this scenario, it really doesn’t matter. I prefer LL off but you can have it on if you believe in having higher test scores, etc.
Hey thanks for your feedback, appreciate it.
Ok so I looked at it again and when scrolling REALLY fast I could see the delay, yes.
The logic behind it is to increase test scores, but like you said, there is no reason from a UX perspective. So I decided to disable it and test again. The page size and total load time increased somewhat, but I saw no effect in onload time and the site loads just as fast as it did before with lazyload enabled to the eye. So you know what, I’m just gonna leave it disabled as it’s mainly just a vanity thing haha 🙂
Been reading your blog meticulously the past few days and am slowly coming around to focus more on UX and eye testing instead of trying to please these test scores.
Cheers!
Happy to have sat with you through this evolution! I always think it’s best to build and design for real users. The logic behind some of these tests, you end up not loading anything which would hurt your website value. Website optimization shouldn’t be content removal/delay! Hahaha.
Thank you Johnny for your thoughts on this topic.
I totally agree with your stance on ‘trying to trick pagespeed scores’. It’s all about real UX, which means pagespeed metrics may be helpful, but they should never be more important real-time loading experience on any device.
Yes, loading times are important. But good enough is good enough. No reason to try to get everything ‘in the green’ just for the sake of a good Pagespeed score.
I also have NEVER seen any ranking impact for improved loading times from say, 65 to 80+. We should stick to the basics of a technically good enough site and concentrate on great content and promotion.
This is how I dealt with the lazy-loading issue for my WooCommerce:
– First I switched it off with your snippet 😉
– To increase rendering speed, I use the Plugin Perfmatters, which enables preloading of Images. Also possible with a rel=’preload’ tag
– Clear Cache, wait until next day to re-test.
Result: Increase of 15% points in Lighthouse
Real-Time test: not much of a difference 😉 but not worse.
Cheers!
Thank you for this. I was lazy loading and it made my site look slow. I turned it off and it looks so much faster and only hit my page score by 5 points pftt who cares!