Core Web Vitals: why your site's speed is money

If your site is slow to load or "jumps around" as it assembles, you lose visitors before they even see what you offer. Google knows this, which is why it measures the experience with Core Web Vitals.

The three metrics that matter

• LCP (Largest Contentful Paint): how long the main content takes to appear. Target: under 2.5 seconds. The hero image or main heading is usually the LCP element.
• INP (Interaction to Next Paint): how quickly your site responds when the user clicks or types. Target: under 200 ms. Poor INP feels like a "stuck" site.
• CLS (Cumulative Layout Shift): how much content shifts unexpectedly. Target: under 0.1. This is what happens when an element appears out of nowhere and pushes everything down.

Why they're money

It's not just SEO. Every tenth of a second of delay cuts conversions. A site that loads in 1.5 s sells more than one that loads in 4 s, even when they're selling the exact same thing.

• Amazon calculated that every 100 ms of delay cost them 1% in sales.
• Google found that going from 1 s to 3 s load time increases bounce rate by 32%.

Speed isn't a technical detail: it's part of the buying experience.

How to improve LCP

LCP is usually a large image or text. To improve it:

1. Preload the hero image: use fetchPriority="high" and a <link rel="preload"> tag.
2. Serve images in WebP or AVIF: they're 30-50% lighter than JPEG with no quality loss.
3. Optimize the server: use a CDN and Brotli compression.
4. Reduce render-blocking CSS: critical CSS should be inlined, and the rest deferred.

How to improve INP

INP measures how quickly your site responds to clicks and taps. The most common causes:

• Heavy JavaScript on the main thread: break code into smaller chunks and use requestIdleCallback for non-urgent tasks.
• Complex animations: prefer CSS animations over JavaScript for simple movements.
• Long tasks: if a function takes more than 50 ms, look for ways to split it up.

How to prevent CLS

CLS happens when elements move after the user has already seen them:

• Explicit dimensions: always set width and height on images and videos.
• Reserved space: for fonts, banners, embeds, and third-party widgets.
• Avoid late inserts: don't inject content above what the user is already viewing.

Tools to measure

You can monitor your Core Web Vitals with:

• PageSpeed Insights: gives you a full diagnostic and optimization opportunities.
• Search Console: the Core Web Vitals report shows which pages have issues based on real-user data.
• CrUX (Chrome User Experience Report): real data from millions of Chrome users.
• Lighthouse: built into Chrome DevTools for local testing.