I feel like lazy loading has been quite heavily used in recent times mainly because it is a feature recommended by Google/Lighthouse to lighten a website’s page weight and render time. However it is also a feature which I feel is often added to a website without much thought on the overall user experience.
If you read the above linked article, or if you’ve attempted to implement lazy loading yourself, you’ll know lazy loading is not an easy thing to accomplish. If you’re really detail focused and are lazy loading both images and videos, it is actually a lot of additional work.
Firstly, I will say lazy loading has its benefits and use-cases. I hear Chrome are working on implementing a native browser feature which is great. Quoting directly from Google:
When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.
If your site is very image heavy and requires a lot of scrolling, a la Tumblr or Pinterest or some sort of infinite scrolling blog, then lazy loading makes perfect sense. After all, the premise of these sites is that it is a neverending feed of new content, so lazy loading gives the advantage of loading new content only when necessary. Lazy loading is what you want on these sites, as a user.
Most sites are not built on the premise of Tumblr or Pinterest however. In my every day perusal of the web, I’ve noticed many sites large and small, Medium blogs, and Gatsby sites, load in media the blur-in way. This involves loading in a blurry, low-res image first, and then loading the hi-res image ‘on-demand’ as the user scrolls down the page.
According to Lighthouse it’s good practice to lazy load images…but is it good user experience for the user or do we lazy load simply because Google has told us to do so? Because oftentimes, I don’t think lazy loading is warranted.
Unless you’re loading in a page full of multiple large images, I find lazy loading annoying on most sites and it is almost always a negative user-experience for me.
Lazy loading does not benefit users with slow internet connections.
Lazy loading is meant to save a user’s bandwidth and processing power, which is great. The caveat is, lazy loading also does not benefit the user experience for users with slow internet connections. In a developed country like Australia, I am used to average speeds of less than 5Mbps daily, and I’m not an outlier in that sense. To be frank, speeds above 5Mbps is quite the luxury here at the moment.
In my opinion, lazy loading large media is only beneficial to those with fast internet connections.
My web browsing experience is often something like this:
- Load an article
- Scroll down to read more
- Wait for a hero image to load in, staring at a blurry rectangle for more than 5 seconds and feeling obligated/annoyed/anxious to wait because you’re now committed to reading this article
This has happened to me multiple times and it is annoying, mainly because why would anyone want to watch an image loading in front of them as they are reading? For skim-readers like me, lazy loading can be an annoying interruption instead of providing a smooth page experience.
Images aren’t render blocking.
That means images will continue to load after the initial render.
Sure, not everyone will read literally everything on a website. I sure don’t. Some people may not even scroll down. But I honestly think the bandwidth use for loading in unviewed images is a fair trade off for better overall useability for everyone, regardless of internet speed.
For portfolios in particular, I feel like lazy loading is redundant.
I think we can assume intention if a user is viewing a portfolio. When you load a project page, it makes sense to me to load in all images rather than lazy load them in, even if it amounts to more than a few MBs of resources.
Disclaimer; this is my personal preference, but if I want to see a project, of course I want to see it all; I want to skim the page, I want to get the run down without the smoke and mirrors. Start the images downloading as soon as I hit that url, don’t wait for me to scroll down.
I understand (and hope other users do too) that a portfolio is media heavy. Just give it to me straight and let the user judge if it is worth the bandwidth or not.
Lazy loading is more than just throwing in a plugin to satisfy Google. It is about the overall site design and implementation.
Additionally, you also have to think about things like SEO and maybe even account for additional requests if you’re loading in thumbnails too.
I dislike the fact that lazy loading is part of Lighthouse’ recommendations, because I encounter annoying and unnecessary lazy loads more often than I experience a good use case for it.
There are so many parameters to take into consideration when implementing lazy loading.
For long form articles, perhaps the offset that triggers lazy load should be made much higher so it doesn’t interrupt reading flow? But in the same vein, if you’re using a high offset, why even bother using lazy load at all?
Here is an article I enjoyed recently that uses a page loader instead of lazy loading.
What I’m trying to say is, there is no right or wrong answer to how you render a page. But in my opinion, lazy loading should be thought of at the start of a design, not the end of one, like a sidenote tacked on for a better lighthouse score. Lazy loading isn’t a cure-all, even if everyone else is doing it, even if it is the default recommendation by Google.
One page websites are interesting in the sense that lazy loading is probably a good idea for many of them…OR IS IT? I’ve worked on a few one-page sites with heavy media designed by other people, and I do think some designers go overboard with trying to fit everything on one page. At the same time, lazy loading may not add much value to the overall experience or website at all. That’s not to say I am against one page websites, but the use-case for lazy loading media really just depends on the content, aesthetic, and message.
If I’m designing a website, I try to be pragmatic. Sometimes, pagination is important. I would much rather load in a reasonable amount of media rather than try to fit everything in on the one page.
There are also other strategies you can use to reduce the size of the media on a page as well, including using
srcset, or serving optimised mp4 videos instead of gifs. There is also the issue of caching which you can look into.
What do you think? Do you use lazy load and/or do you appreciate it as a feature on a website?