Lazy loading an image-focused website

Question

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

Answer 1

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.

Answer 2

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.