Nuxt.js is an open source minimalist frontend framework built on Vue.js. It comes with several development features like static site generation, improved SEO, and many other optimizations built in. In this blog post, let’s go over some best practices to maximize the speed of your Nuxt.js pages.
One of the biggest advantages of Nuxt.js is that you can leverage the Vue.js ecosystem. Not only are there built-in components that help with performance, but there are also multiple modules and libraries that you can use to extend the impact of Nuxt.js.
Here are a few steps to further improve performance in Nuxt.js.
By simply running nuxt generate, you can create a statically generated website. Nuxt.js generates pre-rendered pages for your project’s components at build time instead of rendering during runtime. This saves client resources.
Nuxt.js automatically splits code into smaller chunks and creates separate build files for each individual route and page. This means only the components necessary for that page need to be loaded when the user visits the page, which improves performance significantly and the user can interact with the page sooner.
Progressive Web Apps (PWAs) are web apps that offer an experience that is on par with native apps. They’re progressively enhanced, responsively designed, discoverable, and secure, among other advantages.
The nuxt/pwa module needs no configuration and can very easily be used to turn your web app into a PWA. This will significantly improve your Lighthouse scores.
Optimizing images is one of the low-hanging fruits of optimization. The nuxt/image module automatically optimizes your images. It comes with the nuxt-image and nuxt-picture components which are drop-in replacements for the <img> and <picture> tags respectively.
CSS optimization is another great way to minimize render-blocking resources and ensure that pages load fast. There are multiple Nuxt.js modules to improve performance by minifying HTML, removing unused CSS, efficiently loading web fonts, and more.
The nuxt speedkit module helps with performance optimization based on Lighthouse metrics. To get a full score of 100/100, this module makes it so that only the absolutely essential resources above the fold are initialized when the page is loaded, besides other optimizations.
How your website is built and your performance metrics play a huge role in determining your site’s rank on search. Nuxt.js is incredibly SEO-friendly and comes with several features to help you with SEO, like automatically adding meta tags for each page and allowing you to build a sitemap for your website (using nuxt/sitemap).
Want to find out where your own website stands in terms of performance? Plug your URL into our Performance Insights tool to find out.