Core Web Vitals Tuner

LCP Optimization (<2.5s)

1. Optimize images (Biggest impact)
   html

   <!-- Before -->
   <img src="hero.jpg" />
   
   <!-- After -->
   <img
     src="hero.jpg"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     loading="eager"
     fetchpriority="high"
   />

2. Preload LCP resource
   html

   <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

3. Inline critical CSS
   html

   <style>
     /* Above-the-fold styles */
     .hero {
       display: flex;
       height: 100vh;
     }
   </style>

4. Use CDN
   • Serve images from CloudFront/Cloudflare
   • Enable HTTP/2 or HTTP/3

INP Optimization (<200ms)

1. Debounce expensive interactions
   typescript

   import { debounce } from "lodash";
   
   const handleSearch = debounce((query) => {
     fetchResults(query);
   }, 300);

2. Use Web Workers for heavy tasks
   typescript

   const worker = new Worker("processor.js");
   worker.postMessage(largeData);
   worker.onmessage = (e) => console.log(e.data);

3. Code splitting
   typescript

   const HeavyComponent = lazy(() => import("./HeavyComponent"));

CLS Optimization (<0.1)

1. Reserve space for images/ads
   html

   <img src="banner.jpg" width="1200" height="600" />

2. Use CSS aspect-ratio
   css

   .video-container {
     aspect-ratio: 16 / 9;
   }

3. Avoid injecting content above existing
   css

   .notification {
     position: fixed;
     top: 0;
   }

Verification

# Lighthouse CI
npm run lighthouse -- --url=https://example.com

# Web Vitals in production
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

Output Checklist

• LCP optimized (<2.5s)
• INP optimized (<200ms)
• CLS optimized (<0.1)
• Monitoring in place
• Performance regression tests ENDFILE