Lazy loading and virtualization are two terms related to user experience that are at times mistaken to be synonymous. While they both related to the concept of loading large amounts of data onto the user's screen (think applications with infinite scroll), they describe different techniques in dealing with the data.
Lazy Loading
Lazy loading is a technique which makes asynchronous calls to fetch new data (from an API endpoint, a store, etc) as the data appear in the viewport. This improves the user experience as the user does not need to wait for all the data to load at once but only what is needed at the moment.
The social media platform Triller is a good example of a site that lazily loads content into the viewport to produce an infinite feed as a user scrolls. Lazy loading only concerns itself with fetching subsequent data and loading the data into the viewport.
In the figures below, we can see how the data load in the viewport differently. In figure 1, the site will fetch and render all data, even if the data are not yet accessible in the viewport. In figure 2, the data outside of the viewport are not yet fetched until the user requests the data (for example, has reached the bottom of the fetched posts).
Figure 1. Site without lazy loading.
Figure 2. Site with lazy loading.
Virtualization
Virtualization is another technique for loading content asynchronously but renders only what is in the viewport. As previously fetched data leave the viewport, so do those DOM nodes. This improves the user experience since a user who scrolls for a very long time would otherwise have many DOM nodes and, as a result, may notice a drop in performance.
The social media platform Instagram is a good example of a site that makes use of virtualization for its feed. Only a handful of posts will remain loaded in the DOM while a user scrolls.
In the figures below, we see the differences between strictly lazy loading and virtualization. In figure 3, data previously fetched remain in the DOM as the user makes subsequent fetches. In figure 4, the previously fetched data are removed from the DOM and replaced with subsequently fetched data.
Figure 3. Site without virtualization.
Figure 4. Site with virtualization.
Conclusion
Despite the confusion between the two terms, both techniques are meant to improve the user experience as they offload the fetching of data (especially large data such as images or videos) until the user is ready to access the data. Both techniques have a place in today's content-heavy web, whether it's because a user has restricted access to internet (spotty connection, data caps, bandwidth restrictions) or because a slowly loading page could lead to your users shopping elsewhere.
Top comments (0)