Nuxt.js — Two super easy changes for starters that can dramatically improve the performance

Performance is a critical factor in converting your visitors into long term followers. Here are two changes for Nuxt that can greatly improve your website performance. You probably knew it already if you have been playing with Nuxt for a while. Yet, I find them missing in 80% of the starter projects I saw.

(1) Move the computation of nuxt-i18n metadata to your layout component

This change is for nuxt-i18n users only. nuxt-i18n provides a convenient way to help adding all required metadata for better SEO, which is to set the ‘seo’ flag to true in the nuxt.config.js. I find many projects are using this way to generate the metadata. Yet, nuxt-i18n doesn’t know which is your root component. As a result, those metadata are re-computed each time a component is created. This is definitely a serious overhead of the performance. What you need to do is simply turn off the default generation mechanism and manually trigger it only once in your layout component.

In your nuxt.config.js,

export default {
  modules: [
    ['nuxt-i18n', { 
      seo: false
      ...
    }]
    ...
  ],
  ...
]

In your layout component,

export default {
  head() {
    return this.$nuxtI18nSeo();
  },
  ...
}

That’s it! Just a very little change, but you can see how great the difference is from my website below.

with ‘seo’ flag set to true

with trigger in the layout component and ‘seo’ flag set to false

You may refer to the official document for more information.

(2) Caching with service workers

Service workers are scripts that separated from your website, which run in the browser level. You can tell the browser to cache your website via a service worker, such that your visitors don’t need to download everything again after their first visit. Setting up a service worker in Nuxt is super easy. Just a line of command and a line of code.

Run

npm i @nuxtjs/pwa