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.