core-web-vitals

# Core Web Vitals optimization Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience. ## The three metrics | Metric | Measures | Good | Needs work | Poor | |--------|----------|------|------------|------| | **LCP** | Loading | ≤ 2.5s | 2.5s – 4s | > 4s | | **INP** | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms | | **CLS** | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 | Google measures at the **75th percentile** — 75% of page visits must meet "Good" thresholds. --- ## LCP: Largest Contentful Paint LCP measures when the largest visible content element renders. Usually this is: - Hero image or video - Large text block - Background image - `<svg>` element ### Common LCP issues **1. Slow server response (TTFB > 800ms)** ``` Fix: CDN, caching, optimized backend, edge rendering ``` **2. Render-blocking resources** ```html <!-- ❌ Blocks rendering --> <link rel="stylesheet" href="/all-styles.css"> <!-- ✅ Critical CSS inlined, rest deferred --> <style>/* Critical above-fold CSS */</style> <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> ``` **3. Slow resource load times** ```html <!-- ❌ No hints, discovered late --> <img src="/hero.jpg" alt="Hero"> <!-- ✅ Preloaded with high priority --> <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> <img src="/hero.webp" alt="Hero" fetchpriority="high"> ``` **4. Client-side rendering delays*...