Lazy Loading - Speeding Up the Web
2nd December 2019
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
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
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.