Improving Angular Performance with @defer Blocks “ Part 1 “

Angular Deferrable views

Efficient web applications prioritise speed and user experience. Angular’s new @defer feature provides a declarative way to delay loading non-critical content, reducing initial bundle size and improving Core Web Vitals (CWV) metrics like Largest Contentful Paint (LCP) and Time to First Byte (TTFB).

Here’s a concise guide to harnessing the power of deferred views in Angular.

What Is @defer?

The @defer block allows you to lazy-load parts of your Angular templates by wrapping non-essential content

@defer {
  <large-component></large-component>
}

This defers the loading of the component, directives, pipes, and CSS styles inside the block. These dependencies are dynamically imported into separate JavaScript files, fetched only when required.

Benefits of @defer

1. Reduced Initial Bundle Size: Only critical code is loaded upfront.

2. Enhanced Performance Metrics: Improves LCP and TTFB by focusing on rendering essential content first.

3. Granular Control: Fine-tune the behavior with triggers, placeholders, loading states, and error handling.