Lazy Loading - Speeding Up the Web | SilverDisc Digital Marketing Agency

At SilverDisc, a key focus for all our web builds is speed. To serve a feature-rich site at high speed requires a lot of work behind the scenes. This blog post explains one technique we use called “lazy loading”, and how it can greatly improve the performance of a site.

A typical webpage will be made up of several assets (images, fonts, stylesheets, scripts etc), which your browser will download and piece together to form what you see on screen. By default, browsers will load all of the individual assets at the start before the page is rendered.

Although this ensures that you see a fully loaded complete page, this can really slow down the rendering of the page and leave the user waiting and feeling frustrated. This is especially important considering 40% of consumers will abandon the site if it takes longer than 3 seconds to load.

What is Lazy Loading?

Lazy loading is a technique of delaying the loading of certain resources until after the initial page has been rendered. With fewer render-blocking resources, the first paint of the screen is delivered faster, resulting in a faster experience for the user.

As the user scrolls down the page resources are loaded in dynamically only when they are needed. Effectively we are splitting the loading of the page, and only ever loading the assets that are needed.

Whilst images aren’t the only resource that benefits from lazy loading, they are the simplest to demonstrate. Take a look at the screenshot below of the SilverDisc blog listing page.

With lazy loading functionality, the images highlighted in the red boxes are loaded immediately. The 6 images that are not visible will be dynamically loaded once they are in the user’s viewport. This cuts down on the initial load time significantly.

You can see this technique in action across our site, or for a simple demo head here: https://codepen.io/dinbror/pen/HzCAJ

How To Lazy Load?

There are many different ways to implement lazy loading. We won’t go into all of them now, but here is a very simple example for an image tag:

Standard Image Tag

This is a standard image tag. It contains a src attribute which tells the browser where to request the image file from. It will attempt to load the image straight away.

Lazy Load Image Tag

For the lazy loading image, we have swapped the src attribute for data-src. Using the data-src attribute prevents the browser from automatically loading the image. Instead, it waits for instruction from some JavaScript code before loading the image.

A Direct Comparison - Let's Check the Numbers

I was interested to see exactly how much of an impact lazy loading could have on the speed of a web page. I set up a simple test page, with 7 pictures of dogs on. (We’d normally look at optimising the file sizes of images, but for this test, it’s not important.)

Before Lazy Loading Implementation

You can see how without lazy loading, the page is not considered to be loaded until after all of the images have finished loading (the thin red bar to the very right is the indication of a finished load). The load time here was 154ms.

After Lazy Loading Implementation

With lazy loading implemented, you may notice an extra file is being requested on row 2. This is a very small JavaScript file which contains the code for lazy loading. This test gives us a much smaller load time of 38ms. That is under a quarter of the time taken without lazy loading.

That was an introduction to lazy loading on the web. It can be a very useful technique which if used correctly can vastly improve the performance of your site.

If you feel like your site is letting you down, or have any questions about the above, get in touch with a member of the team to find out how we can help.