UmiUmi Enjoyers
•10 min read

Optimizing Nuxt 3 Performance

Learn how to optimize your Nuxt 3 application for maximum performance, from initial load time to runtime optimization.

Table of Contents

1
Image Optimization

Optimize images for faster loading and better Core Web Vitals

Learn how to use Nuxt Image module to automatically optimize images, implement lazy loading, and serve the right image size for each device.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'ipx',
    presets: {
      avatar: {
        modifiers: { format: 'webp', width: 80, height: 80 }
      },
      hero: {
        modifiers: { format: 'webp', quality: 80 }
      }
    },
    densities: [1, 2],
    format: ['webp', 'avif']
  }
})

// Usage in components
<nuxt-img
  src="/hero.jpg"
  preset="hero"
  width="1200"
  height="600"
  loading="lazy"
  placeholder
/>

2
Code Splitting and Lazy Loading

Implement effective code splitting strategies

Optimize your bundle size by implementing smart code splitting and lazy loading components and routes.

// Lazy load components
const HeavyChart = defineAsyncComponent(() => 
  import('@/components/HeavyChart.vue')
)

// Lazy load routes
export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
  },
  routeRules: {
    '/blog/**': { swr: 3600 },
    '/admin/**': { ssr: false }
  }
})

3
Server-Side Optimizations

Optimize server-side rendering and caching

Implement server-side optimizations to improve Time to First Byte (TTFB) and overall rendering performance.

// nitro.config.ts
export default defineNitroConfig({
  storage: {
    redis: {
      driver: 'redis',
      /* redis connector options */
    }
  },
  routeRules: {
    '/api/**': { cors: true, headers: { 'cache-control': 's-maxage=60' } }
  },
  prerender: {
    crawlLinks: true,
    routes: ['/sitemap.xml']
  },
  compressPublicAssets: true
})

4
Core Web Vitals Optimization

Improve Core Web Vitals metrics

Learn how to optimize Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { lang: 'en' },
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preload', as: 'style', href: '/critical.css' }
      ]
    }
  },
  experimental: {
    inlineSSRStyles: false,
    viewTransition: true
  },
  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true
    }
  }
})

5
Runtime Performance

Optimize runtime performance and reactivity

Implement best practices for runtime performance, including efficient reactivity and state management.

// Optimize large lists
const items = shallowRef([])
const visibleItems = computed(() => 
  items.value.slice(0, 50)
)

// Use v-once for static content
<template>
  <header v-once>
    <h1>{{ staticTitle }}</h1>
  </header>
  
  <!-- Use virtual scrolling for long lists -->
  <VirtualList
    :items="items"
    :height="400"
    :item-height="40"
  />
</template>
AA

Anton Andresen

Full Stack Developer & Nuxt Enthusiast