Core Web Vitals (CWV) are Google's user experience metrics that directly impact rankings. Passing all three thresholds puts your pages in the best position for the page experience ranking boost.
LCP — Largest Contentful Paint
Target: Under 2.5 seconds
LCP measures how long it takes for the main content to become visible. The "largest contentful paint" is typically the hero image, heading, or above-the-fold content block.
Optimization Strategies
- Optimize the LCP resource: If it's an image, compress it, use modern formats (WebP/AVIF), and set appropriate dimensions
- Preload the LCP image: Use
<link rel="preload">to prioritize loading - Reduce server response time: Use a CDN, enable caching, optimize database queries (target TTFB under 800ms)
- Eliminate render-blocking resources: Defer non-critical CSS/JS, inline critical CSS
- Avoid lazy-loading above-the-fold images: Only lazy-load images below the viewport
INP — Interaction to Next Paint
Target: Under 200ms
INP measures how quickly the page responds to user interactions (clicks, taps, key presses). A poor INP means the page feels "laggy."
Optimization Strategies
- Break up long tasks: JavaScript tasks over 50ms block the main thread. Use
requestIdleCallbackorsetTimeoutto break them up - Reduce JavaScript: Remove unused JS, code-split large bundles, defer non-essential scripts
- Minimize event handler work: Keep click/input handlers lightweight
- Use Web Workers: Offload heavy computation to background threads
CLS — Cumulative Layout Shift
Target: Under 0.1
CLS measures how much the page layout shifts unexpectedly during loading. Shifting content is frustrating — users click the wrong button, lose their reading position, or misclick.
Optimization Strategies
- Set explicit dimensions: Always include width and height on images, videos, and iframes
- Reserve space for ads: Use CSS to reserve the ad container's space before the ad loads
- Avoid injecting content above the fold: Don't insert banners, popups, or dynamic content that pushes existing content down
- Use CSS containment:
contain: layoutprevents elements from affecting siblings - Preload fonts: Prevent font-swap layout shifts by preloading web fonts
Measuring Core Web Vitals
Use these tools:
- Field data (real users): Chrome UX Report (CrUX), Google Search Console Core Web Vitals report
- Lab data (testing): Lighthouse, PageSpeed Insights, SEB PageScore
Field data is what Google uses for ranking decisions. Lab data helps you diagnose and fix issues. Always prioritize field data when assessing your status.
Key takeaway: Fix LCP by optimizing images and server speed. Fix INP by reducing JavaScript. Fix CLS by setting explicit sizes. Test with both lab tools and real user data.