Critical CSS Module

[jpsc]

What problem does this feature solve?

The short version: Improve First Contentful Paint

The longer version: No matter how much you optimize your css size (hint: purgeCSS) you will most likely load too much for the screen you are showing. Critical CSS module would help with optimizing the loading of your styles without blocking the page render. This link explains clearly the benefits.

What does the proposed changes look like?

We can use either criticalCSS or critical on the module and add a module to nuxt.config (only on production) that would generate the critical inline css and append it to the page. We can then load the remaning css async. This should only work if extractCSS is active.

_{This feature request is available on Nuxt community (#c165)}