Core Web Vitals are Google's way of measuring user experience — and they're a confirmed ranking factor. If your LCP is over 2.5 seconds, your CLS is above 0.1, or your INP exceeds 200ms, you're losing rankings to competitors with faster pages.
This guide breaks down each Core Web Vital and gives you specific, actionable fixes. Start with the Page Speed Estimator to see where your pages stand, then work through the optimizations below.
What Are Core Web Vitals?
Core Web Vitals are three metrics that measure the real-world user experience of your pages:
- LCP (Largest Contentful Paint) — Loading speed. How fast does the main content appear? Target: under 2.5 seconds.
- CLS (Cumulative Layout Shift) — Visual stability. Does content jump around during loading? Target: under 0.1.
- INP (Interaction to Next Paint) — Responsiveness. How fast does the page respond to clicks/taps? Target: under 200ms.
Google uses field data (real user measurements from Chrome) — not lab tests — for ranking purposes. This means your actual visitors' experience is what matters, not just your Lighthouse score.
Fixing LCP (Largest Contentful Paint)
LCP measures how long it takes for the largest content element in the viewport to render. This is usually a hero image, a large text block, or a video poster.
1. Identify Your LCP Element
Use Chrome DevTools > Performance panel > record a page load > look for the LCP marker. The element highlighted is what you need to optimize.
2. Reduce Server Response Time (TTFB)
- Use a CDN (Cloudflare, Vercel, Fastly) to serve content from edge locations
- Enable server-side caching and static page generation where possible
- Upgrade your hosting if TTFB consistently exceeds 800ms
- Use HTTP/2 or HTTP/3 for multiplexed connections
3. Optimize Images
- Convert to WebP or AVIF (30-50% smaller than JPEG/PNG)
- Use responsive images with srcset and sizes attributes
- Preload your LCP image: <link rel="preload" as="image" href="hero.webp">
- Set explicit width and height attributes on all images
- Use a modern image CDN for automatic format conversion and resizing
4. Eliminate Render-Blocking Resources
- Inline critical CSS (above-the-fold styles) in the <head>
- Defer non-critical CSS with media="print" and onload swap
- Add async or defer to non-critical JavaScript
- Move third-party scripts below the fold or load them after user interaction
Fixing CLS (Cumulative Layout Shift)
CLS measures how much visible content shifts unexpectedly. Every time an element moves after initial render without user interaction, it adds to your CLS score.
1. Set Dimensions on Media
- Always include width and height attributes on images and videos
- Use CSS aspect-ratio for responsive containers
- Reserve space for embeds (iframes, YouTube videos) with a container
2. Fix Font Loading
- Use font-display: swap to prevent invisible text (FOIT)
- Preload your primary web fonts
- Use size-adjust in @font-face to match fallback font metrics
- Consider using system fonts for body text
3. Handle Dynamic Content
- Reserve space for ads with min-height on their containers
- Never inject content above existing content (cookie banners, notification bars)
- Use transform animations instead of properties that trigger layout (top, left, width, height)
- Load third-party widgets (chat, analytics) after the page settles
Fixing INP (Interaction to Next Paint)
INP replaced FID in March 2024 and is significantly harder to pass. While FID only measured the first interaction, INP measures ALL interactions and reports the worst one.
1. Break Up Long Tasks
- Any JavaScript task over 50ms is a "long task" that blocks the main thread
- Use requestIdleCallback() or setTimeout() to yield back to the browser
- Split large functions into smaller chunks with scheduler.yield() (where supported)
- Move heavy computation to Web Workers
2. Reduce JavaScript
- Audit your bundle size — remove unused libraries and polyfills
- Code-split by route (most frameworks do this automatically)
- Lazy-load below-the-fold components
- Replace heavy libraries with lighter alternatives (e.g., date-fns instead of moment.js)
3. Reduce DOM Size
- Keep total DOM nodes under 1,500 (Google recommends under 800 for best performance)
- Virtualize long lists (react-window, tanstack-virtual)
- Remove unnecessary wrapper elements
- Use CSS Grid/Flexbox instead of deeply nested layout divs
INP is the metric most sites fail. Unlike LCP (optimize images) and CLS (set dimensions), INP requires architectural changes to how your JavaScript executes. Start with the biggest offenders: analytics scripts, heavy frameworks, and complex event handlers.
Testing Your Core Web Vitals
- SerpNap Page Speed Estimator — Quick Core Web Vitals estimates and optimization recommendations (free, no signup)
- Google PageSpeed Insights — Lab and field data with detailed diagnostics
- Google Search Console — Core Web Vitals report showing which URLs pass/fail across your entire site
- Chrome DevTools Performance panel — Detailed waterfall analysis for debugging specific issues
- Web Vitals Chrome Extension — Real-time CWV metrics as you browse your site
Prioritization Framework
Focus your optimization efforts in this order for maximum ranking impact:
- Step 1: Run the Page Speed Estimator on your top 10 traffic pages
- Step 2: Fix any "Poor" metrics (red) first — these actively hurt rankings
- Step 3: Improve "Needs Improvement" metrics (yellow) to "Good" (green)
- Step 4: Re-test after each change to measure impact
- Step 5: Monitor Search Console's Core Web Vitals report weekly
For a complete site health check beyond speed, run the SEO Checker to catch technical SEO issues, meta tag problems, and structured data gaps alongside your Core Web Vitals optimization.