What is lazy-loading?

Ever heard of the term “lazy-loading”? No, we’re not referring to when you’re packing for a trip, desperately trying to ram all your goodies into a small suitcase!

Lazy-loading is a development optimisation technique that delays the loading of media and resources when a web page is loaded. The idea is that anything that is below the fold (not seen on the initial loaded screen) will only be loaded and rendered when a user scrolls down and these items are then visible to the user. 

You’ve definitely seen lazy-loading in action but you probably aren’t even aware that it’s happening.  

The process goes something along the lines of you landing on a page all the media (images, videos and iframes) are loaded straight away (as this content is above the fold). You then start to scroll as you’re reading through the content, media that was previously below the fold is now visible to you and gets loaded as you’re able to see it. 

These media items may have had placeholder images when initially loaded which are then replaced with the actual image. 

The concept and benefit of lazy-loading is that it allows the initial page load to be much faster as it’s only loading what is necessary and therefore making the page much more lightweight and faster to render. 

Therefore, when lazy-loading is implemented well, it can result in an incredibly seamless and smooth experience. For example in an online shop, the user can just scroll through the list of products without any interruption. No interaction is needed — products simply appear as the user scrolls down the page, fantastic right? 

You would have experienced lazy-loading with most social media platforms such as Facebook, Instagram and Twitter, where you can scroll down infinitely and new media shows pretty much instantly but the initial page load is also really quick, due to the lazy-loading techniques. 

WHAT ARE THE ADVANTAGES OF LAZY-LOADING?

SPEED

Speed of the initial page load will be faster as it’s only loading the media and resources that are needed (above the fold). 

USER EXPERIENCE (UX)

It provides for a better User eXperience (UX): having a lightning fast page that will load more content as the user scrolls, will provide users with what they want quickly, making the user journey much more enjoyable.

SEO

From an SEO ranking point of view, Google wants to see fast page load speeds, lazy-loading enables this and therefore contributes to improved Google rankings.

LESS STRAIN ON THE WEB BROWSER

With media being lazy-loaded, your web browser won’t need to parse or decode resources until they are requested by scrolling the page.

BANDWIDTH SAVING FOR YOUR USERS

Images and videos generally use the most data when loaded. Using the lazy-loading technique and only loading what’s needed when the user scrolls, means that we aren’t loading unnecessary images and videos, which consumes huge amounts of bandwidth. 

Users on mobile devices will especially benefit from lazy-loading as you’re reducing their bandwidth bill.

WHAT ARE THE DOWNSIDES TO LAZY-LOADING?

In order to implement the lazy-loading optimisation, additional code is needed however this shouldn’t be a problem for experienced and skilled developers.

If the lazy-loading isn’t coded in an optimised way that allows the web browser to index the hidden content this can result in SEO content not being picked up by the search engine and therefore can have a mild impact on SEO rankings. 

PAGINATION VS LAZY-LOADING

Pagination is the application of separating large data sets into several pages (or blocks). This allows users to navigate between several pages. You may not be familiar with the term pagination but you’ve definitely seen it in action. 

For example, when you do a Google Search or are browsing an eCommerce website, you will notice that the data is segmented into pages, with each page having a predefined set of results on each page. Users can navigate between these pages by clicking on hyperlinks, which are often in the form of numbers located at the bottom of a page. 

In our opinion, this is quite an old school and outdated as the user needs to click to go to the next page and then wait for the page to load and start browsing these results again. This can cause frustration to the user as they need to wait (even if it’s a few seconds) for the new page content to load. If they want to go to a previous page of results they need to navigate to that page. 

Lazy-loading is common in many platforms and there is a reason for this. Its ease of use and speed make it highly user-friendly and effective to allow users to simply scroll and find what you’re looking for. We know that a user’s time span online is limited and we need to optimise their journey, allowing them to find what they want as quickly as possible. 

We find that lazy-loading / infinite scroll provides users with fewer steps to find what they want, making it the preferred approach. In case you didn't know, infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. 

IMPLEMENTING LAZY-LOADING

There are a bunch of different ways to develop the lazy-loading feature into your website or web application. Firstly you need to determine what it is exactly that you are trying to lazy-load. In other words, you need to identify which pages and what does the structure of the content looks like that you want to lazy-load.

Secondly you need to consider the web browsers that you are going to be supporting, most modern web browsers support lazy-loading. 

Typically the easiest way to do this is to use the  <img loading=”lazy” /> attribute on images. However, there are various ways to implement this using pre-defined Javascript libraries or you can also write your own custom Javascript code but be careful to not overcomplicate things and bloat your site with unnecessary code. 

SO WHAT’S THE CONCLUSION?

Implemented properly, lazy-loading of images and video can seriously lower the initial load time and page speed on your website. Users won't be downloading unnecessary media resources that are below the fold (that they won’t see), saving them from having unnecessary network activity and processing costs of media resources but they will be able to view those resources should they scroll down.

Your users are all too familiar with lazy-loading and infinite scrolling as it’s widely adopted on all major websites and social media platforms, so it makes sense that you incorporate this feature to your website, trust us your users will love you and will stay on your site for longer and find what they’re looking for quicker.