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

photo @Angular on Twitter
photo @Angular on Twitter

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:

https://angular.io/guide/workspace-config#optimization-configuration