Core Web Vitals Explained: What They Are and How to Fix Them

Google has used Core Web Vitals as a ranking signal since 2021, yet most small business websites still fail at least one of the three metrics. If your client's site is slow or janky, this is costing them rankings right now.

The Three Core Web Vitals

LCP (Largest Contentful Paint)

What it measures: How long it takes for the biggest visible element (usually a hero image or heading) to finish loading.

Target: Under 2.5 seconds.

Common causes of poor LCP:

• Unoptimized images (no compression, wrong format)
• Slow server response time (TTFB over 800ms)
• Render-blocking JavaScript and CSS
• Third-party scripts loading before main content

INP (Interaction to Next Paint)

What it measures: How quickly the page responds when a user clicks, taps, or types. INP replaced FID (First Input Delay) in March 2024.

Target: Under 200 milliseconds.

Common causes of poor INP:

• Heavy JavaScript execution blocking the main thread
• Too many event listeners on interactive elements
• Complex DOM updates triggered by user actions
• Unoptimized third-party widgets (chat, popups, analytics)

CLS (Cumulative Layout Shift)

What it measures: How much the visible content shifts around while the page loads. Those annoying jumps when an ad or image loads late? That is CLS.

Target: Under 0.1.

Common causes of poor CLS:

• Images and videos without explicit width and height attributes
• Ads, embeds, or iframes injected without reserved space
• Web fonts causing text to reflow (FOIT/FOUT)
• Dynamic content inserted above existing content

How to Check Core Web Vitals

Google provides lab data through PageSpeed Insights and Lighthouse. For real-user field data, check the Chrome UX Report in Google Search Console.

LeadAuditPro's site audit includes Core Web Vitals scores alongside technical SEO findings, so you get the full picture in one report instead of bouncing between tools.

Quick Wins for Most Sites

• Convert images to WebP and add width/height attributes (fixes LCP + CLS)
• Defer non-critical JS with async or defer attributes (fixes LCP + INP)
• Use font-display: swap in @font-face rules (fixes CLS)
• Preload your LCP image with <link rel="preload">
• Reduce third-party scripts to only what you actually need