Core Web Vitals

Core Web Vitals are Google's standardized metrics for real-world user experience. They measure loading, stability, and responsiveness — and they affect your search ranking.

The three vitals

• LCP — Largest Contentful Paint (loading): when the largest visible element (hero image, heading) finishes rendering. Good: < 2.5s.
• CLS — Cumulative Layout Shift (visual stability): how much content unexpectedly jumps around while loading. Good: < 0.1.
• INP — Interaction to Next Paint (responsiveness): the delay between a user interaction and the next visual update. Good: < 200ms. (Replaced FID in 2024.)

Improving LCP

The LCP element is usually a hero image or large text block.

<!-- Preload and eagerly load the hero image -->
<img src="hero.webp" fetchpriority="high" />

• Optimize and preload the hero asset.
• Reduce render-blocking CSS/JS.
• Use a fast server / CDN to improve Time to First Byte.

Improving CLS — prevent layout shift

Layout shift happens when content loads without reserved space. The fix is to always reserve space:

<!-- Width + height let the browser reserve space before load -->
<img src="photo.jpg" width="600" height="400" alt="..." />

/* Or use aspect-ratio for responsive embeds */
.video { aspect-ratio: 16 / 9; }

Improving INP

INP measures responsiveness. It suffers when long JavaScript tasks block the main thread:

• Break up long tasks (>50ms) so the browser can respond to input between chunks.
• Defer non-essential work with setTimeout or requestIdleCallback.
• Reduce the amount of JavaScript that runs on interaction.