Nuxt.js: SSR CSS - document size becomes too large

Created on 7 Dec 2017 · 7Comments · Source: nuxt/nuxt.js

Nuxt by default outputs CSS loaded through the css entrypoint in nuxt.config on all pages. This is to help the page load faster by not having to make another over the wire call. However, I'm running into some major issues with the document size now.

I'm using Bulma with Buefy and some other custom css. Using the build analyzer, I can see that the gzipped size is 38kb for the entire generated css. However, because this is embedded into the html and the html is not gzipped, the size is expanded out to 375kb.

I wish

there is an option to gzip the html doc. With the styles added, it is 10x larger than it needs to be. Not sure what kind of performance impact it'll have on the server but would love to test out.
option to not add css to the html and load through linked styles. I understand this can lead to FOC but might be something I'm willing to do to avoid the large document delivery.

If someone has experience using Bulma/Buefy with Nuxt and have better optimized their load times. Please chime in and help!

_{This question is available on Nuxt.js community (#c2040)}

Source

uptownhr

👍1

Most helpful comment

@uptownhr you might try:

nuxt.config.js
build:{
  extractCSS:true
}

dohomi on 7 Dec 2017

👍3

All 7 comments

@uptownhr you might try:

nuxt.config.js
build:{
  extractCSS:true
}

dohomi on 7 Dec 2017

👍3

Will try thanks!

uptownhr on 7 Dec 2017

👍1

As far as I remember there was gzip feature in Nuxt, but it was removed since it's better to do with web server or hosting provider.

hackuun on 9 Dec 2017

❤1

@iamdubx
Actually gzip is not removed, just disabled in dev mode. 😸
In production mode, it's still enabled and can be configured by render.gzip in nuxt.config.js.
https://nuxtjs.org/api/configuration-render#gzip