In modern web development, performance is everything — and Angular’s new @defer syntax is a game-changer for optimizing load time and user experience. It gives you a simple, declarative way to lazy-load parts of your UI that aren’t needed right away, helping cut down on initial bundle size and boosting metrics like Largest Contentful Paint (LCP) and Time to First Byte (TTFB).
Here’s a quick breakdown of how to use @defer effectively in your Angular projects.
What is @defer?
The @defer block lets you delay the loading of non-essential parts of your template. Think of it like lazy loading — but directly in your HTML.
@defer {
<large-component></large-component>
}When you wrap content inside an @defer block, Angular doesn’t load it right away. Instead, it defers the associated components, pipes, directives, and even styles. These are then loaded dynamically only when needed.
Why Use @defer?
1. Smaller Initial Bundle
Only load what’s immediately necessary — the rest waits in the background.
2. Faster Initial Load
Improves key metrics like LCP and TTFB by showing the essential UI first.
3. Flexible Loading Control
You get control over when and how deferred content appears — using triggers, placeholders, loading indicators, and error fallbacks.
Handling Deferred Loading States
You can easily manage what the user sees while waiting for deferred content:
1. Placeholder Content
@defer {
<large-component></large-component>
} @placeholder {
<p>Loading placeholder...</p>
}2. Loading Indicator
@defer {
<large-component></large-component>
} @loading {
<img src="spinner.gif" alt="Loading..." />
}
3. Error Handling
@defer {
<large-component></large-component>
} @error {
<p>Oops! Something went wrong.</p>
}Controlling When Deferred Content Loads
Triggers let you define exactly when a deferred block should load:
- Idle (Default): Loads during browser idle time
- Viewport: Loads when the content enters view
@defer (on viewport) { <large-component></large-component> }- Interaction: Loads on user interaction
<button #trigger>Load More</button> @defer (on interaction(trigger)) { <large-component></large-component> } - Timer: Loads after a delay
@defer (on timer(500ms)) { <large-component></large-component> }
Best Practices for Using @defer
- Avoid layout shifts: Don’t defer content that appears above the fold.
- Use separate triggers for nested deferred content to avoid bulk loading.
- Pair with prefetching: For even faster experience, preload deferred assets in advance.
Final Thoughts
The @defer feature in Angular gives you fine-grained control over performance — right in your templates. It’s one of the easiest ways to optimize perceived speed without sacrificing functionality. Start small by deferring heavy components or offscreen sections and build from there.
Let me know if you want help integrating it into a real-world Angular component!
