Boosting Angular Performance with @defer and Lazy Loading

Introduction

The new @defer feature in Angular is part of the framework's enhancements to improve performance, especially in lazy loading and rendering optimization. Here’s a quick overview of the @defer feature and the @placeholder and @loading blocks.

Overview of @defer

Purpose

• The @defer feature is designed to delay the loading and rendering of components or parts of the application until they are needed. This can significantly improve the initial load time of the application and enhance the user experience.

Usage

• @defer can be applied to components or parts of the template to indicate that they should be loaded lazily. This can be particularly useful for large applications or sections of an application that are not immediately visible or necessary when the user first lands on a page.

Syntax

• The syntax for using @defer is straightforward and integrates seamlessly with Angular's existing template syntax. Here’s an example of how it might be used:

  @defer {
  <large-component />
  }

Advantages

• Performance Optimization: By deferring the loading of certain parts of the application, the initial load time can be reduced, leading to a faster and more responsive user experience.
• Resource Management: Deferring the loading of components helps in better resource management, as resources are only utilized when necessary.
• User Experience: It enhances the user experience by loading critical content first and deferring less critical content until it's needed.

Integration with Angular's Ecosystem

• The @defer feature integrates well with other Angular features and tools, allowing developers to take advantage of lazy loading, change detection strategies, and other performance optimization techniques in a cohesive manner.

Future Prospects

• As Angular continues to evolve, the @defer feature is likely to see further enhancements and optimizations. Developers can expect more fine-tuned control over how and when parts of their application are loaded and rendered.

@defer and the IntersectionObserver

Under the hood, @defer uses the IntersectionObserver API. This API allows you to observe changes in the intersection of a target element with an ancestor element or the top-level document’s viewport. By deferring the loading of components until they are about to enter the viewport, you can avoid loading resources that the user may never see, thus conserving bandwidth and processing power.

Other Benefits of IntersectionObserver

Improved Initial Load Time: Deferring components until they are needed ensures that only the most critical parts of the application are loaded initially. This reduces the initial load time and improves the perceived performance of the application, making it feel faster and more responsive. Angular will create separate bundles for the components that are deferred, thus also reducing the size of your main bundle.

Enhanced User Experience: By loading content just before it becomes visible, you can ensure a smoother and more seamless experience for users. This technique can be especially beneficial for long-scrolling pages, where loading content as the user scrolls can prevent the application from becoming sluggish.

Better Performance on Low-Power Devices: Devices with limited processing power or slow network connections can benefit significantly from deferred loading. By only loading necessary components, these devices can handle applications more efficiently, providing a better experience for users on a wide range of devices.

Examples

Using @defer without Any Options

Here’s an example demonstrating how to use @defer in an Angular application. First, create a component that loads images. Using standalone components is a requirement for @defer.

import { Component } from "@angular/core";

@Component({
  selector: "app-images",
  standalone: true,
  template: `<div style="display: flex; flex-direction: column;">
    @for(image of list; track image) {
    <img [src]="image" width="600" height="400" />
    }
  </div> `,
})
export class ImagesComponent {
  list = Array(5).fill("https://placehold.co/600x400");
}

And here we are using @defer without any options.

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
}

Now, looking at the generated bundle, we can see that the image component has its own chunk.

In the network tab, when the page is loaded, we can see that this bundle is now loaded at runtime.

Using @defer with Options

Several options are available to enhance the user experience. In this section, we will go through some of them.

Using @placeholder

By default, the defer block will render the content when it is visible in the viewport. However, there can be delays, for example, when the components are making HTTP requests. In those scenarios, we can use the @placeholder option. The content used for the placeholder is not lazy loaded. The content in the @placeholder is shown first until the @defer block's contents are ready to render. The placeholder itself comes with an optional argument called minimum. This allows you to set the time to display the content.

Here is how this would look:

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @placeholder (minimum 500ms) {
<p>Loading Images</p>
}

And here is how this looks:

Using @loading

The @loading block is used to display some content while the content defined in the @defer block is still loading or has started to load. This is different from the @placeholder block, which will appear before the loading starts. This block comes with two optional arguments, after and minimum. Similar to the @placeholder argument, the minimum argument is used to set the time to display the content. The second argument, after, is used to define the waiting time before showing the @loading content.

Here is how this would look:

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @loading (after 1s; minimum 500ms) {
<p>Loading Images</p>
}

While you may not see this properly in the animated GIF, we are telling the block to wait at least 1 second before displaying the @loading content and show it for at least 500 ms.

Conclusion

The @defer feature in Angular is a powerful tool for enhancing performance and user experience by delaying the loading of components until they are needed. By integrating this feature with options like @placeholder and @loading, developers can create more efficient and responsive applications. As Angular continues to evolve, features like @defer will play a crucial role in optimizing resource management and improving application performance across various devices and network conditions.