Lazy Loading: Performance

What is Lazy Loading??

If you’re working in Web Development Industry, surly you would have heard about the term called Lazy Loading & Eager Loading.

Did you ever wonder what it is ??

As the name confirms, if something(image/video/page/component) loads based on user requirement is known as Lazy Loading.
And, when something loads as soon as it comes on the viewport is called Eager Loading.

Now, the first question arises, why Do we need Lazy load??

When you’re developing any web application you will have multiple routes, images and components which is not going to consume it immediately during application load.

Let’s see this with an Example:

Let us assume you are developing a News Website, your app will have some pages like Home, Story, Author Information and every page will have it’s multiple components with images, videos and texts.

When a user opens your application it will open the Home page of your application and further opens other page based on his interests, so if you are not using lazy loading or any other way to split your code into a different module, it will download whole JavaScript, CSS, Images and all the other Contents for which user have to wait to see while your application is still loading.

It will slow down your Application Performance, because it will load every thing in the first go and the user will be waiting for the content which he is not sure if he is interested or not.

Again, Let’s assume you have a button called Open Pop-up on your Home Page and when you click on that Button it opens a popup for you. But, when first home loads for the user, he is not going to see the Modal Component. If we are not using lazy load it will load Modal JavaScript code along with keeping everything in the browser itself. Alongside, it will show the UI to the user when he clicks on the button, if lazy loading JS of model component is not used.

For avoiding these type of problems, we have lazy loading or code splitting concepts, which helps us to load the content based on user requirements.

How Do we Do Lazy Load?

There are multiple ways to Lazy Load web modules, we will go one by one to each of them.

Images:

We can lazy load HTML images, one of the simple way to lazy load image in browser level is using loading attribute.

If the image appears in first fold it will immediately load without scrolling. And, if it is far below the viewport it will only load when user scrolls near the image, which means it will be loaded by the time image become visible

Also, there are other ways in JavaScript to lazy load images.
Example: intersection observer

Videos:

Video elements also have the attribute to lazy load a video.

Preload attribute with none value prevents pre-loading of the video and the poster attribute shows in placeholder of the video data when you perform an action on video and it starts playing.

Components:

We can also lazy load the React components too, as we have the concept of dynamic imports which helps us to load the component dynamically (on-demand). Every React App has the tool for bundling like WebPack & Rollup, which have the rules of splitting the code or creating the different bundles based on the same rules.

Dynamic imports
Let’s assume we have a React component called Modal and inside some other component on a click of button we want to show that Model. If we’re not using dynamic import, Syntax will be something like this:

import {Modal} from "./Model"

and with Dynamic imports, like this:

When the WebPack see this syntax it will create Model as a separate chunk and the component will load only if button is clicked. Few NPM libraries also provide the feature of loading components easily.

React 16.6 and higher versions have the feature of lazy load a component.
We just need to import lazy like import React, { lazy} from 'react' and import the component like

const Modal = lazy(() => import('./Modal'));

React lazy returns a promise and when it resolves, it renders the component. If component before promise resolves, React provides the wrapper for fallback which is called Suspense.

Suspense accepts a fallback prop where we can pass any JSX or custom component for showing the fallback, while the promise resolves.

Limitation of React Lazy:

Right now we can not lazy load server side components using React lazy.
Components should be default export for using this Lazy load syntax.

For name export components have different Syntax for React lazy load

DateRangePicker is the name export component in react-date-range in NPM module.
Here, we are just chaining the Promise returned by import() and adding that default export.

We should use React Suspense while rendering name export component.

We can also lazy-load heavy packages or the packages which are not used more in our application similar to react component lazy load. This will reduce the size of your bundle size drastically.

This is one of the way to optimise your application.

If you have any questions, you can leave out in the comments below, I’ll be happy to help you out.