Core Web Vitals Tuner

Core Web Vitals Tuner

Improve LCP, INP, and CLS systematically.

LCP Optimization (<2.5s)

Prioritized Fixes:

1. Optimize images (Biggest impact)

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

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

3. Inline critical CSS

   <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

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

2. Use Web Workers for heavy tasks