Lazy loading: Speed up your website by making it lazy

The importance of site speed is more relevant today than it ever was. How can lazy loading help improve performance? 


 

First of all, what sort of problems could your site have?

When users first visit your webpage, the default behaviour of the browser is to automatically download all of the content on the entire page. So for example, if you have a really long page with a lot of images, every single image is downloaded by the browser regardless of whether it is visible or not, as illustrated below. 

default loading of images pre-loads all

 

Issue 1 - this can impact the speed in which your page first loads, which user testing has proved to be highly important for a good experience. Users are far more likely to navigate away from a site if they are forced to wait for content to load. If the site or application has a lot of images, then the browser will take longer to display everything.

Issue 2 - by forcing users to automatically download everything on your page, you are possibly eating away at their data plan, particularly if they are viewing your content on a mobile device. Users may have a small data allowance or might be viewing your site on a poor network. If they are forced to download a lot of image files that they might not even scroll to and view, then they probably won't thank you for it. 

So how can we solve this?

To combat this, lazy loading can be added to your site. So what exactly is lazy loading? When the page first loads, it is important to only load the images that are actually ‘required’ and need to be displayed. When the user then scrolls down the page, the images can be loaded as and when they are required.

lazy loading loads only what you need

As you can see from the illustration above, by adding lazy loading, users will only initially download images that are immediately required and visible on the screen. So it's a win for making your site load faster as well as giving your users a better experience.

Can I add this today?

Yes you can. The techniques used to achieve lazy loading are fully supported in the majority of major browsers including Chrome, Firefox and Microsoft Edge. There is no support in earlier versions of Internet Explorer, and at the time of writing they are in development in Safari for future support.

As a temporary fallback when not supported, you can still by default load all of the images on the page, which is where your site or application currently sits right now by default. However for users using browsers that offer support for lazy loading, you can greatly improve their experience and when Safari eventually adds support, your site will automatically lazy load the images there too.

 


If you would like more information on this subject, you can either contact us, or also revisit our blog soon to view our follow up article on the technical aspects of how to implement lazy loading.