Here's how to improve your page load times with lazy loading images

When it comes to designing an engaging customer experience on a website, one fact is well known: that people will engage far more with images and videos than text.

Imagery has the power to convey feelings, emotions, excitement at the same time as communicating what a product actually is. This all happens within a split second of someone looking at it. Using galleries and videos provide more engagement by giving the visitor something to interact with and explore while providing them with more detail of something they're interested in.

Another important factor in engagement is speed. A study by the BBC found that for every additional second a page takes to load, 10% of users leave. Since 2017, roughly 50% of web traffic has also been through a mobile device and while mobile networks have gotten faster and faster the experience is certainly far from universal. Go on a train or to a crowded station and your connection can drop to somewhere between slow and non-existent. The questionable trustworthiness of the Wi-Fi doesn't help that much either.

This leaves us with a fundamental problem that the more imagery and other content we add to a page, the larger the file size of that page gets and the more seconds it takes to download. So while we're trying to make a more engaging web site we're actually making the experience worse.

So what's the answer?

Rather than load all the images up front, we can lazy load them in when they're actually going to be seen. The concept of lazy loading is actually quite simple, we load the images that are visible and defer everything else until it is needed. Therefore any images at the very bottom of the page or on another tab which the visitor may never see are removed from the initial page load and the result is a much smaller file size.

By using lazy loading images, we also give the end use other benefits such as using less data from their mobile plan, less processing time and therefore less battery usage all on something they may never even see.

Lazy loading content though is nothing new. AJAX techniques to gradually add content to a page have been around for over a decade now and you will have seen them all over the place with the most common being endless scrolling. What has changed though is a browser's ability to do most of the work for us rather than having to implement custom complex solutions.

Introducing Intersection Observer

In the past to lazy load some images you would need to write custom logic against event handlers like scroll/resize or an event on a tab being shown which would then work out if an image tag was in or about to come into view to then set it's src attribute which would trigger the image to load. It's a fiddly process that would eat up developer hours and if you look at the web today, it's only the biggest sites that have put the effort in to get it done.

However with Intersection Observer all of this pain goes away. Intersection Observer is quite simply a built in function that you can use to run some logic when an element comes into view. So the complete logic for lazy loading images now becomes:

• Add a class or another identifier to the image tag for the images you want to lazy load. This provides our JavaScript something to select them all within one go.

• Update the src attribute to either be blank or reference a common placeholder image.

• Add a data-src attribute containing the URL of the image to be loaded when it becomes visible.

• Add some JavaScript to the page which retrieves all the image tags to be lazy loaded and create an IntersectionObserver which sets the src attribute to be equal to the data-src attribute when the image in intersection.

In most cases this is a relatively low development effort task which will have a significant effect on a web pages initial download size and therefore speed over slower connections.

Like all things web related the limitation is that while browser support is good, there is always an older browser which doesn't support it. So make sure you also use a polyfill to add the functionality in.

Visit this page for more details on Lazy Loading images with code examples.