---

name: core-web-vitals-tuner description: Systematically improves Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) with prioritized fixes and verification. Use for "Core Web Vitals", "performance", "LCP", "INP", or "CLS".

Core Web Vitals Tuner

Improve LCP, INP, and CLS systematically.

LCP Optimization (<2.5s)

Prioritized Fixes:

1. Optimize images (Biggest impact)

   Copy<!-- 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

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

3. Inline critical CSS

   Copy<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)

Fixes:

1. Debounce expensive interactions

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

2. Use Web Workers for heavy tasks

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

3. Code splitting

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

CLS Optimization (<0.1)

Fixes:

1. Reserve space for images/ads

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

2. Use CSS aspect-ratio

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

3. Avoid injecting content above existing

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

Verification

Copy# 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