When surfing the web, it's quite easy to tell a great website from a not-so-great website, even if you're not a web developer, as a netizen you've probably been on enough good platforms to get an instinctual sense of good and bad. A lot of times it's the little things that differentiate the good from the great.

A RELATABLE EXPLANATION

Have you ever been on some platforms that take forever to load while making you double-check your internet speed? The surprising thing about these platforms is that once they load, you can scroll all the way to the bottom without missing a bit or having to wait for the remaining pages to load. Then there are other platforms that load only as much as you need per time; the more you scroll, the more it loads. For most people (and web crawlers), the former platform being described is a bad website while the latter is much better.

THE OLD STATUS QUO

The difference between the two platforms brings me to the subject of eager loading and lazy loading. In the past, Javascript functionalities were left at the bottom of a webpage, Javascript is the scripting language that gives websites a ton of dynamism. All of that dynamism comes at a cost though; the code is more complex than the HTML and CSS that gives you the primary visuals on the web platform. In order to ensure that the HTML and CSS load faster than the Javascript, all the Javascript would be called after the HTML and CSS code had loaded.

THE GROWTH OF THE WEB DEMANDS LAZY LOADING

What this means Is that as long as the site doesn't have many heavy pictures or multimedia assets, it would load fairly quickly. The times have however changed, devices are more powerful, UI/UX designers have also gotten more creative and something has to give. Javascript code had to called in a lot earlier than before so as to enable some brilliant visuals and functionality to work (even before the platform was fully loaded) because netizens literally that clicking things the moment a part of a website loads 😂.

In order to support the above scenario, lazy loading came about, some broke the Javascript code into bundles and would call some part of the Javascript code (needed at the top) first and the others would load after the website is fully served. The better way is to enable lazy loading which loads Javascript code on a needs only basis. The process of implementing lazy loading can take a bit of getting used to (depending on the framework used in web development) which is why it's avoided, however, the dividends of lazy loading is immense.

FINALLY

The key takeaway is that the default behaviour of code written for the web is eager loading, on a really huge platform, that can hurt SEO and users, lazy loading helps ensure resources are only loaded when they're needed (and not even a second before then!).