Nuxt gives you a fast baseline out of the box: SSR, code splitting, and automatic prefetching. But there's a lot of room between "works fine" and "fast." In this post, we'll go through practical techniques that make a real difference and the tools to measure it all.

Route-Level Caching with routeRules

We covered routeRules in the deployment post, but it deserves mention here for performance. Caching rendered pages avoids the SSR cost on repeated requests:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Static pages: pre-render at build time
    '/': { prerender: true },
    '/about': { prerender: true },
    '/pricing': { prerender: true },

    // Blog posts: ISR with 1-hour cache
    '/blog/**': { isr: 3600 },

    // API responses: cache for 60 seconds
    '/api/posts': {
      cache: { maxAge: 60 },
    },
  },
});

Pre-rendered pages are served as static files from a CDN with zero server cost. ISR pages are rendered once and cached. API caching reduces database load for frequently accessed endpoints.

Tree Shaking Composables

If you're importing from utility libraries, make sure unused exports are tree-shaken. Nuxt auto-imports are already tree-shaken, but manual imports from packages like lodash need the right import style:

// Bad: imports the entire lodash library
import _ from 'lodash';
const sorted = _.sortBy(items, 'date');

// Good: imports only sortBy
import sortBy from 'lodash/sortBy';
const sorted = sortBy(items, 'date');

// Also good: lodash-es is fully tree-shakeable
import { sortBy } from 'lodash-es';
const sorted = sortBy(items, 'date');

Check your bundle with npx nuxi analyze to see what's taking up space.

Font Loading

Fonts can block rendering if not handled correctly. Use @nuxt/fonts (auto-installed with recent Nuxt versions) or configure font loading manually:

/* Use font-display: swap to prevent invisible text */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

Or with the Nuxt Fonts module:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [
      { name: 'Inter', provider: 'google' },
    ],
  },
});

The module handles preloading, subsetting, and font-display automatically.

Measuring Performance

Use these tools to see where your app stands:

Lighthouse in Chrome DevTools gives you Core Web Vitals scores (LCP, INP, CLS) and actionable recommendations.

nuxi analyze shows your bundle composition:

npx nuxi analyze

This opens an interactive treemap of your build output, showing which packages and components contribute the most to bundle size.

DevTools Network tab with "Disable cache" enabled shows the real waterfall of requests on initial load. Look for large payloads, sequential requests, and render-blocking resources.

Web Vitals Chrome extension or web-vitals npm package gives you real-time Core Web Vitals metrics as you browse your app.

Quick Wins Checklist

Here's a summary of the highest-impact optimizations, roughly in order of effort vs. payoff:

• Add @nuxt/image and convert <img> to <NuxtImg> with sizes and format="webp"
• Use pick or transform on useFetch/useAsyncData to reduce payload size
• Pre-render static pages with routeRules
• Use Lazy prefix on below-the-fold components
• Fetch data in parallel with Promise.all instead of sequentially
• Use ISR for content that changes infrequently
• Enable payload extraction for pages with large datasets
• Check bundle size with nuxi analyze and fix tree-shaking issues

Conclusion

We covered some practical techniques that move the needle on Nuxt performance: reducing payloads, and caching with route rules. These are small changes that add up to a noticeably faster app.

I hope this post has been helpful. Please let me know if you have any questions or comments. Happy coding!