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.
Improving the performance of your Nuxt.js site
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.
Static site generation
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.
Since a significant portion of API calls and JavaScript execution is taken care of during build time, pages load fast.
Code-splitting
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.
By default, Nuxt.js also includes smart prefetching. This involves prefetching links that are visible in the viewport or when the user scrolls. Nuxt.js prefetches the JavaScript for those pages so that the user doesn’t have to wait to see them when they click the links. Nuxt.js doesn’t do this if the browser is busy or if the user is on an unstable or weak connection. When you have a JavaScript-heavy page, a large number of third-party scripts, or too many links to be prefetched, however, you might consider disabling this feature.
As you keep adding JavaScript, especially third-party scripts, to your site, it has a negative impact on the performance. Nuxt.js makes it easy to look at your code bundles and identify opportunities for optimization with the bundle analyzer.
Apart from these, there are a lot more ways to optimize JavaScript in your website, like minifying, eliminating unused JavaScript, etc.
Lazy hydration
The amount of JavaScript you have in your app and the number of components that need to be hydrated have a direct impact on the time the app takes to get to interactive for the user.
Thanks to code-splitting, you can minimize the amount of JavaScript in the critical path. There’s a solution to reduce the number of components that need to be hydrated as well: lazy hydration. Components above the fold need to be hydrated right away so the user can see them, but those below the fold can wait to be hydrated when the user scrolls down. There are also some components that don’t need hydration at all, like non-interactive components that only display some text. These can all be handled appropriately using the nuxt-lazy-hydration component.
Progressive Web Apps (PWA)
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
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.
- Automatically resizing images based on width and height
- Generating responsive sizes when providing sizes option
- Supporting native lazy loading as well as other <img> attributes
- Serving next-gen formats like WebP (only nuxt-picture does this)
Additional optimization
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.
SEO
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).
A/B testing, personalization, etc.
Many third-party scripts that you need to improve business performance and user experience, like analytics, heatmaps, A/B testing, personalization, etc., end up negatively impacting your website's performance and making it load slowly. These heavy JavaScript bundles block your app's main thread, increase your page weight, and add several seconds to your load times. Without these functionalities, however, business teams would be left without a way to measure user engagement and other metrics.
Instead of cluttering the main thread with more JavaScript, you can use Partytown to redirect these resource-intensive scripts to a web worker, which significantly improves performance. All you have to do is use the Partytown module for Nuxt.
Another way to minimize these performance costs associated with additional JavaScript is API-driven solutions like Builder.io. Builder is a visual development platform with all these features and optimizations baked in. It generates each variation of content on the server side, allowing you to perform split testing, analytics, and more without impacting performance. Builder uses gzipping to compress overlapping content and serves a blazingly fast page with little added weight.
Conclusion
As you scale your Nuxt.js app by adding more pages and JavaScript, it becomes very important to keep up your optimization so that your website stays performant at all times. To do this, you can easily leverage the in-built features of Nuxt.js as well as the modules in the Vue.js ecosystem. Instead of manually doing everything or leaving it all to the developers, you can simplify optimization considerably and make it possible for content teams across your organization to attain high performance with a visual development platform like Builder.io.
Want to find out where your own website stands in terms of performance? Plug your URL into our Performance Insights tool to find out.
Tip: Visit our Nuxt and Builder.io Hub
Introducing Visual Copilot: convert Figma designs to high quality code in a single click.
