Lazy Loading

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.
• System resource conservation – Lazy loading conserves both server and client resources, because only some of the images, JavaScript and other code actually needs to be rendered or executed.

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:

• blazy.js – blazy.js is a lightweight JavaScript library for lazy loading and multi-serving images, iframes, video and other resources.
• 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:

• Inline <img> tags, using JavaScript to populate the tag if image is in viewport
• Event handlers such as scroll or resize
• 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.
• When lazy loading an image, asynchronously decode it using the JavaScript decode() method before inserting it into the DOM. Otherwise, large images can cause the browser to freeze.
• Handle errors in case the image or object fails to load.
• Offer a noscript in case JavaScript is not available. Otherwise users with JavaScript disabled will not see any lazy-loaded resources.

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.