Lazy loading (also called on-demand loading) is an optimization technique for the online content, be it a website or a web app.
Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.
For example, say a user requests for the logo of GeeksForGeeks from a search engine. The entire web page, populated with the requested content, is loaded. Now if the user opens the first image and is satisfied with it, he will probably close the web page thus, rest of the images so loaded will be left unseen. This will result in the wastage of the resources so consumed in the bulk load of that page. Thus the solution to this is Lazy Loading.
One form of lazy loading is infinity scroll, in which, the content of the web page is loaded as and when the user scrolls down the page. It is a popular technique being used by various websites.
Advantages of Lazy loading:
- On-demand loading reduces time consumption and memory usage thereby optimizing content delivery. As only a fraction of the web page, which is required, is loaded first thus, the time taken is less and the loading of rest of the section is delayed which saves storage. All of this enhances the user’s experience as the requested content is fed in no time.
- Unnecessary code execution is avoided.
- Optimal usage of time and space resources makes it a cost-effective approach from the point of view of business persons. (website owners)
Disadvantages of Lazy loading:
- Firstly, the extra lines of code, to be added to the existing ones, to implement lazy load makes the code a bit complicated.
- Secondly, lazy loading may affect the website’s ranking on search engines sometimes, due to improper indexing of the unloaded content.
Conclusion: Though there are certain pitfalls of lazy loading yet the big advantages, as optimal utilization of the two major resources (time & space) and many more make us overlook its disadvantages.
- How to show Page Loading div until the page has finished loading?
- How to Create Animation Loading Bar using CSS ?
- Loading Text Animation Effect using CSS
- Ways To Reduce The Loading Time Of Your Website | Set 2
- Ways To Reduce The Loading Time Of Website | Set 1
- How to load jQuery code after loading the page?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- Complete Interview Preparation With Doubt Assistance - INR 90 Lakh Cashback Pool Offer!!
- How to Draw a Pentagon using HTML and CSS?
- How to display a PDF as an image in React app using URL?
- Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
- HTML onplay Attribute
- HTML onloadeddata Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.