The solution:
Adding "inlineCritical": false to the angular.json solved the issue because it disable Critical CSS inlining.
"configurations": {
"production": {
"optimization": {
"styles": {
"inlineCritical": false
}
}
}
}
Why Angular does that?
When the browser renders a page, it has to wait for the CSS resources to be downloaded and parsed. It can give the (false) impression that the loading of your application is slow, and impacts the First Contentful Paint (FCP) time.
A common technique to avoid that is to inline the CSS directly in the HTML, to avoid an extra request (this is what Lighthouse recommends). But you don’t want to inline all your CSS, otherwise the time to download the HTML increases. You just want to inline critical CSS resources, the ones that blocks the rendering, and that your user will see (you can defer the rest of CSS).
The Angular CLI introduces a new option in v11.1 to help us with this: inlineCSS
The CLI will then use critters under the hood to extract the critical CSS of your application, and inline them directly in the HTML.
Running ng build --prod with the above configuration produces an index.html file with a style element containing the critical CSS extracted, and the usual styles.xxxxx.css is loaded asynchronously using:
<link rel="stylesheet" href="styles.3d6bb69e3d075769b349.css" media="print" onload="this.media='all'">
For more informations about the unsafe-inline CSP keyword: https://content-security-policy.com/unsafe-inline/
