In this article, besides throwing light on what is lazy loading we’re going to address some more important questions, such as:
Why should you implement Lazy Loaded Patterns?
What’s wrong with Eagerly Loaded Patterns?
Why is Lazy Loading NOT just a NICE to have feature but a MUST have one?
What kind of content you can lazily load and how will it benefit your website?
How lazy loading can improve the performance and loading time of your website?
So, first things first.
Lazy Loading is a strategy to identify resources as non-blocking or non-critical and load them only when needed, it's a way to shorten the length of the critical rendering path which translates into reduced page load times.
- According to MDN Web Docs
To understand this over-complicated looking definition in simpler words, let's assume you have a website that has about 100 pages(including the homepage, contact us, dashboard, etc.). Now, when a user visits your website, they might be more interested in visiting certain specific pages such as the homepage or the dashboard, compared to other pages, such as about us. It is also possible that the user never even visits some of the other lesser important pages on your website. Consider, you’re not using lady-loaded patterns yet, now you’re just downloading the entire website(all the 100 pages) in the background even if the user just wants to take a quick look at his dashboard. This will make the user have to wait for each and every one of your 100 pages to get downloaded before they can see the one page that they wanted to see. This is known as Eager-Loading.
Let’s see this mathematically, your user wants to navigate to the contact us page which is only 50 KBs, and your whole website is about 5 MB. Now, instead of requiring the user to download only the absolutely needed 50KBs, you’re forcing them to download 5 Megs of data in their web browser, most of which they don’t even use. Pretty bad, right? What if the user has a bad internet connection? This makes lazy loading pretty obviously a must-have and not just a nice-to-have.
Moreover, lazy loading becomes an even greater necessity when you’re building a website that requires the users to authenticate before they can visit any other pages. Why, you ask? The users won’t be able to anyways access other pages/components unless they complete the login or the signup process. So, what is the even point in loading all of that at once?
YouTube just loads the thumbnails of the videos at first, and when a viewer clicks on a thumbnail only then they start to load the video.
In other words, lazy loading can also be described as loading the critical or the essential part of your website(the rest of the components/pages might be important too but they’re not critical at the moment). By doing this, you're actually reducing the load time as well as the interaction time of your website by a lot.
A Lazy Loading Strategy
Now, there’s an interesting lazy loading strategy that I use the most, called preloading all modules, which instructs us to download the first critical resource where the user wants to land, then we lazy load the rest of the modules. Now, unlike the rest of the above-mentioned examples, we won't wait for the user to click on a button/link that takes him to the next page he wants to visit. What we did differently in this strategy was, while the user was interacting with the first page they visited and we see that nothing is being downloaded in the background now and no API requests are being processed, so we start downloading the other pages in the background. Now, I personally think this is a great approach because this gives you the best of both worlds. First, you load the website as fast as possible, second, you are not waiting for the user's interaction to load the rest of the components of your website. In essence, you’re only fetching other resources when your browser is idle, so the user doesn’t have to wait at all whenever they’re ready to make their next move. Pretty neat, right?
What resources can you lazy-load?
Moving on to the resources you can load lazily. In my opinion, two absolutely crucial resources that we should definitely always lazy load are, i) Images, and ii) Videos. Let's say you have a video on your website. Think, do you really need to download the complete video when you load the website? I don’t think so! You should rather delay the loading until the user clicks on the play button because that video right now is not a critical resource. The user might never even see your video.
The next resource in line to lazy-load would be the pages on your website, as we already discussed.
Lazy Loading Example
Medium.com has a lot of images besides plenty of textual data. However, as Medium follows the lazy loading patterns they don’t download the images right away. They load the images in the background only once the blog is loaded.
Alright, so that’s it! Thanks for reading the article, I appreciate your time and I hope you learned something new today! Keep Learning!