Poll: Should Browsers Implement Lazy Loading?
Lazy loading is the process of delaying the load of a resource until it's needed. Image a webpage that's 2,000 pixels high (lots of scrolling). Why should the images toward the bottom of the page load if the user clicks the first link way up at the top of the page? Doesn't make sense.
There are plugins for each JavaScript framework today that implement lazy loading for images and JavaScript files but the user only gets that load time advantage if the web developer implements lazy loading for them. Boooo. Browser vendors already off loads of features to enhance the web experience -- why not lazy loading? I would go as far as to say that it's the browser vendors' responsibility to be provide lazy loading functionality...but that's just me. Or is it?
What do you think? Vote below!
[poll id="7"]
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![MooTools Font-Size Scroller with Cookie Save]()
Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...
Hey, your “Vote”-Button and “View Results”-Button don’t work for me!
FF 3.5.1
My answer is “Yes, by default” but be very clever and don’t break the user experience! Don’t make the page feel slower than it really is.
And the page creators need an option to prevent lazy loading for specific elements, pictures and so on.
Just hackified the poll back together. Working.
make it a browser option, but more importantly make it part of the html5 spec so site owners can override the browser option.
I’d hate for the browser to take away any of my control over how my scripts load. I say no. It’s a slippery slope if we start forcing browsers to do these things for us.
I agree with T above, the final choice should be left to the developer.
@Eric: Yes the ideal situation would be that all browsers act the same…imagine a world like that…no differences between, gecko based, webkit based, opera and IE…
I voted yes, by default. If a user has the option then all of the less experienced web users will not know what it does and will not have it enabled. If it is the developers choice then surely it will invalidate webpages or require a special meta tag. Hardly ideal.
I can see the benefits of having it so why not have it as default?
hmmm yes and no. Yeah it woul be cool to save bandwidth but as a user, when I’m on a page with many images, like a gallery, I like to wait till all the image have finished loading to start browsing (which generally only takes a few second). here no matter how long I have been on the page, the images would still have to load as I scroll down, and that sucks
No way! I’m a dial-up user and this would ruin my already poor browsing experience by causing me to wait for MULTIPLE extended periods of time instead of just ONE.
@Evan Byrne: Not even make it an option? Wow.
Yep that’s how bad of an idea it is!
I think it’s the developer’s responsibility to design his/her site or app in a such a way that loading time is negligible. Also, average bandwidth levels increase every year around the world. I just don’t see a great need for some kind of hokey-feeling lazy loading implementation in modern browsers. There’s too many other, more elegant design solutions out there.
There almost could be another option like, “Yes, as an option, assuming that all browsers would lazy-load in the same standard way.”
Triggering resource downloads when needed instead of loading it all is bad for slow connections. I’d prefer priorising. So instead of an on/off-switch I’d like to have a bunch of controls to make my browser load the pages how I like them. It’s good as long as it doesn’t cause any inconvenience.
It would be great to see some AI that matches the settings actively to the available bandwidth.
Also, to make sure it doesn’t cause a new generation of javascript hacks to overcome some random shortcomings in the logic, it would be good to be able to modify the settings(or turn it off) temporarily using script.
No!! Like Evan said, this is a horrible idea that would wreck the user experience for all users.
Dialup users would be forced to wait multiple times instead of one, and high-speed users, who are used to a minimal delay when the page loads but a fully loaded page after that minimal delay, would start having to wait again simply because they chose to scroll down!
Seriously, how many pages are there out there to justify this? If it’s a massive photoblog or something, and the creator has chosen not to use thumbs or anything, there is no getting around the fact that someone on a slower connection is going to take a while to download all those images.
Why prolong their anguish? Please god no don’t let this start becoming regular practice!!!
(I am a little curious as to what sort of pages you can see this happening on outside of a massive photoblog?)
My opinion:
Browsers should take that on (but make it optional). They have the source code and they can compute what needs to be shown on the screen. All passing the buck onto us does is make everyone’s browsing experience a slower one. Evan’s problem would be solved by saying “no thanks” to his browser and not have to get annoyed at a website using lazy loading…
Also, I don’t see why it would matter if browsers do it differently, it’s just a way of saving bandwidth, so it should have nothing to do with the website source code itself.
What we as designer/developers should worry about is building optimized pages.
I personally would rather have the page all loaded up and ready for me to do whatever I like.
I don’t want to have to see an image load every time I scroll.
So I think it’s better as it is.
Besides, this would be useful for people with slow internet speeds, these days everyone has a good internet connection, and the ones that don’t, well… screw ’em.
Yes, I think browsers ought to at the very least provide an option for people who would like this functionality. I would not mind if it was turned on by default, but I would prefer it being an optional thing.
I have not given it much thought until now, but somehow giving webdevelopers some power to control in which way content is loaded sounds interesting. Being able to delay for example heavy-duty media, images, etc., which are out of view, from loading seems to be a very desireable thing for all parties. I can see the down-side of having to wait for things to load whenever you scroll, but that could be lessened quite a bit using a variety of solutions, such as: pre-loading a certain amount of out-of-view content (e.g. the imediate 25%); utilizing caching so it only affects content which is not in the cache; etc. I am sure there are many other things that could be done.
The most important thing, though, is to have an option which overrides and turns it off, much like you can override and turn off CSS and Javascript in most browsers.
Hmm, this will definitely be something to think more about in the near future, I think.
It is the developers responsibility to make sure that the page doesn’t have too much content to load all at once. A simple display:none; is all you need if you don’t want to show an image right away and it isn’t even possible to lazy load the source code because of the way HTTP works.
So really the only thing it could really do is delay loading images that are out of sight. Even doing that would break quite a few side scrolling websites (the ones that you click the button and it scrolls sideways showing you the scenery).
@Evan Byrne: “It is the developers responsibility to make sure that the page doesn’t have too much content to load all at once.” And if the developer fails the user should suffer?
Basically yeah. It’s just like anything else, if the developer fails to make a secure login system it’s the user who will suffer. Besides, I would hardly call loading all page content at once suffering.
Hmmmm. I respect your opinion very much….but you’re wrong! :P
Lazy Loading would be a great enhancement. You don’t include extra stylesheets into a page when they’re not used, so why load resources at the bottom of the page if they aren’t used initially?
Why not at least provide the option?
Not at all! It will still take just as long to load the image, why not start loading it as soon as possible instead of prolonging the agony? Browsers already load the content at the top of the page first, so when that’s done loading why wait to load the rest?!
At this point we must agree to disagree. :(
Agreed. :-)
I think another point to consider is the implications this would have on things like domready and body onload events, etc… I mean manipulating the dom before it’s fully loaded could be a real problem…
Evan, not attacking you here, but I think the reason your opinion on this matter is so strong is that you use dial-up… however times are changing and bandwidth allows us to do things like stream HD videos on the fly (I bet you don’t use YouTube much ;) ). If we don’t consider the possibilities we’ll never improve.
That’s not to say we shouldn’t take slower connections into consideration though, but I think the lazy loading off screen resources really should not be a developer’s responsability… at all…. However, there’s a balance there, because as online apps get more complicated lazy loading is a must for ajaxed apps.
Marcus, how would this improve the performance of faster connections? It’s still the same ballpark, the data has to be loaded why not load it all at once? If you ask me it actually makes less sense for broadband connections.
@Evan
Why would you load an image you will never see?
The concept David is talking about is that something like an image off your screen’s view doesn’t have to be loaded if you’ll never look at it.
It’s a waste of bandwidth for the user and the server, pages load faster, and you gotta admit its a pretty slick concept ;)
@Adriaan
The DOM shouldn’t be affected by lazy loading because that is loaded before lazy-loading kicks in (I think that’s correct… someone?)
@David Walsh
Unfortunately yes. If someone producing a TV show uses the wrong aspect ratio, the user suffers. If a radio station fails to implement dynamic range compression, the user suffers. If a newspaper uses 2pt type, the user suffers.
It is the responsibility of the person producing content for a certain medium to ensure the content is usable on that medium.
It’s not a dialup vs broadband argument here. I think the main problem is that if browsers implement this, developers will start building websites under the assumption that “hey, there’s way too much content here, but my user lazy loads so it’s all good”.
@Marcus
Why do vehicles idle? It’s a waste of gas. Isn’t it better to start your car once when you get in it than at every stop light just to conserve a relatively small amount of time and fuel?
Convenience trumps conservatism every time, my friend.
OK I’ve been thinking about this some more. Let’s take ffffound as an example, or your average Tumblr photoblog. Anything with a whole lot of images going down the page.
The problem as I’ve experienced it: There are a whole bunch of images, and they don’t load in order. I want to scroll down and look at the images in order, but have to wait for every image on the page to load to be sure that I can do so.
Alternative solution to lazy-loading: Browsers ensure (optionally) that images are loaded in the order they appear in the markup. The second image doesn’t begin loading until the first one has fully loaded, and so on.
Now this doesn’t address the fact that users still need to download everything on the page, and servers still need to serve it all up. However it does address the one and only usability issue (besides scroll wheel-induced RSI) I’ve ever had with these pages.
I think that if the former problem is really an issue for you, the tools are already out there for you to alleviate that – thumbnail based image galleries, slideshows, lightboxes, etc.
But if you are really want to ignore those tools and build a page with a massive amount of content all there from the get-go, you should implement my solution and stop ignoring the elephant in the room: you have built a page with a massive amount of content. If neither you or your users want to see all that content, WHY IS IT THERE?!
@Derrick
If we could conserve a little fuel efficiently, why wouldn’t we? Hybrid cars are getting popular for a reason.
@David
Good topic…. worms everywhere ;)
@Ben & @David
I agree that if the developer fails the user should suffer. That’s what makes some sites popular and others failures.
If lazy loading is a popular/useful feature then browsers should adopt it (and make it optional for ppl that just don’t want it), if not then probably not something I personally would take on and if some devs want to, if their site is a success then who cares?
@Marcus
Lazy loading is hardly efficient. As I said, it’s akin to having a car that remains off any time you aren’t moving, and has to turn itself on when you press the gas pedal. Your driving experience is going to be quite frustrating having to wait that relatively small amount of time for the car to start every time you want to move further ahead (like waiting for images to load every time you want to scroll down).
It’s a very well-intentioned idea, but when push comes to shove, it’s detrimental to the user experience, which, as web designers, should be our first priority, should it not? Besides… the developer can already choose to implement lazy loading via Javascript without bothering browser developers for yet another feature that stands no chance of being standardized ;)
@Derrick
If images took time to load, I’d agree with you, it would be detrimental to the user experiece but nowadays images don’t take even a second to load as broadband speeds increase.
However, if people suffer (be it a slow connection) because of the images etc. loading then they could turn the feature off the browser. I would in that case, it’s not that important a feature.
That said, if the buck was passed on to us web devs for that, I personally wouldn’t bother with it on stuff I make.
@Marcus
I’d argue that superfast broadband users would suffer even more from this feature than dialup users, simply because we’re NOT used to waiting around for anything to load.
Sure for the most part, many images don’t even take a second to load, but they’re not always tiny and the time they take is never zero. If it were, I’d be all for lazy loading.
But unfortunately my experience as a broadband user would change from…
Page loads completely, then new information appears INSTANTLY as I scroll down to it, because everything is already there
…to…
Page loads, then as I scroll down my browser fires off a HTTP request for more data, I see an empty space where some content is going to be soon, whatever “LOADING” indicators my browser has are activated, the image loads, browser “LOADING” indicators deactivate, rinse and repeat for every little touch of the scroll wheel.
It takes the reliability out of the simple act of scrolling. I’m happy to scroll in my browser at the moment, I know that the act of doing so isn’t going to load new content in the way that clicking a control on the page might.
If this feature is implemented, the simple act of scrolling gets a whole lot more unpredictable for your users, which is a bad thing.
Also remember that just because the media is loaded and not viewed now, doesn’t mean it won’t be viewed later. Browser caching helps squash a big chunk of what seemingly gets wasted by loading off-screen content.
Something Evan Byrnes said I kinda agree with. Flash already does this. They lazy load everything. EVERYTHING! To me, I often find this wrongly done. While I’m reading the home page blurp, it should be busy loading the other pages, so when I click About, it doesn’t have to show me “Loading… 0%”.
Like he said, what a waste of time! You had all that time while I was reading to do some loading in the background.
The key here though, is to continue to load things you think the user will most likely want, in the background. In a way that doesn’t disrupt at all. If something that I don’t need immediately, it should be getting loaded in a non-disruptive way that doesn’t freeze up or slow down my browser.
I can’t see the poll, there’s only [poll id=”7″] instead.
It depends on the connections. Some countries have really crappy connections, and it would be nice if all images were loaded ASAP. If browser makers do not take this into considerations, it will be a setback for these people!
When you want to quickly review the graphics a graphics-heavy page, lazy loading is a total disaster. It should be available, but users should be able to turn it off for specific websites. For example since Ebay turned it on, browsing their photo images / postcards takes about 10 times as long.