🚀 Feature request

Command (mark with an x)

• [x ] build

Description

The size of CSS for a normal website could be from 100kb to few hundred KBs.

For better performance we should inline the critical css in the head of the html document and lazy load rest of the css through an external file.

Currently Angular CLI adds the css file to the head of the index.html, which makes it render blocking.

Ideally we should have a solution like the one mentioned here https://dzone.com/articles/critical-css-and-webpack-automatically-minimize-re , so that during the build process Angular CLI automatically identify the css of the critical path, inline it in head of the index.html, and lazy load rest of the css using preload e.g.:

<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">

I am not sure how practical the solution described in this post is, but I think the least we could do is allow lazy loading of css e.g through an option in angular.json file that allow us to specify that this particular css file should be lazy loaded and when that option is enabled, Angular CLI should create below tag:

<link href="/style.hash.css" rel="preload" as="style" onload="this.rel='stylesheet'">

instead of

<link rel="stylesheet" href="styles.hash.css">

assuming we have already inline the critical css in index.html.

This Webpack plugin might be relevant and helpful https://www.npmjs.com/package/preload-webpack-plugin