First Look at Angular Defer: Big Performance Gains

you probably already heard about the new defer that will be released in Angular 17, if not you can read the RFC from here https://github.com/angular/angular/discussions/50716

in this article I will show two real world examples that demonstrate the potential of it, the first is to reduce the initial bundle size, the second is to decrease the SSR initial response time by omitting unnecessary HTTP calls

1. Reducing initial bundle size

imagine we have a page like that https://interview.community/question/16, you have a large content followed by a section to add your answer, even worse this page will never show this part to add your answer if you aren’t logged in, but this component to add your answer along with all of its dependencies will always be part of the initial bundle this for this page, even if it will never be needed

here is example for this component code big content followed by <app-add-comment/> while this add comment component is a simple component loading MatInputModule and MatButtonModule to render this view

add comment component

now if you build the application the initial bundle size is 583.93 kB

now here comes the defer, by simply replacing it with

@defer {
  <app-add-comment/>
}

the new initial bundle size is 450.63 kB, so just like that you decreased your initial bundle size by 133 kB, because the Angular material Input and Button will not be part of the initial bundle size since they are lazy loaded

but be careful not to do that for a content that is part of your Largest Contentful Paint of your page, since it can downgrade your user experience by increase the Cumulative Layout Shift

2. Reducing initial SSR time

the second example is for the same page https://interview.community/question/16 now for every answer there are comments that are needs to be loaded, but they aren’t part of the Largest Contentful Paint, but for the initial SSR to render it needs to load all of the answer comments, you can measure it by looking at the Waiting for server response time in the network, this is the time that the server is actually rendering waiting for all the HTTP requests to be completed

I create another example in this repo to demonstrate how much difference this can make

in the http example you again have a large content followed by <app-comments/> show just call http api and show the response

now before using defer the time for the server to reply is 170–190 ms

simple by again replace it with

@defer {
  <app-comments/>
}

now the time for the server is 10–20 ms, you can see now it’s 10x times faster, while in real application you will probably not see that much difference because in our example there isn’t any http calls required for the Largest Contentful Paint but in most real pages you will find some http calls needed, it will still have positive impact

and this also affect how much requests are being sent to the server, which can make the server costs lower and the response time reduced generally

A Bonus: lazy loading animation

the Angular team have made even more performance improvements by allowing to lazy load the animation, in our small example the only place the animations are used are the material button and textarea, so by replacing provideAnimations with provideAnimationsAsync in our app.config.ts you can see the initial bundle size reduced even further to 390.18 KB by 140 KB from 450.63 kB, which is reduced by using defer from 583.93 kB

so by using defer and provideAnimationsAsync you get a total of 273 KB

here is the repo https://github.com/robertIsaac/first-look-at-angular-defer to see the latest code, and here is the code before the improvments https://github.com/robertIsaac/first-look-at-angular-defer/tree/before-defer if you want to play with it

I hope you benefit from this article, and if you have more examples you can think defer can improve please share in the comments :)