How to Improve Your Core Web Vitals (LCP, INP, CLS)

Core Web Vitals are three metrics Google uses as direct ranking signals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Sites that fail these metrics lose rankings, and frustrate users.

The three metrics

LCP: Largest Contentful Paint

Time until the biggest visible element (usually a hero image or headline) finishes rendering. Good: < 2.5 s. Poor: > 4 s.

How to fix: serve the hero image in modern formats (AVIF / WebP), set fetchpriority="high", preload critical fonts, defer non-critical JavaScript, use a CDN.

INP: Interaction to Next Paint

Longest observed delay between a user interaction (tap, click, keypress) and the next visual update. Replaced FID in March 2024. Good: < 200 ms. Poor: > 500 ms.

How to fix: break up long JavaScript tasks (> 50 ms), defer non-essential third-party scripts, use requestIdleCallback for non-urgent work, audit event handlers for heavy synchronous work.

CLS: Cumulative Layout Shift

How much visible content unexpectedly shifts during page load. Good: < 0.1. Poor: > 0.25.

How to fix: always set width and height on images and iframes, reserve space for ads / embeds with CSS aspect-ratio, avoid inserting content above existing content after load.

How to measure

1. Lab: Lighthouse (Chrome DevTools), PageSpeed Insights, WebPageTest, synthetic runs from a clean environment.
2. Field: Chrome User Experience Report (CrUX), Search Console's Core Web Vitals report, web-vitals JS library - real-user data.

Google ranks based on field data, not lab data. Lab scores are for debugging; field scores are what move rankings.

The 80/20 fix list

• Compress and resize images; serve AVIF/WebP with a JPEG fallback.
• Add width/height to every <img>.
• Preload your hero image and web fonts.
• Defer third-party scripts (analytics, chat widgets, ads) with async or defer.
• Self-host fonts or use font-display: swap.
• Enable HTTP/2 and brotli compression on your server.

AuditAI checks all six Core Web Vitals signals (and their common root causes) in every audit. Run one now →