Only 47% of websites pass Google's Core Web Vitals thresholds. Every second of delay in load time reduces conversions by 7%. E-commerce sites that pass all three metrics see 15-30% better conversion rates than those that fail. This is not abstract SEO theory. It is money.
What Core Web Vitals actually are
Google uses three metrics to evaluate user experience and factor them into search rankings. The March 2026 core update increased the weight of these signals. Here is what each one measures:
LCP: Largest Contentful Paint
How long until the largest visible element (usually the hero image or headline) appears. Good: under 2.5 seconds. Poor: over 4 seconds. 58% of sites currently pass.
INP: Interaction to Next Paint
How quickly the page responds after a user interacts with it (click, tap, keystroke). Replaced FID in March 2024. Good: under 200ms. Poor: over 500ms. 43% of sites fail this.
CLS: Cumulative Layout Shift
How much the page layout jumps around while loading. That annoying experience where you click a link and an ad loads above it, pushing everything down. Good: under 0.1. 75% of sites pass this one.
Only 33% of sites pass all three. If your site is in the 67% that fails one or more, Google is actively ranking you below sites that pass.
How to check your site right now
Google PageSpeed Insights gives you field data (real user measurements from Chrome) and lab data (synthetic test). Go to pagespeed.web.dev and paste your URL. The results page shows your current scores and flags the specific elements causing failures.
The field data is what Google actually sees from real users on your site. If you do not have enough traffic for field data, the lab data gives a reasonable estimate. Focus on field data when it is available.
LCP: the largest element loads too slowly
LCP is almost always caused by a hero image or background image that loads slowly. The quick wins: convert to WebP or AVIF (a JPG at 800KB becomes 200KB with no visible quality loss, and next/image handles this automatically), and add fetchpriority="high" to the element that is your LCP. That attribute tells the browser to download that specific resource before everything else. Without it, the browser treats the LCP image with the same priority as decorative images below the fold.
The other common culprit: render-blocking resources. CSS and JavaScript in the<head> block the browser from rendering anything until they finish downloading. Move non-critical CSS to load asynchronously. Defer or async third-party scripts. If you have a chat widget or analytics tag loading before your hero image, that is your LCP problem right there. And use a CDN for static assets: an image served from an edge node in Dubai loads significantly faster than one served from a US data center for MENA visitors.
INP: the page is slow to respond to clicks
INP is the hardest to fix because the culprit is almost always JavaScript you did not know was expensive. JavaScript runs on a single thread. If an event handler triggers a calculation that takes 300ms, the page freezes for those 300ms before updating. From the user's perspective, their click did nothing.
The most common source of INP failures: third-party scripts. Analytics, chat widgets, ad tags, and social buttons all compete for the same main thread. They run alongside your code. Opening Chrome DevTools → Performance → recording a click interaction will show you exactly which tasks are blocking the thread. Usually it is something you imported six months ago and forgot about.
Fixes: break long tasks into smaller chunks using setTimeout orscheduler.yield(), clean up event listeners when components unmount (React does not do this automatically for listeners added via addEventListener), and audit every third-party script for necessity. Defer or sandbox the ones you cannot remove.
CLS: things jumping around on load
CLS has the highest pass rate, but it is the one users notice most viscerally. You go to click a link and an ad loads above it, pushing the link down. You click the wrong thing. It is annoying, and it is directly caused by elements loading and pushing existing content around.
The fix is almost always one of three things. Images without explicitwidth and height attributes: the browser does not reserve space until the image loads, so everything shifts when it appears. Fonts that swap: when a custom font replaces the system fallback, if the metrics differ, text reflows. Use font-display: optional or match your fallback font sizing. And dynamically injected banners, cookie notices, or ads: reserve the space in the layout before the content loads, so nothing shifts.
The business case
The numbers are consistent across studies. A 1-second delay: 7% fewer conversions. A 3-second delay on mobile: 53% of visitors leave before the page loads. E-commerce sites that pass all Core Web Vitals benchmarks see 15-30% improvement in conversion rates.
If your site gets 500 visitors per month and converts at 2%, that is 10 customers. Improving your CWV to pass all three metrics could realistically push that to 11-13 customers from the same traffic. Over a year, that is meaningful without spending a dollar more on advertising.
$ fix --performance-issues
If your site is failing CWV and you'd rather not spend a weekend debugging image loading and script blocking, I can handle it.
$ ./request-performance-fix.sh →