Improving image management with lazy loading

Having previously written about the benefits of using the WebP image format, I wanted to follow it up with some additional thoughts on improving page load times further with a technique called lazy loading.

In the original gallery example I had 10 images with a combined size over 8MB and a rather appalling 40+ seconds page load on 3G. With WebP and some considered use of the img srcset attribute we brought that down to a more respectable 0.62MB on Mobile with a page speed of 2.78 seconds. Whilst that’s a good improvement it would be great to bring that page load speed down even further by making use of a technique called lazy loading.

What is lazy loading?

The key principle of lazy loading images is that those images in or near the viewport are prioritized and loaded first in order to maintain a good user experience. Once the page load has completed, images further down the page and out of the initial view are loaded either when they come near or into the viewport, or after initial page load completion depending on the implementation. This allows the initial page load to happen quicker, and as it’s prioritising images within the viewport it’s providing an improved visual experience for the user. Consider a web page with lots of large images spread across it, then imagine images out of view are loading in before the main image you see when landing on the website. That one key hero image may be slowly loading in making for a rather ugly looking experience to the user.

I have included a basic illustration below to visualise the lazy load process. The image on the left is a typical web page with the content above and below the fold all loading at once. The image on the right shows a page utilising the lazy loading, with the page loading the content in the viewport first, and the content below the fold being held back.

How does lazy loading affect our previous example gallery?

Using the same format as before with my other tests regarding WebP and img srcset I have created a new example gallery with lazy loading implemented.

This particular example uses lazysizes, a small JavaScript based lazy loader. My reason for choosing lazysizes is it’s relatively small overhead, it’s simple inclusion process and it’s consideration for maintaining SEO standards. It achieves the latter by detecting the user agent string and writing the image source back into the page if it’s Google bot. As an additional benefit lazysizes is loading all remaining images once the page has loaded the content in the viewport, and not waiting for the user to scroll down to other images. This keeps the user experience smooth as images aren’t being called on demand later, which could result in users watching images visibly load in if they are large and badly optimised.

It is worth noting that there are several ways to implement lazy loading, and plenty of good examples to be found online demonstrating the setup – as before I just want to focus on the end results rather than creating a full instruction set. For lazy load setup examples see Googles own suggestions, and there’s another good guide on CSS Tricks.

Desktop results for lazy load image gallery: Adding lazy loading to the mix

Mobile results for lazy load image gallery: Adding lazy loading to the mix

So as we can see from the results our initial load time has improved relative to it’s original measurement and is down to 0.2 seconds on mobile. Meaning our users spend less time waiting and gives the impression of a faster website overall. We can also see that whilst the initial load time has reduced the completed page load time has increased because the lazy loaded images aren’t being pulled until required, however this not detracting from our user experience.

I think it’s important to mention that this is a deliberate example to highlight how implementing lazy loading works on an image heavy web page. In real world cases results will likely be more varied as your typical web pages will have a greater variety of dependencies and content, as such achieving low load times could be more difficult to achieve.

This technique is probably best reserved for websites that utilise a lot of images, such examples might include portfolios and photography style websites. However if you think it may benefit you then it’s worth testing and seeing what the effects are, it may surprise you and has the potential to improve your websites page load speeds and user experience.