Core Web Vitals Explained: LCP, INP & CLS (and How to Fix Them)

The three metrics

• LCP (Largest Contentful Paint): how long until the main content shows. Good: under 2.5 seconds.
• INP (Interaction to Next Paint): how quickly the page responds to taps and clicks. Good: under 200 milliseconds.
• CLS (Cumulative Layout Shift): how much the layout jumps. Good: under 0.1.

Lab tools like Lighthouse also report TBT (Total Blocking Time), which is a good stand-in for INP during testing.

Fixing slow LCP

1. Compress the hero image and serve it as WebP or AVIF.
2. Do not lazy-load the hero image; preload it instead.
3. Use page caching and a CDN to cut server response time.
4. Remove or defer render-blocking CSS and JavaScript.

Fixing poor INP and high TBT

• Remove unused plugins, widgets and third-party scripts.
• Defer non-critical JavaScript.
• Break up long tasks; avoid heavy work on every click.

Fixing layout shift

• Set width and height on images, videos and iframes.
• Reserve space for ads and embeds.
• Use font-display: swap with matching fallback fonts.

Lab vs field data

Lab data comes from a single simulated test and is great for debugging. Field data comes from real Chrome users over 28 days and is what Google uses for rankings. A EmojiCry report shows both when field data exists.