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