Angular 11.1 comes with new experimental feature which can automatically create inline critical CSS and also perform couple others optimisation steps.

Implementing inline critical CSS can really improve your score on Google's page speed and also Web Vitals. And from now on looks like we could have this feature easily setup just by using angular.json file.
Here is the example:

                    "optimization": { 
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true
  "fonts": true

As you can see Angular will be able to perform couple optimisations tasks. Not only inlining critical CSS but also

  • Minification of scripts and styles
  • Tree-shaking
  • Dead-code elimination
  • Inlining of critical CSS
  • Fonts inlining


You can read more about in official angular documentation: