Core Web Vitals Optimization Guide (2024)

Improve Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) with focused, actionable steps.

1) Fix Largest Contentful Paint (LCP)

• Optimize hero media: Serve next-gen formats (WebP/AVIF), correct dimensions, lazy-load non-hero images.
• Preload critical assets: Use link rel="preload" for hero image, main CSS, and key web font.
• Minimize render-blocking: Inline critical CSS, defer non-critical JS, remove unused CSS/JS.
• Use a fast CDN: Cache HTML, images, and fonts at the edge.

2) Fix Interaction to Next Paint (INP)

• Reduce main-thread work: Code-split, defer heavy libraries, move work to Web Workers.
• Event handlers: Debounce inputs, avoid long synchronous loops, prefer passive listeners for scroll/touch.
• Hydration: Use partial/streaming hydration (where applicable) and prioritize above-the-fold interactivity.
• Optimize third-parties: Remove unused scripts; load analytics with defer and after user interaction where possible.

3) Fix Cumulative Layout Shift (CLS)

• Reserve space: Always set width/height for images, videos, iframes, and ad slots.
• Fonts: Use font-display: swap; preload critical fonts; avoid late font swaps.
• UI injections: Don’t insert banners/toasts above existing content without space reservation.
• Animations: Prefer transform/opacity over properties that trigger layout.

Audit and Tooling

• Lighthouse (Lab): Check opportunities and diagnostics.
• PageSpeed Insights (Field + Lab): Verify CWV from Chrome UX Report.
• WebPageTest: Visualize critical path, waterfalls, and CPU time.
• Chrome DevTools: Performance panel to locate long tasks (>50ms).

Prioritized Checklist

1. Compress and preload hero image; inline critical CSS.
2. Defer non-critical JS; remove unused third-party scripts.
3. Set explicit dimensions for all media and embeds.
4. Code-split routes/components; lazy-load below-the-fold content.
5. Adopt a CDN; cache aggressively with immutable fingerprints.

Measuring Success

Track Core Web Vitals in Search Console. Aim for Good status on ≥75% of real-user visits. Re-test after each change and monitor regressions during deployments.