Performance - Web Optimization

Build fast, responsive web experiences

When to Use This Skill

Use this skill when:

• Optimizing Core Web Vitals (LCP, INP, CLS)
• Implementing code splitting and lazy loading
• Optimizing images and assets
• Setting up caching strategies
• Monitoring performance metrics

Critical Patterns

Pattern 1: Optimize LCP

When: Improving largest contentful paint

Good:

<!-- Prioritize LCP image -->
<img
  src="/hero.jpg"
  fetchpriority="high"
  loading="eager"
/>

<!-- Preload critical resources -->
<link rel="preload" href="/hero.jpg" as="image" />

// Next.js optimization
<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority
/>

Target: < 2.5 seconds

Pattern 2: Reduce INP

When: Improving interaction responsiveness

Good:

// Break up long tasks
function processChunk(data, index = 0) {
  if (index >= data.length) return;

  processItem(data[index]);
  setTimeout(() => processChunk(data, index + 1), 0);
}

// Debounce expensive operations
const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

Target: < 200ms

Pattern 3: Prevent CLS

When: Ensuring visual stability

Good:

<!-- Always specify dimensions -->
<img src="/image.jpg" width="800" height="600" />

<!-- Reserve space for dynamic content -->
<div style="min-height: 250px;">
  <!-- Ad or dynamic content -->
</div>

// Show skeleton while loading
if (isLoading) {
  return <div className="skeleton" style={{ height: '300px' }} />;
}

Target: < 0.1

Pattern 4: Code Splitting

When: Reducing initial bundle size

Good:

// Dynamic imports
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {showChart && <HeavyComponent />}
    </Suspense>
  );
}

Why: Load code only when needed, reducing initial load time.

Pattern 5: Image Optimization

When: Optimizing images

Good:

<!-- Modern formats with fallbacks -->
<picture>
  <source srcset="/image.avif" type="image/avif" />
  <source srcset="/image.webp" type="image/webp" />
  <img src="/image.jpg" alt="Description" />
</picture>

<!-- Lazy loading -->
<img src="/image.jpg" loading="lazy" width="800" height="600" />

Why: Modern formats are 30-50% smaller than JPEG.

Code Examples

Example 1: Code Splitting with Dynamic Imports

import { lazy, Suspense } from 'react';

// Lazy load heavy components
const ChartComponent = lazy(() => import('./ChartComponent'));
const AnalyticsDashboard = lazy(() => import('./AnalyticsDashboard'));

export default function Dashboard() {
  const [showAnalytics, setShowAnalytics] = useState(false);

  return (
    <div>
      <h1>Dashboard</h1>

      <Suspense fallback={<div>Loading chart...</div>}>
        <ChartComponent />
      </Suspense>

      <button onClick={() => setShowAnalytics(true)}>
        Show Analytics
      </button>

      {showAnalytics && (
        <Suspense fallback={<div>Loading analytics...</div>}>
          <AnalyticsDashboard />
        </Suspense>
      )}
    </div>
  );
}

Example 2: Optimized Image Loading

import Image from 'next/image';

export function HeroSection() {
  return (
    <section>
      {/* LCP image - prioritize loading */}
      <Image
        src="/hero-banner.jpg"
        width={1200}
        height={600}
        priority
        alt="Hero banner"
      />

      {/* Below-the-fold images - lazy load */}
      <div className="grid grid-cols-3 gap-4 mt-8">
        {products.map(product => (
          <Image
            key={product.id}
            src={product.image}
            width={400}
            height={300}
            loading="lazy"
            alt={product.name}
          />
        ))}
      </div>
    </section>
  );
}

For comprehensive examples and detailed implementations, see the references/ folder.

Quick Checklist

Images:

• ✅ Use WebP/AVIF with fallbacks
• ✅ Lazy load below-the-fold images
• ✅ Specify width and height
• ✅ Set fetchpriority="high" on LCP image

JavaScript:

• ✅ Code split by route
• ✅ Lazy load heavy components
• ✅ Tree shake unused code
• ✅ Defer non-critical scripts

Caching:

• ✅ Set Cache-Control headers
• ✅ Use CDN for static assets
• ✅ Implement service worker

Progressive Disclosure

For detailed implementations:

• Core Web Vitals - LCP, INP, CLS optimization strategies
• Optimization Techniques - Code splitting, image optimization, caching

References

• Core Web Vitals
• Optimization Techniques
• Web.dev Performance
• Core Web Vitals Guide

Maintained by dsmj-ai-toolkit