A lazy-load util function you will get addicted to
By: Jean-Noël Evo
Tags: JavaScript, Web Performance, Programming, Lazy Loading, Web Development

A lazy-load util function you will get addicted to

A modern function that gathers the latest JS features and makes everybody happy

Photo by Christian Gertenbach on Unsplash

The ecosystem implied by the web performance is large

This is not a secret. Web performance is one of the most important goals of every web site whatever their kind : e-commerce, institutional, information… In fact, this is a shared goal by several profiles to satisfy the user :

Product owner : A web page must be loaded as quick as possible so that the users can start to interact with and turn into customers.

: A web page must be loaded as quick as possible so that the users can start to interact with and turn into customers. SEO manager : A lightweight page helps to get better visibility in Search Engines such as Google, Bing…

: A lightweight page helps to get better visibility in Search Engines such as Google, Bing… User : A web page takes too much time to load ? Well, the user doesn’t wait and visits the other competitors of the market.

: A web page takes too much time to load ? Well, the user doesn’t wait and visits the other competitors of the market. Support service : They really don’t want to receive users emails reporting the web site / app is unusable due to its heaviness.

: They really don’t want to receive users emails reporting the web site / app is unusable due to its heaviness. CTO : This is him which will be responsible in the sight of the CEO if the web page are too slow and they loose money.

: This is him which will be responsible in the sight of the CEO if the web page are too slow and they loose money. CEO : I don’t think he’s happy when competitor CEOs make fun of him telling how slow are his web site.

: I don’t think he’s happy when competitor CEOs make fun of him telling how slow are his web site. Web performance actors : They offer tools to measure the perfomance of the web page / app.

: They offer tools to measure the perfomance of the web page / app. and the Front-End developer : He is the cornerstone between the previous profiles. He must make its best to make everybody happy.

Web performance is so important in company strategy that they often make it a KPI (Key Performance Indicator) starting from the top of the hierarchy until the bottom (you, the front-end developer).

Let’s make everybody happy including you

Lazy-load : a weapon to reduce the load time

One of the best weapon to reduce the weight of web page is to only load what the user needs in the waterline of its screen. The other resources must be lazy-loaded on the fly when the user starts to interact in the web page by scrolling, clicking, writing something…

Scroll lazy-loading is a little bit complex since you need to know when the target element is visible on the screen to load the related resources.

Dynamic import with async/await

It’s easy to lazy-load resources from click, keyup, doubleclick… since the trigger function is the click event function itself. We just have to use 2 features :

Thanks to Webpack and its code splitting feature, we can easily import a resource from a click. Event better, set a name to the output file by adding the comment webpackChunkName in the import function.

Lazy-load a resource from a click

I have a dream : element.addEventListener(‘visible’)

Load a resource when it becomes visible on the user screen has no magic event, it would be marvelous don’t you think ?

The Intersection Observer API

It is possible to know when an HTML Element is visible by adding a scroll event on it. But we have to make calculate the position on every scroll event and it is costly for the browser.

We have an other tool to do such and I’m pretty sure you already know it : this is the Intersection Observer API

The Intersection Observer API will help to provide us a trigger event when the target element is visible on the screen of the user.

If you website, app, should work on old browsers, think to add the related polyfill :

Have you already considered lazy-loading polyfill to avoid to load it in the browsers that already supports the feature ?

So now we have all the ingredients to build a lazy-load util function

The lazy-load util function

The function is quite simple. Its goal is to provide us a event to know when to import on the fly the resources.

onElementVisible util function

When you add this function you util file, lazy-load resources becomes a child’s play ! I assure you will get addicted to !

Let’s see a few examples of how to use it.

Lazy-load images

Lazy-load images example

Lazy-load library

Let’s imagine the product owner wants to add cross-sell slider section in the product pages . As a front-end developer, you choose or already use the library Swiper. Well this library is rather heavy and you want to lazy-load it.

Lazy-load library Swiper

Lazy-load JS Framework

Yes, you can also load a JS Framework on the fly if you use in a part of your page. Let’s imagine you add a newsletter sign-in feature built with a JS Framework (VueJS, React…) :

With VueJS

Vue lazy-load

With React

React lazy-load

Tips to go deeper

To use more efficiently the lazy-load function, here are some tips or piece of advice I give you.

Display a fallback content to indicate your users a content is about to be displayed

to indicate your users a content is about to be displayed Set the expected dimension to the target DOM element to avoid clipping

to the target DOM element to avoid clipping Check the output files in your favorite browser in network section to see how many bytes you saved from the initial web page loading

in your favorite browser in network section to see how many bytes you saved from the initial web page loading Use the coverage browser tool to identify heavy resources that can be lazy-loaded

Conclusion

Web performance should be always considered in the new features the product owner is conceiving in interaction with the front-end developer and the UX/UI team. The idea is to offer the smoother UI as possible and to hide the features complexity to the users. That’s why I think util function like that will help you reach this goal.