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.
- Ways To Reduce The Loading Time Of Website | Set 1
- Ways To Reduce The Loading Time Of Your Website | Set 2
- BootStrap | Text Utilities (Alignment, Wrapping, Weight etc.)
- BootStrap | Positioning an element with Examples
- Bootstrap | Float utilities with Examples
- Bootstrap | figure class with Examples
- HTML | DOM Code Object
- CSS | grid Property
- HTML | DOM Caption Object
- HTML | DOM Canvas Object
- CSS | text-decoration-style Property
- D3.JS (Data Driven Documents)
- HTML | DOM importNode() Method
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.