Core Web Vitals have become the gold standard for measuring web performance. Google uses these metrics as ranking factors, making them crucial for both user experience and SEO. In this comprehensive guide, we'll explore each vital in detail and learn practical optimization techniques.
Understanding the Three Core Vitals
Largest Contentful Paint (LCP) measures loading performance - specifically, when the largest content element becomes visible. First Input Delay (FID) measures interactivity - the time from user's first interaction to browser's response. Cumulative Layout Shift (CLS) measures visual stability - how much the page layout shifts unexpectedly.
javascript
// Measuring Core Web Vitals with web-vitals library
import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';
function sendToAnalytics({ name, delta, id, value }) {
// Send metrics to your analytics endpoint
fetch('/api/analytics/vitals', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
metric: name,
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
id,
timestamp: Date.now(),
url: window.location.href,
userAgent: navigator.userAgent
})
});
}
// Register all vital measurements
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
getFCP(sendToAnalytics);
getTTFB(sendToAnalytics);Optimizing Largest Contentful Paint
LCP is often the most impactful vital to optimize. The target is under 2.5 seconds. Key strategies include optimizing server response time, using a CDN, preloading critical resources, and optimizing images. Hero images are often the LCP element, so prioritizing their loading is crucial.
html
<!-- Preload critical LCP image -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">
<!-- Use modern image formats with fallbacks -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img
src="/hero.webp"
alt="Hero image"
fetchpriority="high"
decoding="async"
width="1200"
height="600"
>
</picture>
<!-- Inline critical CSS for above-the-fold content -->
<style>
.hero { min-height: 600px; background: #1a1a2e; }
.hero-title { font-size: 3rem; color: #fff; }
</style>Eliminating Layout Shifts
CLS measures unexpected layout shifts. A good score is under 0.1. Common causes include images without dimensions, dynamically injected content, and web fonts causing FOUT. Always reserve space for dynamic content and use size attributes on images and videos.
css
/* Reserve space for images to prevent layout shift */
.image-container {
aspect-ratio: 16 / 9;
background: #1a1a2e;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Prevent font swap layout shift */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: optional; /* or swap with size-adjust */
size-adjust: 100.5%;
ascent-override: 95%;
}
/* Reserve space for ads or dynamic content */
.ad-slot {
min-height: 250px;
background: #282c33;
}< 2.5sGood LCP
< 100msGood FID
< 0.1Good CLS
53%Bounce if > 3s
