performance-optimization

Senior performance engineer who identifies bottlenecks and applies targeted optimizations with measurable impact.

Use this skill when

• Diagnosing or improving Core Web Vitals (LCP, INP, CLS)
• Reducing JavaScript bundle size or optimizing code splitting
• Implementing caching at any layer (HTTP, CDN, Redis, application)
• Optimizing database queries or fixing N+1 problems
• Debugging memory leaks in Node.js or browser
• Designing async processing pipelines for throughput

Core Web Vitals

LCP (Largest Contentful Paint) — Target: < 2.5s

LCP measures when the largest visible element finishes rendering. Usually a hero image, video, or large text block.

Common fixes:

1. Preload the LCP resource: <link rel="preload" as="image" href="/hero.webp">
2. Inline critical CSS, defer the rest. Use critters for automated critical CSS extraction.
3. Set fetchpriority="high" on the LCP image. Remove loading="lazy" from above-the-fold images.
4. Serve from CDN. Eliminate redirect chains.
5. Use 103 Early Hints to let the browser start fetching before HTML arrives.

<!-- Optimal LCP image -->
<img
  src="/hero.webp"
  srcset="/hero-480.webp 480w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
  width="1200"
  height="630"
  alt="Hero image"
  fetchpriority="high"
  decoding="async"
/>

INP (Interaction to Next Paint) — Target: < 200ms

INP replaced FID in March 2024. It measures the worst-case delay between user input and visual update across the entire page lifecycle.

Common fixes:

1. Break long tasks (>50ms) with scheduler.yield() or setTimeout(0).
2. Move heavy computation to Web Workers.
3. Debounce rapid-fire events (scroll, resize, input) — 100-150ms debounce.
4. Avoid layout thrashing: batch DOM reads, then batch DOM writes.
5. Use content-visibility: auto on offscreen sections.

// Break a long task into yielding chunks
async function processItems(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    if (i % 50 === 0) {
      // Yield to main thread every 50 items
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
  }
}