Nuxt Performance Toolkit

Performance optimization toolkit for Nuxt 3 applications. Built from experience optimizing large-scale banking web applications serving millions of users.

What's Included

SSR Performance

• Server-side rendering profiling utilities
• Hybrid rendering strategy configuration (SSR / SSG / ISR per route)
• Payload optimization and dehydration tuning
• Server middleware performance monitoring

Bundle Optimization

• Bundle analysis automation with webpack-bundle-analyzer / rollup-plugin-visualizer
• Tree-shaking verification scripts
• Dynamic import patterns for route-level code splitting
• Vendor chunk optimization strategies

Core Web Vitals

• Lighthouse CI configuration and thresholds
• Real User Monitoring (RUM) setup with web-vitals
• Performance budget enforcement in CI/CD
• Regression detection and alerting

Caching Strategies

• HTTP cache header templates (Cache-Control, ETag, Vary)
• Service worker with Workbox for offline-first patterns
• CDN configuration (Cloudflare / AWS CloudFront)
• API response caching with stale-while-revalidate

Image Optimization

• Responsive image pipeline with @nuxt/image
• WebP/AVIF generation
• Lazy loading with intersection observer
• Blur placeholder generation

Critical CSS

• Above-the-fold CSS extraction
• CSS purging configuration
• Font loading optimization (font-display, preload)

Performance Targets

Metric	Good	Needs Work	Poor
LCP	< 2.5s	2.5s - 4.0s	> 4.0s
INP	< 200ms	200ms - 500ms	> 500ms
CLS	< 0.1	0.1 - 0.25	> 0.25
TTFB	< 800ms	800ms - 1800ms	> 1800ms
Total JS	< 200KB gz	200-350KB gz	> 350KB gz
Lighthouse	> 90	70 - 90	< 70

Quick Start

git clone https://github.com/mj11rock/nuxt-performance-toolkit.git
cd nuxt-performance-toolkit
npm install

Usage

Bundle Analysis

# Generate bundle report
npm run analyze

# Compare against baseline
npm run analyze:compare

Lighthouse CI

# Run Lighthouse audit
npm run lighthouse

# Run in CI (fails on budget violations)
npm run lighthouse:ci

Performance Monitoring

# Start RUM data collection
npm run monitor:start

# Generate performance report
npm run monitor:report

SSR Performance Patterns

Route-level rendering strategy

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/about': { prerender: true },
    '/dashboard/**': { ssr: true },
    '/api/**': { cors: true },
    '/blog/**': { isr: 3600 },
  }
})

Payload optimization

• Minimize useAsyncData payload size — fetch only what the page needs
• Use pick option to select specific fields from API responses
• Defer non-critical data with lazy: true

Results

Example improvements from a banking web application:

Metric	Before	After	Improvement
LCP	4.2s	1.8s	57% faster
Total JS	420KB	180KB	57% smaller
TTFB	1.2s	0.3s	75% faster
Lighthouse	62	94	+32 points

Monitoring

Setting up continuous tracking

1. Configure Lighthouse CI in GitHub Actions
2. Set up RUM with web-vitals library
3. Create Grafana dashboard for performance metrics
4. Set alerts for regression thresholds

Tech Stack

Tool	Purpose
Lighthouse CI	Automated performance auditing
web-vitals	Real User Monitoring
webpack-bundle-analyzer	Bundle visualization
Workbox	Service worker / caching
@nuxt/image	Image optimization