Core Web Vitals Guide
Core Web Vitals are Google's metrics for measuring real-world user experience. They directly impact Search ranking since 2021.
LCP
Largest Contentful Paint โ Loading Performance
โค 2.5s
Goodโค 4.0s
Needs Improvement> 4.0s
Poor- Use
fetchpriority="high"on hero images - Preload LCP image with
<link rel="preload"> - Use a CDN to reduce server response time
- Remove render-blocking resources
- Use modern image formats (WebP, AVIF)
INP
Interaction to Next Paint โ Interactivity (replaced FID in 2024)
โค 200ms
Goodโค 500ms
Needs Improvement> 500ms
Poor- Break up long tasks using
scheduler.yield()orsetTimeout - Reduce JavaScript execution time
- Defer non-critical third-party scripts
- Use web workers for heavy computation
CLS
Cumulative Layout Shift โ Visual Stability
โค 0.1
Goodโค 0.25
Needs Improvement> 0.25
Poor- Always set explicit
widthandheighton images/videos - Reserve space for ads and embeds
- Avoid inserting content above existing content
- Use
font-display: optionalor preload web fonts - Use CSS
transformfor animations instead of layout properties