Technical SEO

Optimize Core Web Vitals — Step-by-Step Guide

LCP < 2.5s, INP < 200ms, CLS < 0.1. Use field data from Chrome UX Report. These are confirmed ranking signals.

Hard Critical Impact 2-5 hrs Online Local Hybrid
Pro Tip

Focus on field data (real users) from CrUX, not just lab data from Lighthouse. A page can score 100 in Lighthouse but still fail CWV in the field due to real-world network conditions and device variety.

Warning

Don't chase a perfect Lighthouse score. The ranking signal uses field data (Chrome User Experience Report) at the 75th percentile. Lab data is just for debugging.

Step-by-Step Guide

1

Run PageSpeed Insights on your top 5 pages

Go to pagespeed.web.dev and test your homepage, top landing pages, and key conversion pages. Pay attention to the "Field Data" section (real users) more than "Lab Data". Screenshot results as your baseline.

2

Optimize LCP: compress hero images, use CDN, preload critical assets

LCP (Largest Contentful Paint) is usually your hero image or main heading. Target: under 2.5 seconds.

  • Convert hero images to WebP/AVIF (use Squoosh.app for manual, or ShortPixel for bulk)
  • Add preload for the LCP image: <link rel="preload" as="image" href="hero.webp">
  • Use a CDN (Cloudflare free tier works great) to serve assets from edge servers
  • Reduce server response time (TTFB) — upgrade hosting if TTFB > 600ms
3

Fix INP: defer non-critical JS, code-split, reduce main thread work

INP (Interaction to Next Paint) measures responsiveness. Target: under 200ms. Most INP issues come from heavy JavaScript blocking the main thread.

  • Add "defer" or "async" to non-critical script tags
  • Code-split JavaScript bundles (dynamic import() in React/Next.js)
  • Move heavy computation to Web Workers
  • Reduce third-party scripts (chat widgets, analytics, ads)
4

Fix CLS: set explicit image dimensions, avoid dynamic content injection

CLS (Cumulative Layout Shift) measures visual stability. Target: under 0.1. Layout shifts frustrate users and hurt rankings.

  • Always set width and height attributes on <img> and <video> tags
  • Use CSS aspect-ratio for responsive containers
  • Reserve space for ads and embeds with min-height
  • Never inject content above existing content after page load (banners, cookie notices)
5

Monitor with CrUX data in Search Console

Go to Search Console > Experience > Core Web Vitals. Check both mobile and desktop. Google groups URLs by similar template, so fixing one template page fixes the whole group.

Video Tutorial

AI Prompt

Here is my Lighthouse/PageSpeed Insights report for [URL]:
[PASTE REPORT DATA]

Analyze the report and provide:
1. Specific fixes for each Core Web Vital that's failing
2. Code snippets for implementing lazy loading, image optimization, and critical CSS
3. A prioritized checklist of performance improvements
4. Estimated impact of each fix on LCP/INP/CLS
5. Server-side optimizations I should consider

Tools & Resources

PageSpeed InsightsWebPageTestSquoosh Image Optimizer

Learn More

Core Web Vitals Guide — web.devofficialHow to Improve Core Web Vitals — Ahrefsarticle

Do this task in the interactive tool

Track your progress and get guided through every step.

Open Interactive Tool

More in Technical SEO

Enforce HTTPS Sitewide

Easy30 min

Configure Robots.txt Properly

Medium20 min

Submit & Optimize XML Sitemap

Easy20 min

Implement Canonical Tags

Medium30 min

Fix Broken Links & Redirect Chains

Medium1-2 hrs

Mobile-First Optimization

Medium1-3 hrs

Optimize Page Speed

Hard2-4 hrs

Manage Crawl Budget

Hard1-2 hrs

JavaScript SEO & Rendering

Hard2-4 hrs

Implement Structured Data (Schema)

Medium1-2 hrs

Set Up Hreflang (International Sites)

Hard1-2 hrs

Clean URL Architecture

Medium30 min

Security Monitoring & Headers

Medium30 min