in order to improve lighthouse score I need to enable gzip
and/or brotli
compression so it will increase performance score. I added two webpack plugins to my nuxt.config.js
file:
plugins: [
new CompressionPlugin({
filename: `[path].gz[query]`,
algorithm: `gzip`,
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new BrotliPlugin({
asset: `[path].br[query]`,
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
And I can confirm, that adding these two plugins is actually creating .gz
and .br
versions of my files.
Main questions is: should I do something additionaly with my nuxt config file in order to send these compressed files or nuxt will handle this by itself? Can it be checked on localhost
(because I've read that brotli
, for example, is only for HTTPS protocol)?
P.S. I don't use any framework like express
or restify
Currently, Brotli is the best compression algorithm available for websites. If you see you are not offering Brotli, move to a web hosting partner that has it enabled. A hosting partner like SiteGround! You can get +15-20% smaller files with Brotli and smaller files means a faster loading website.
You can use one of the following to brotli compress your files: Brotli executable : Download source and create executable from here. Brotli npm package : Write your own node program to brotli compress files. Brotli webpack plugin : Setup brotli files during webpack bundling.
If you are using nuxt 2, it can be done more easily.
In your nuxt.config.js
file:
import shrinkRay from 'shrink-ray-current'
export default {
render: {
compressor: shrinkRay()
}
}
See this article for moore detials https://blog.lichter.io/posts/nuxtjs-on-brotli
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With