Modern Web Performance Optimization

The Business Impact:

• •Conversion rates: Pinterest's engineering team reported that reducing load times by 40% led to a 15% increase in search traffic and sign-ups (Pinterest Engineering Blog).
• •User retention: BBC's engineering team found they lost an additional 10% of users for every extra second their site took to load (presented at Velocity Conference).
• •SEO rankings: Google officially confirmed Core Web Vitals as ranking factors in 2021. Faster sites rank higher.
• •Revenue impact: Amazon famously calculated that every 100ms of added latency costs them 1% in sales, a finding first reported by Greg Linden at AWS.

Optimization Strategies:

• 1.Optimize images: Use modern formats (WebP, AVIF), proper sizing, and lazy loading.
• 2.Preload critical resources: Use <link rel="preload"> for fonts, hero images, and critical CSS.
• 3.Minimize render-blocking resources: Defer or async load non-critical JavaScript and CSS.
• 4.Use server-side rendering: Next.js SSR/SSG delivers content instantly.
• 5.Implement CDN: Serve static assets from edge locations close to users.

// Next.js Image optimization for better LCP:
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero-image.jpg"
      alt="Hero image"
      width={1200}
      height={600}
      priority              // Preload above-the-fold image
      quality={85}          // Balance quality and file size
      placeholder="blur"    // Show blur placeholder while loading
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// Preload critical fonts:
// In app/layout.tsx or _document.tsx
<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

Optimization Strategies:

• 1.Reduce JavaScript execution time: Break up long tasks into smaller chunks.
• 2.Code splitting: Load only the JavaScript needed for the current page.
• 3.Defer non-critical JavaScript: Load analytics and third-party scripts after main content.
• 4.Use web workers: Offload heavy computations to background threads.
• 5.Minimize third-party impact: Load third-party scripts asynchronously.

// Dynamic imports for code splitting:
import { lazy, Suspense } from 'react';

// Only load when needed:
const HeavyComponent = lazy(() => import('./HeavyComponent'));

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// Web Worker for heavy computation:
// worker.ts
self.onmessage = (e: MessageEvent) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url));
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

Optimization Strategies:

• 1.Set explicit dimensions: Always specify width and height for images and videos.
• 2.Reserve space for ads: Use min-height to prevent content jumping.
• 3.Avoid inserting content above existing content: Load dynamic content at the bottom or in place.
• 4.Preload fonts: Prevent font swap layout shifts.
• 5.Use CSS aspect-ratio: Reserve space for responsive images.

// Prevent CLS with explicit dimensions:
<Image
  src="/product.jpg"
  width={800}
  height={600}    // Always specify both!
  alt="Product"
/>

// CSS aspect-ratio for responsive images:
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

// Reserve space for dynamic content:
.ad-container {
  min-height: 250px;
  width: 100%;
}

// Font loading strategy:
// next.config.js
module.exports = {
  experimental: {
    optimizeFonts: true,
  },
};

// Font CSS:
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap; // or 'optional' for better CLS
}

// Next.js automatically splits code by route:
// app/dashboard/page.tsx loads separately from app/home/page.tsx

// Dynamic imports for component-level splitting:
const Charts = dynamic(() => import('@/components/Charts'), {
  loading: () => <Skeleton />,
  ssr: false, // Don't render on server
});

// Conditional loading:
const AdminPanel = dynamic(
  () => import('@/components/AdminPanel'),
  { ssr: false }
);

function Dashboard({ user }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {user.isAdmin && <AdminPanel />}
    </div>
  );
}

// Tree shaking: Import only what you need
// ✗ BAD: Imports entire lodash library
import _ from 'lodash';

// ✓ GOOD: Imports only specific function
import debounce from 'lodash/debounce';

// Next.js automatically minifies in production:
// next.config.js
module.exports = {
  swcMinify: true, // Use SWC compiler (faster than Terser)

  compress: true,

  // Enable gzip/brotli compression:
  experimental: {
    compress: true,
  },
};

// Bundle analysis:
// Install: npm install @next/bundle-analyzer
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // ... your config
});

// Run: ANALYZE=true npm run build
// Opens visualization of bundle sizes

• •Use Tailwind CSS: Purges unused styles automatically in production.
• •Critical CSS: Inline critical above-the-fold styles.
• •Defer non-critical CSS: Load additional styles asynchronously.
• •Remove unused CSS: Use PurgeCSS for traditional CSS.

• •WebP: 25-35% smaller than JPEG with similar quality. Supported by all modern browsers.
• •AVIF: 50% smaller than JPEG. Newer format with growing support.
• •SVG: Use for logos, icons, and simple graphics. Infinitely scalable.

// Next.js Image component handles format conversion:
import Image from 'next/image';

<Image
  src="/photo.jpg"  // Automatically serves WebP/AVIF if supported
  width={800}
  height={600}
  quality={85}
  alt="Description"
/>

// Responsive images with srcset:
<Image
  src="/photo.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Description"
/>

// Lazy loading (default for Next.js Image):
<Image
  src="/below-fold.jpg"
  width={800}
  height={600}
  loading="lazy"  // Default behavior
  alt="Description"
/>

// Priority loading for above-the-fold images:
<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority  // Preload this image
  alt="Hero"
/>

• •Cloudinary: Automatic format conversion, resizing, and optimization.
• •Cloudflare Images: Fast global delivery with automatic optimization.
• •Vercel Image Optimization: Built-in with Next.js deployments.

// next.config.js - Set cache headers:
module.exports = {
  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/api/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-store, must-revalidate',
          },
        ],
      },
    ];
  },
};

// Cache-Control directives:
// max-age=31536000  → Cache for 1 year
// immutable         → Never revalidate
// no-store          → Never cache
// must-revalidate   → Check server before using cached version

// Redis caching for API responses:
import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

export async function GET(request: Request) {
  const cacheKey = 'api:users:list';

  // Try cache first:
  const cached = await redis.get(cacheKey);
  if (cached) {
    return Response.json(JSON.parse(cached), {
      headers: { 'X-Cache': 'HIT' },
    });
  }

  // Fetch from database:
  const users = await db.users.findMany();

  // Cache for 5 minutes:
  await redis.setex(cacheKey, 300, JSON.stringify(users));

  return Response.json(users, {
    headers: { 'X-Cache': 'MISS' },
  });
}

// Next.js built-in caching:
export const revalidate = 3600; // Revalidate every hour

export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 }
  });
  return <div>{/* ... */}</div>;
}

Recommended CDN Providers:

• •Cloudflare: Free tier, 300+ data centers, automatic optimization.
• •Vercel Edge Network: Automatic with Next.js deployments.
• •AWS CloudFront: Global reach, integrates with AWS services.

• •Run Lighthouse audits regularly (Chrome DevTools or CLI)
• •Test on real devices, not just desktop emulation
• •Use throttled network conditions to simulate real-world scenarios
• •Track performance over time, not just one-off audits

// Web Vitals library:
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  fetch('/api/analytics', {
    body,
    method: 'POST',
    keepalive: true,
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

// Vercel Analytics (built-in):
import { Analytics } from '@vercel/analytics/react';

export default function App() {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

// Set performance budgets in Lighthouse:
// .lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "first-contentful-paint": ["error", { "maxNumericValue": 2000 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time": ["error", { "maxNumericValue": 300 }],
        "interactive": ["error", { "maxNumericValue": 3500 }]
      }
    }
  }
}

// Bundle size limits:
// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.optimization = {
        ...config.optimization,
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            default: false,
            vendors: false,
            commons: {
              name: 'commons',
              chunks: 'all',
              minChunks: 2,
            },
          },
        },
      };
    }
    return config;
  },
};

// Install Workbox for Next.js:
// npm install next-pwa

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
});

module.exports = withPWA({
  // ... your config
});

// This enables:
// - Offline page caching
// - Static asset caching
// - API response caching
// - Background sync

// Next.js Link prefetches by default:
import Link from 'next/link';

<Link href="/dashboard" prefetch>
  Dashboard
</Link>

// Programmatic prefetch:
import { useRouter } from 'next/router';

function Component() {
  const router = useRouter();

  useEffect(() => {
    router.prefetch('/dashboard');
  }, [router]);
}

// Preload critical resources:
<link rel="preload" href="/fonts/font.woff2" as="font" crossOrigin="anonymous" />
<link rel="preload" href="/hero.jpg" as="image" />

// DNS prefetch for external domains:
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin />

• •preload: Fetch critical resources early
• •prefetch: Fetch resources likely to be needed soon
• •preconnect: Establish early connections to third-party origins
• •dns-prefetch: Resolve DNS early for third-party domains

1. Enable Next.js Image optimization for all images
2. Implement code splitting with dynamic imports
3. Add proper cache headers for static assets
4. Use CDN for global content delivery
5. Optimize fonts with preloading and font-display
6. Defer non-critical JavaScript
7. Minimize third-party script impact
8. Set explicit dimensions on images and videos
9. Enable compression (gzip/brotli)
10. Monitor Core Web Vitals with RUM
11. Set performance budgets and automate testing
12. Optimize database queries and add caching