Performance Optimization

Making Your Nuxt App Blazing Fast

Performance is crucial for user experience and SEO. Nuxt provides many built-in optimizations, but you can do more.

Lazy Loading Components

Load components only when needed:

<!-- Regular import -->
<script setup>
import HeavyComponent from '~/components/HeavyComponent.vue'
</script>

<!-- Lazy import -->
<script setup>
const HeavyComponent = defineAsyncComponent(() =>
  import('~/components/HeavyComponent.vue')
)
</script>

<!-- Nuxt's automatic lazy prefix -->
<template>
  <LazyHeavyComponent />
</template>

Code Splitting

Nuxt automatically code-splits by page, but you can optimize further:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue', 'vue-router'],
          }
        }
      }
    }
  }
})

Image Optimization

Use <NuxtImg> for automatic optimization:

<template>
  <!-- Regular img -->
  <img src="/large-image.jpg" alt="Large">

  <!-- Optimized with Nuxt Image -->
  <NuxtImg
    src="/large-image.jpg"
    alt="Large"
    width="800"
    height="600"
    loading="lazy"
    format="webp"
  />
</template>

Payload Optimization

Reduce data transferred during navigation:

<script setup>
// ❌ Large payload
const { data } = await useFetch('/api/posts')

// ✅ Optimized with pick
const { data } = await useFetch('/api/posts', {
  pick: ['id', 'title', 'excerpt']
})
</script>

Prefetching

Nuxt prefetches links in viewport:

<!-- Default: prefetch on hover -->
<NuxtLink to="/about">
About
</NuxtLink>

<!-- No prefetch -->
<NuxtLink to="/about" no-prefetch>
About
</NuxtLink>

<!-- Prefetch on visibility -->
<NuxtLink to="/about" prefetch>
About
</NuxtLink>

Key Performance Metrics

Monitor these metrics:

• LCP (Largest Contentful Paint) - < 2.5s
• FID (First Input Delay) - < 100ms
• CLS (Cumulative Layout Shift) - < 0.1
• TTFB (Time to First Byte) - < 600ms

Best Practices

1. ✅ Use lazy loading for heavy components
2. ✅ Optimize images with NuxtImg
3. ✅ Minimize bundle size
4. ✅ Use server-side caching
5. ✅ Enable compression (gzip/brotli)
6. ✅ Use CDN for static assets
7. ✅ Monitor performance with Lighthouse

Performance optimization is an ongoing process. Measure, optimize, and measure again. Use tools like Lighthouse, WebPageTest, and Chrome DevTools to identify bottlenecks.