Nextjs Performance Audit

Next.js Performance Audit

Audit Type: $ARGUMENTS

Current Application Analysis

Application State

• Build status: !ls -la .next/ 2>/dev/null || echo "No build found - run 'npm run build' first"
• Application running: !curl -s http://localhost:3000 > /dev/null && echo "App is running" || echo "App not running - start with 'npm run dev'"
• Bundle analysis: !ls -la .next/analyze/ 2>/dev/null || echo "No bundle analysis found"

Project Configuration

• Next.js config: @next.config.js
• Package.json: @package.json
• TypeScript config: @tsconfig.json (if exists)
• Vercel config: @vercel.json (if exists)

Performance Monitoring Setup

• Web Vitals: Check for @next/web-vitals or similar
• Analytics: Check for Vercel Analytics or Google Analytics
• Monitoring tools: Check for Sentry, DataDog, or other APM tools

Performance Audit Framework

1. Lighthouse Audit

# Install Lighthouse CLI if not available
npm install -g lighthouse

# Run Lighthouse audit
lighthouse http://localhost:3000 \
  --output=json \
  --output=html \
  --output-path=./performance-audit \
  --chrome-flags="--headless" \
  --preset=perf

# Mobile performance audit
lighthouse http://localhost:3000 \
  --output=json \
  --output-path=./performance-audit-mobile \
  --preset=perf \
  --form-factor=mobile \
  --throttling-method=devtools \
  --chrome-flags="--headless"

# Generate detailed report
lighthouse http://localhost:3000 \
  --output=html \
  --output-path=./lighthouse-report.html \
  --view

2. Bundle Analysis

// next.config.js - Enable bundle analysis
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // ... your config
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Bundle analysis optimizations
    if (!dev && !isServer) {
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          },
        },
      };
    }
    return config;
  },
});

3. Runtime Performance Analysis

# Build and analyze bundle
ANALYZE=true npm run build

# Check bundle sizes
ls -lah .next/static/chunks/ | grep -E "\\.js$" | sort -k5 -hr | head -10

# Analyze dependencies
npm ls --depth=0 --prod | grep -v "deduped"

# Check for duplicate dependencies
npm ls --depth=0 | grep -E "UNMET|invalid"

Performance Metrics Collection

1. Core Web Vitals Implementation

// lib/analytics.ts
export function reportWebVitals({ id, name, label, value }: any) {
  // Send to analytics service
  if (typeof window !== 'undefined') {
    // Client-side reporting
    fetch('/api/analytics/web-vitals', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id,
        name,
        label,
        value,
        url: window.location.href,
        timestamp: Date.now(),
      }),
    }).catch(console.error);
  }
}

// Track specific metrics
export function trackMetric(name: string, value: number, labels?: Record<string, string>) {
  reportWebVitals({
    id: `${name}-${Date.now()}`,
    name,
    label: 'custom',
    value,
    ...labels,
  });
}

// Performance observer for custom metrics
export function initPerformanceObserver() {
  if (typeof window === 'undefined') return;
  
  // Largest Contentful Paint
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      trackMetric('LCP', entry.startTime);
    }
  }).observe({ entryTypes: ['largest-contentful-paint'] });
  
  // First Input Delay
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      trackMetric('FID', entry.processingStart - entry.startTime);
    }
  }).observe({ entryTypes: ['first-input'] });
  
  // Cumulative Layout Shift
  new PerformanceObserver((entryList) => {
    let clsValue = 0;
    for (const entry of entryList.getEntries()) {
      if (!entry.hadRecentInput) {
        clsValue += entry.value;
      }
    }
    trackMetric('CLS', clsValue);
  }).observe({ entryTypes: ['layout-shift'] });
}

2. Server-Side Performance Monitoring

// middleware.ts - Performance monitoring
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const start = Date.now();
  
  const response = NextResponse.next();
  
  // Add performance headers
  response.headers.set('X-Response-Time', `${Date.now() - start}ms`);
  response.headers.set('X-Timestamp', new Date().toISOString());
  
  return response;
}

Performance Analysis Areas

1. Loading Performance

// Analyze loading performance
const loadingPerformanceAudit = {
  // First Contentful Paint (FCP)
  fcp: {
    target: '< 1.8s',
    current: '?', // From Lighthouse
    optimizations: [
      'Optimize critical rendering path',
      'Inline critical CSS',
      'Preload key resources',
      'Minimize render-blocking resources',
    ],
  },
  
  // Largest Contentful Paint (LCP)
  lcp: {
    target: '< 2.5s',
    current: '?', // From Lighthouse
    optimizations: [
      'Optimize images (Next.js Image component)',
      'Preload LCP element',
      'Optimize server response time',
      'Use CDN for static assets',
    ],
  },
  
  // Time to Interactive (TTI)
  tti: {
    target: '< 3.8s',
    current: '?', // From Lighthouse
    optimizations: [
      'Reduce JavaScript bundle size',
      'Code splitting',
      'Remove unused code',
      'Optimize third-party scripts',
    ],
  },
  
  // Speed Index
  speedIndex: {
    target: '< 3.4s',
    current: '?', // From Lighthouse
    optimizations: [
      'Optimize above-the-fold content',
      'Progressive image loading',
      'Critical resource prioritization',
    ],
  },
};

2. Runtime Performance

// Runtime performance analysis
const runtimePerformanceAudit = {
  // First Input Delay (FID)
  fid: {
    target: '< 100ms',
    current: '?',
    optimizations: [
      'Reduce JavaScript execution time',
      'Break up long tasks',
      'Use web workers for heavy computation',
      'Optimize event handlers',
    ],
  },
  
  // Cumulative Layout Shift (CLS)
  cls: {
    target: '< 0.1',
    current: '?',
    optimizations: [
      'Set dimensions for media elements',
      'Reserve space for ads/embeds',
      'Avoid dynamic content insertion',
      'Use CSS transforms for animations',
    ],
  },
  
  // Total Blocking Time (TBT)
  tbt: {
    target: '< 200ms',
    current: '?',
    optimizations: [
      'Code splitting',
      'Remove unused polyfills',
      'Optimize third-party code',
      'Use setTimeout for heavy operations',
    ],
  },
};

3. Bundle Performance

// Bundle analysis report
const bundleAnalysis = {
  totalSize: '?', // From webpack-bundle-analyzer
  firstLoadJS: '?', // Critical for performance
  chunks: {
    main: '?',
    framework: '?',
    vendor: '?',
    pages: '?',
  },
  
  recommendations: [
    // Dynamic imports for code splitting
    {
      type: 'Dynamic Import',
      description: 'Use dynamic imports for non-critical components',
      example: `
        const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
          loading: () => <Loading />,
          ssr: false
        });
      `,
    },
    
    // Tree shaking optimization
    {
      type: 'Tree Shaking',
      description: 'Import only needed functions from libraries',
      example: `
        // ❌ Imports entire library
        import * as _ from 'lodash';
        
        // ✅ Import only needed functions
        import { debounce, throttle } from 'lodash';
      `,
    },
    
    // Bundle splitting
    {
      type: 'Bundle Splitting',
      description: 'Optimize webpack chunk splitting',
      example: `
        module.exports = {
          webpack: (config, { isServer }) => {
            if (!isServer) {
              config.optimization.splitChunks.cacheGroups = {
                vendor: {
                  test: /[\\/]node_modules[\\/]/,
                  name: 'vendors',
                  chunks: 'all',
                },
              };
            }
            return config;
          },
        };
      `,
    },
  ],
};

Optimization Recommendations

1. Image Optimization

// Image optimization analysis
const imageOptimization = {
  // Next.js Image component usage
  nextImageUsage: 'Analyze usage of next/image vs <img>',
  
  recommendations: [
    {
      priority: 'High',
      description: 'Replace <img> tags with Next.js Image component',
      implementation: `
        import Image from 'next/image';
        
        // ❌ Regular img tag
        <img src="/hero.jpg" alt="Hero" />
        
        // ✅ Next.js Image component
        <Image
          src="/hero.jpg"
          alt="Hero"
          width={1200}
          height={600}
          priority={true} // For above-the-fold images
          placeholder="blur"
          blurDataURL="data:image/jpeg;base64,..."
        />
      `,
    },
    {
      priority: 'Medium',
      description: 'Implement responsive images with sizes prop',
      implementation: `
        <Image
          src="/hero.jpg"
          alt="Hero"
          width={1200}
          height={600}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      `,
    },
    {
      priority: 'Low',
      description: 'Configure custom image loader for CDN',
      implementation: `
        // next.config.js
        module.exports = {
          images: {
            loader: 'cloudinary',
            path: 'https://res.cloudinary.com/demo/image/fetch/',
          },
        };
      `,
    },
  ],
};

2. CSS Optimization

/* Critical CSS analysis */
.critical-css-audit {
  /* Above-the-fold styles that should be inlined */
}

/* Non-critical CSS that can be loaded asynchronously */
.non-critical-css {
  /* Styles for below-the-fold content */
}

// CSS optimization recommendations
const cssOptimization = {
  recommendations: [
    {
      type: 'Critical CSS',
      description: 'Inline critical CSS for faster initial render',
      implementation: 'Use styled-jsx or CSS-in-JS for critical styles',
    },
    {
      type: 'CSS Modules',
      description: 'Use CSS Modules to avoid global namespace pollution',
      implementation: 'Import styles as modules: import styles from "./Component.module.css"',
    },
    {
      type: 'Tailwind Purging',
      description: 'Ensure unused Tailwind classes are purged',
      implementation: 'Configure purge in tailwind.config.js',
    },
  ],
};

3. JavaScript Optimization

``typescript

// JavaScript optimization analysis

const jsOptimization = {

recommendations: [

{

priority: 'High',

type: 'Code Splitting',

description: 'Implement route-based and component-based code splitting',

example:

// Route-based splitting (automatic with Next.js pages)

// Component-based splitting

const LazyComponent = dynamic(() => import('./LazyComponent'));

// Conditional loading

const AdminPanel = dynamic(() => import('./AdminPanel'), {

ssr: false,

loading: () => ,

});

,

},

{

priority: 'Medium',

type: 'Tree Shaking',

description: 'Ensure unused code is eliminated',

example:

// ❌ Imports entire library

import moment from 'moment';

// ✅ Use tree-shakable alternative

import { format } from 'date-fns';

// ✅ Or import specific functions

import debounce from 'lodash/debounce';

`,

},

{

priority: 'Medium',