So you have heard of lazy loading. Let me quote from wikipedia. "Lazy loading is a device pattern commonly used in computer programming and mostly in web design and development to defer initialization of an object until the point at which it is needed." It is simple, it means, not calling an object until it is needed. Implementing this method in web development is essential as it helps your web pages to load faster.
When ever a web page is loaded, it is loaded from top to bottom. When it encounters a script or stylesheet, it pauses and loads them before continuing to load the page.
Meaning if your script is very large, it will take time before the whole web page is loaded.
Whiles the script file is downloading, your user will be staring at a blank screen and this will make your user leave the page.
According to Piotr, a one-second delay in loading a page is enough to make 11% of it's total visitors leave it in no time.
This means that you don't have to delay your visitors at all. Even if you will delay them, present them with something as the page is loading in the background to keep them happy 😃.
Importance of lazy loading
There are many reasons why you should lazy load your scripts, I am going to outline a few.
- It makes your web pages load faster
- Saves bandwith as the files are only loaded when needed
- Reduces the number of HTTP requests during page load
- Reduces the chance of a visitor leaving your website
Let's say for example, we have three (3) stylesheets namely, "design.css, style.css, styling.css". When lazy loading it with our function.
We will write
lazy_load_css(['style.css', 'styling.css','design.css']) and when lazy loading only one of them, we will write
Open your IDE and create a new file. Give it any name but make sure it's extension is '.js'. I am going to call my file's name 'script.js'
NB: Our function will append the stylesheets in the head of the html not the body.
Now, let me explain the code in the function. We first named a function
lazy_load_css which takes a parameter
Then to the next line, we declared a variable
type_of_path which stores the type of the path. Do note that, the path
can be in two types, if you pass a single path to the function,
the type of the path will be
"string" but if you pass
an array of paths to the function, the type of path will be
object. Remember I said we are going to make our function
If you want to lazy load a single stylesheet, you pass only the path of the stylesheet to the function and if you want to lazy load many stylesheets, you pass an array containing the paths of the stylesheets to the function.
Then to the next line, we performed a switch statement on the
Let's look at the first case,
case "object". The code below will only be executed if the path is an array or an object.
Meaning your array contains many paths.
We then define a variable head which is the head element of the html document.
We perform a
for loop on the
path object iterating through it's values one by one.
- We create a
<link>element an assign it to a variable called link
- We then make it's
- We then set it's
hrefto the path
- We then assign it's
- Then we append the element to the
We repeat this process till we have finished looping through all the paths.
Then to the next case statement which is
case "string". That is if only a single path is passed to the function.
We get the head element and assign it to a variable called
head. We then create a
We then assign the path to the
Finally, we assign the other values and append the element to the
Now, we are going to make another function to lazy load all scripts.
We are going to write the function in the same file where the
Let's start coding 😎.
It works just like the function
lazy_load_css. You can passs a single path or an array of paths to the function and it will lazy load those files.
When a path is passed through the function, we first get the head tag.
Then we create a
<script> tag and add the path as the script's src.
Then we append the
<script> tag to the
Using the functions in our HTML file
Now we have successfully created two functions to lazy load our style-sheets and scripts. It's up to you to decide when you are going to use those functions.
You might want to load your style-sheets when your web page has finished loading or load them when a button is clicked or ...😄
It's really up to you. So now, we are going to use the two functions. We are going to lazy load our scripts and style-sheets when our web page has finished loading.
Let's create a simple HTML file.
So the code above is an example which uses our two functions.
Inside our html file, we binded the lazy loading to the window.onload event. Meaning, our function will only work after the html page has finished fully loading.
You can choose to bind the function to any event. It's up to you.