Core Web Vitals Explained: LCP, CLS, INP (what to fix first)

Core Web Vitals (CWV) are Google’s way of measuring real-world experience. They’re not only a ranking input—they correlate strongly with revenue. Here’s what to watch and how to fix it.

Largest Contentful Paint (LCP)

Goal: < 2.5s (75th percentile of field data).

• Typical LCP elements: hero image, large heading, or featured block.
• Preload the LCP resource; serve it as .webp; set explicit dimensions.
• Inline critical CSS; defer non-critical scripts; reduce render-blocking fonts.

Cumulative Layout Shift (CLS)

Goal: < 0.1.

• Reserve space with width/height or aspect-ratio for images, embeds, ads.
• Avoid inserting banners above content after load; use sticky containers with reserved height.
• Don’t swap fonts without fallback metrics (or use font-display: optional).

Interaction to Next Paint (INP)

Goal: < 200ms.

• Break up long tasks; defer heavy hydration; use web workers where possible.
• Keep client bundles small; avoid synchronous third-party scripts on route change.
• Provide optimistic UI and avoid re-render storms on input.

Diagnose with the right data

• Field: Chrome UX Report (CrUX) + Search Console → what users actually feel.
• Lab: Lighthouse/PSI → controlled environment for debugging.
• Segment by template (home, product, category, blog) to find systemic issues.

Priorities & quick wins

• Preload the hero image & font; compress images; ship critical CSS.
• Defer third-party scripts; audit tags monthly and remove bloat.
• Stabilize ad/notification containers to kill CLS spikes.
• Track LCP/CLS/INP by route in your observability stack post-deploy.

Get a prioritized list of CWV fixes per URL with the SEA-IO Auditor. It combines PageSpeed data with AI-assisted, plain-English guidance.