Core Web Vitals: Understanding and Improving Your Site's Performance

Core Web Vitals in a Nutshell

Since 2021, Google has used Core Web Vitals as a ranking factor. These are three metrics that measure the real user experience of your website. A slow or unstable site will be penalized in search results.

Understanding these metrics is the first step toward improving them.

The Three Essential Metrics

LCP — Largest Contentful Paint

What it measures: the time it takes for the largest visible element (image, heading, text block) to appear on screen.

Rating	Value
Good	Under 2.5 seconds
Needs improvement	2.5 to 4 seconds
Poor	Over 4 seconds

Common causes of poor LCP:

Unoptimized images (too large, wrong format)
Slow server (high response time)
CSS or JavaScript blocking rendering
Web fonts that take time to load

How to improve:

Use images in WebP or AVIF format
Enable lazy loading for off-screen images
Preconnect to third-party origins (<link rel="preconnect">)
Use font-display: swap for web fonts — this is exactly what we do at Codetonic by self-hosting fonts

INP — Interaction to Next Paint

What it measures: the time between a user interaction (click, tap, keypress) and the visual update of the page.

Rating	Value
Good	Under 200 ms
Needs improvement	200 to 500 ms
Poor	Over 500 ms

Common causes of poor INP:

Heavy JavaScript blocking the main thread
Slow event handlers
Too many components updating simultaneously
Third-party libraries (analytics, chat widgets, ads)

How to improve:

Minimize JavaScript sent to the browser
Use requestAnimationFrame for animations
Break long tasks into smaller ones
Choose a framework that ships less JS — Astro ships zero JS by default

CLS — Cumulative Layout Shift

What it measures: the visual stability of the page. A high CLS means elements move unexpectedly during loading.

Rating	Value
Good	Under 0.1
Needs improvement	0.1 to 0.25
Poor	Over 0.25

Common causes of poor CLS:

Images without specified dimensions (width/height)
Ads or embeds that insert dynamically
Web fonts that change text size on load
Content dynamically injected above existing content

How to improve:

Always specify width and height on images
Reserve space for ads and embeds
Use font-display: swap with similar fallback fonts
Avoid inserting content above existing content

How to Measure Your Core Web Vitals

Free Tools

Google PageSpeed Insights (pagespeed.web.dev) — measures in real-world and lab conditions
Google Search Console — Core Web Vitals report with field data
Lighthouse (built into Chrome DevTools) — full performance audit
Web Vitals Extension (Chrome extension) — real-time measurement while browsing

Field Data vs Lab Data

Field data (CrUX) reflects the experience of real users over 28 days. This is what Google uses for ranking.

Lab data (Lighthouse) simulates a page load under controlled conditions. It’s useful for debugging but doesn’t always reflect reality.

Prioritize field data when it’s available.

The Impact on SEO

Google confirms that Core Web Vitals are a ranking factor, but their weight shouldn’t be overstated. Relevant, high-quality content remains the #1 factor.

That said, when content is equal, a fast and stable site will be favored over a slow one. It’s a real competitive advantage, especially in competitive niches.

For local SEO, performance is even more important because Google values the mobile experience, and mobile connections are often slower.

Quick Wins

If you need to improve your Core Web Vitals fast, here are the highest-impact actions:

Optimize your images — this is almost always problem #1
Reduce third-party JavaScript — remove chat scripts, secondary analytics, and non-essential widgets
Enable compression (gzip or brotli) on your server
Use a CDN (Vercel, Netlify, Cloudflare) to serve content closer to users
Switch to a static framework like Astro if your site is a business website

Our Typical Results

The sites we build at Codetonic with Astro consistently achieve:

LCP: under 1 second
INP: under 50 ms (often 0 because there’s no JavaScript)
CLS: 0 (stable layout)

This is a real advantage of choosing the right tech stack from the start.

Conclusion

Core Web Vitals aren’t just technical metrics — they measure the real experience of your visitors. A fast, stable site converts better, ranks better on Google, and gives a better impression of your business.