Ecommerce.co.za

What is lazy-loading?

by Angelo Zanetti: Co-founder and Managing Director at Elemental Web Solutions.
Lazy-loading is a development optimisation technique that hides the proceeding media until you have scrolled to that part of the site, therefore delaying the loading of media and resources. Anything that is not seen on the initial screen, will only be loaded and rendered when a user scrolls down further.

Therefore as you are 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 scrolling.

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

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

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

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 pros and cons of lazy-loading?

Pros:
  • Speed of the initial page load will be faster as it’s only loading the media and resources that are needed (above the fold).
  • It provides for a better User Experience (UX): having a super fast page that will load more content as the user scrolls, will provide users with what they want quickly, making the user experience way more enjoyable.
  • 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.
  • With media being lazy-loaded, your web browser won’t need to decode resources until they are requested by scrolling the page.
  • Images and videos generally use the most data when loaded. Using the lazy-loading technique and only loading what’s needed during scrolling, 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 costs.
Cons:
  • 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.
Pagination vs lazy-loading

Pagination is the application of separating large data sets into several pages. This allows users to navigate between several pages. 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.

This is becoming quite 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 for the new page content to load.

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 are looking for as quickly as possible.

We find that lazy-loading or infinite scroll provides users with fewer steps to find what they need, making it the preferred approach. 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 various 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 you are wanting to lazy-load.

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

Typically the easiest way to do this is to use the 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.

Conclusion

If implemented properly, lazy-loading of images and video can seriously lower the initial load time and page speed on your website.

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.

Share on Twitter Share on LinkedIn Share on Facebook
Share via Email
©2022 SURREAL. All rights reserved.
Follow us on Twitter Follow us on LinkedIn Join us on Facebook