---
title: Faster Nuxt sites on Netlify
description: >-
From Nuxt and Netlify we get a lot performance out-of-the-box. But we can make
things even faster by tuning Nuxt and Netlify to work together!
language: English
url: 'https://voorhoe.de/en/blog/faster-nuxt-sites-on-netlify/'
---
Blog
# Faster Nuxt sites on Netlify
By [Frank](/en/team/frank.md)
8 May 2020
* [Cache assets forever](#cache-assets-forever)
* [Split assets from app bundle](#split-assets-from-app-bundle)
* [Remove unused features](#remove-unused-features)
* [Serve modern bundles](#serve-modern-bundles)
* [More performance optimisations](#more-performance-optimisations)
Tuning Nuxt and Netlify to work together
Nuxt and Netlify both aim to make user experiences as fast and smooth as possible. From Nuxt’s homepage:
> "With Nuxt.js, your application will be optimized out of the box. \[…] To squeeze every unnecessary bit out of your app Nuxt includes a bundle analyzer and lots of opportunities to fine-tune your app."
\- Why Nuxt?
Netlify, as a platform, has a world-wide Content Delivery Network (CDN) and a [smart resource caching strategy](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/) setting *max-age=0, must-revalidate, public*, effectively telling the browser to cache all resources but to check-in with the server to verify it’s still fresh.
So with Nuxt and Netlify we get a lot performance out-of-the-box. But we can make things even faster by tuning Nuxt and Netlify to work together. This is how:
* Cache assets forever
* Split assets from app bundle
* Remove unused Nuxt features
* Serve modern bundles
Nuxt is powered by Vue.js. Do you want to become a Vue master? During our two day hands-on workshop we’ll teach you everything you need to know to build large performant web apps with Vue.
[Join our Vue masterclass](https://www.voorhoede.nl/vuemaster)
## Cache assets forever
Nuxt does a great job by hashing all of its JavaScript bundles, making sure each bundle has a unique filename. When the bundle content changes, the filename changes as well. This enables us to cache them forever! Nuxt serves bundles from the */\_nuxt/* folder. Let’s configure Netlify to cache files in this folder forever:
```
# static/_headers
# docs: https://www.netlify.com/docs/headers-and-basic-auth/#multi-key-header-rules
/_nuxt/*
Cache-Control: max-age=365000000
Cache-Control: immutable
```
This strategy can be applied for other assets as well. Basically, all fonts and images can be cached. Nuxts *assets* folder comes into the picture here. Let’s try to move as many assets as possible from the *static* folder to the *assets* folder. Assets in this folder are hashed and end up in the */\_nuxt/* folder after a build, just like our bundles. Now all these assets will be cached forever too!
## Split assets from app bundle
Now that we’re talking about assets, there is one kind of asset that impacts your performance more than you would think: SVG icons. There’s a good chance you’ve set up *vue-svg-loader* to load your icons. And there’s good reason to: having SVGs inlined in the html output enables us to do cool things like overwriting styling properties from our CSS and animating them.
However, this loading strategy comes with a price: our icons are included in our *app.js* bundle. Therefore our icons impact the critical path for our site to load and become interactive.
Fortunately, we can solve this by using [Nuxt SVG sprite](https://github.com/nuxt-community/svg-sprite-module): a module that sprites all your SVG assets together and serves them as one SVG file. This single SVG file gets hashed and ends up in the */\_nuxt/* folder, so Netlify will leverage caching on our icons as well!
The Nuxt SVG sprite module provides great developer experience, by injecting a global component to use your icons in your templates:
```
```
This will output the following HTML:
```
```
The effect of the `