4

Is there any research or study that shows whether it is positive or negative to use the "lazy load"* practice on websites that focus on presenting images to the users (such as photo blogs, etc) ?

Or would any of you know whether this has a positive (such as users being happier with faster page loading) or a negative (such as users being annoyed that not all images are immediately available when they start scrolling) impact?

* Lazy load = uses a script to load images only when they're visible in the viewport, speeding up initial page loading

  • 1
    As a user it irritates me to see a spinning loading GIF in place of each image even if only for microseconds to seconds. It interrupts my browsing experience. I'd rather wait once than every time I scroll down to view the next image. – Clarus Dignus Nov 11 '15 at 4:38
4

I recently had a similar situation where there was a lot of heavy content on a page that couldn't all be loaded at the same time without unbearable load times. There are essentially two solutions. You named one which is loading all the content on the page — but not at the same time (i.e. lazy loading). The other solution to solving the problem of heavy pages is to paginate the content across multiple pages. This Smashing Magazine article does a pretty good job going through the pros and cons of paginating content vs. lazy loading it on an infinite scroll page. It also links to some studies about how users react to both solutions. I would try to outline the article in my answer, but it's very extensive, and I'm afraid all miss some important nuances if I try to condense the article. It's probably better if you just go read it for yourself. I finally made the choice of paginating content. It just seemed a little better of a solution to me. But there are plenty of cases where either has worked out great. Facebook lazy loads posts on an infinite scroll page. Google paginates search results. You should look at the solutions in the context of your application.

You asked if implementing a lazy loading would have a positive or negative effect. I think that if you have a lot of slow loading content, you need to deal with that somehow. Nothing makes for a worse UX than a slow website. Whether you pick to lazy load content on a big page or split the big page into smaller pages with pagination doesn't matter as much as long as you deal with the problem of a slow, heavy website.

UPDATE:

A website that I recently found that seems similar to the one you described is unsplash. Unsplash has a huge page with a lot of high resolution pictures. To deal with this, they opted to lazy load content on an infinite scroll page. I think it's a pretty good case study because their dilemma seems similar to yours and their solution is great.

  • One thing I hate about lazy loading in the way it is often used in back and forth navigation. Say you have 5 items that you show, items 1-5. The user scrolls down and you show items 6-10. The user click on an item. The user clicks back in the browser. Only items 1-5 are shown. I get angry – user1261104 Jul 22 '14 at 15:18
  • Yeah, that's defiantly a stike against lazy loading on infinite pages. If you expect people to frequently click on things an go back and forth, maybe opt for pagination. Or maybe find some workaround. You might be able to use JavaScripts beforeUnload event to place a cookie that contains the users position on the page when they click away. – Tim Jul 22 '14 at 15:26
0

Personally I would use a sort of predictive lazy loading. Let's say you have in total 20 rows of images and 4 rows can be shown simultaneous on screen.

Then I would load the first 6 rows directly on page load so the user can see images instantaneous. Then if he scrolls down, I try to load more images, and I always try to load at least 2 rows more then the user can see. That way, if a user would scroll regularly, it feel like everything is loaded at once, and only if he scrolls fast he will see an image that isn't fully loaded.

Obvious there is a fine line to how much you load at first and how much rows you keep in buffer. If the images could load quick and people scroll faster, you could also load 8 rows and keep an entire page in buffer. Or whatever setting you choose.

I would also advise to save the images as progressive jpegs, so people can see content quickly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.