Nuxt.js: Question/Feature: Critical CSS when extract CSS flag is true on Nuxt Generate

[bovas85]

I saw vue cli 3 has now got some config options that would be nice to have on nuxt.
Particularly I saw this plugin
https://github.com/anthonygore/vue-cli-plugin-critical/blob/master/README.md

Which would be nice to have particularly for static sites

_{This feature request is available on Nuxt.js community (#c2676)}

[bovas85]

Ps. This is more a question or feature request rather than issue.

[chymz]

Hi, I've done a webpack plugin for this: https://github.com/chymz/nuxt-starter/blob/critical-css/internals/webpack/critical.js

It's a bit hacky, but works... only in SPA mode...

I don't know how to handle that with SSR index.html

[bovas85]

Thanks for this, but I'd need it to work on SSR or static

[AdsonCicilioti]

Nice feature! i also need this!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[remarks]

I'd also be interested in this feature.

[bovas85]

There's a nuxt-purgecss package that will strip unused css, but this is related to the css in the head. Not sure if that package would help here.

[manniL]

@bovas85 The problem is that it will only remove unused CSS. If you still have a lot of CSS left you might want to extract the critical CSS to head anyway to improve perf 🙈

[bovas85]

Yes precisely. That's why I meant it wouldn't be the best option

[manniL]

For the record: Nuxt.js already loads just the critical CSS per page (but includes all of the global one).

[florinesueur]

I'd also be interested in this feature.

[tylerbrostrom]

To the best of my knowledge, Nuxt (2.4.5) effectively does what is asked in this issue–it loads CSS needed for the critical rendering path.**

Put plainly, you won't have any render-blocking CSS when using Nuxt with the build.extractCSS config option set to true.

That's because when that option is true, Nuxt auto-injects a preload link for your global CSS as well as your component CSS (which is code-split per page).

They'll look something like this:

<link rel="preload" href="/_nuxt/8675309.css" as="style">

** That being said, not all browsers support preload links (e.g. IE, Firefox). See Can I Use to determine if preload links will work for your user-base.

[bovas85]

So the issue is if you have several globals like variables and mixins as well as helpers, which minified at the head will take a lot of space and be repeated. I think I'd prefer a cleaner page and was wondering what the best approach would be then to load styles as links but still have the critical css for that specific page in the head.

[williamchong]

@bro-strummer It seems to me nuxt does not add preload to component CSS when extractCSS == true, are there additional settings needed?

[phillipcurl]

@williamchong007 I'm seeing the exact same thing. All of my global CSS is preloaded correctly when enabling extractCSS, but component-specific styles (scoped or not) are extracted without preloading. I'm using nuxt generate to build, but haven't tested other modes.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.