What is Lazy Loading
Lazy loading is the practice of delaying load or initialization of resources or objects until they’re actually needed to improve performance and save system resources. For example, if a web page has an image that the user has to scroll down to see, you can display a placeholder and lazy load the full image only when the user arrives to its location.
The benefits of lazy loading include:
- Reduces initial load time – Lazy loading a webpage reduces page weight, allowing for a quicker page load time.
- Bandwidth conservation – Lazy loading conserves bandwidth by delivering content to users only if it’s requested.
Lazy Loading vs. Eager Loading
While lazy loading delays the initialization of a resource, eager loading initializes or loads a resource as soon as the code is executed. Eager loading also involves pre-loading related entities referenced by a resource. For example, a PHP script with an include statement performs eager loading—as soon as it executes, eager loading pulls in and loads the included resources.
Eager loading is beneficial when there is an opportunity or need to load resources in the background. For example, some websites display a “loading” screen and eagerly load all the resources required for the web application to run.
Lazy Loading Implementing Methods
There are several open source libraries that can be used to implement lazy loading, including:
- LazyLoad – LazyLoad is a script that automatically loads images as they enter the viewport.
Methods for implementing lazy loading in your code include:
- Lazy initialization – This method sets objects to null. Object data is loaded only after and whenever invoking them, check if null, and if so, load object data.
- Virtual proxy – when accessing an object, call a virtual object with same interface as the real object. When the virtual object is called, load the real object, then delegate to it.
- Ghost – load an object in partial state, only using an identifier. The first time a property on the object is called, load the full data.
- Value holder – create a generic object that handles lazy loading behavior. This object should appear in place of an object’s data fields.
Lazy Loading Images
To lazy load an image, display a lightweight placeholder image, and replace with the real full-size image on scroll.
There are several technical approaches to lazy loading images:
- Event handlers such as
- The Intersection Observer API
- The CSS background-image property
Lazy Loading Video
To lazy load a video that doesn’t autoplay, you can use the HTML5 video tag’s preload attribute.
For videos that autoplay, Google Chrome provides lazy loading automatically. In other browsers, you will need to declare the following attributes in the video tag:
<video autoplay muted loop playsinline width="xx" height="xx" poster="placeholder-image.jpg">
Lazy Loading Best Practices
When performing lazy loading, consider the following tips:
- Only lazy load resources that are displayed below the fold or outside the user’s viewport. In code, only lazy load objects that are not needed for initial or essential system operations.
- Handle errors in case the image or object fails to load.
- Offer a
Lazy Loading and CDN
Lazy loading and content delivery networks (CDNs), such as Imperva’s CDN, are two ways to improve page load time and optimize the end-user experience. A CDN helps by placing resources on a cache server closer to the user, allowing them to access it much faster.
How does lazy loading compare to a CDN for website performance optimization?
- Lazy loading avoids unnecessary resource downloads or code execution. However it can’t help when the user actually requests large or numerous resources.
- A CDN caches resources and can serve them to users much faster – but it may transmit unnecessary resources which users don’t actually need.
The optimal solution is to combine both techniques – by implementing lazy loading while serving resources via a CDN, you ensure that only the resources actually needed by users are downloaded, and that when a user actually needs a resource it is cached and delivered fast.