LazyHTML: a Break Through in Lazy Loading Elements, Ads & Widgets.

0 242

LazyHTML Javascript library was written as an effort to speed up Website rendering. It is an open-source library available on Github. LazyHTML was made cross-browser compatible & It even works with Internet Explorer, It supports all the modern browsers from Google Chrome, Mozilla Firefox to Apple Safari. LazyHTML requires Intersection Observer to observe and load elements, ads & widgets on visible. In the absence of intersection observer elements will be eager loaded.

What is Lazy Loading?

Lazy loading is the process of delaying load or initialization of resources until they are actually needed to improve performance and save system resources. For example, if a web page has an ad in the bottom of the page that the user has to scroll down to see, you can lazy load the ad only when the user arrives to its location.

Lazy Loading Adsense Ads
Here is an Example of Lazy Loading Ads

Why Lazy Load Ads, Widgets & HTML Elements?

CoreWebVitals became a part of Google’s ranking factor. It means when your website is not fast enough, You are going to lose a lot of visitors. Ads, Widgets & Images on the other hand are the main factors slowing down a website. Ads load several chained requests from multiple sources to render and show a single creative ad.

To speed up the websites, Google Chrome introduced native Lazy loading for images by simply adding the loading=”lazy” attribute to existing <img /> tags. You can lazy load images without loading any third-party javascript library.

But for lazy loading Ads, Widgets or Videos. There were no innovative methods available even Major ad networks failed to provide a solution to Lazy load ads. Some methods were too complicated to set up. Few methods used defer loading of Javascript or Loading javascript when a user starts scrolling down, These methods were widely used in lazy loading Adsense Ads but I was always against these methods as they introduce further delay in rendering Ads and when the main javascript loads it loads all the ads from top to bottom of the page. Lazy Loading is loading the element when it is visible or about to be visible.

Leave A Reply