Core Web Vitals Fix Guide: Pass LCP, INP, and CLS
Start With Field Data, Not Lab Scores
Google ranks pages based on Chrome User Experience Report (CrUX) field data - real measurements from Chrome users visiting your site. Lab scores from PageSpeed Insights or Lighthouse can differ significantly. Before fixing anything, check Google Search Console under Experience, then Core Web Vitals. This shows field data for your actual URLs, grouped by Good, Needs Improvement, and Poor. Fix your worst Poor pages first - these have the most direct ranking impact.
Fixing LCP (Largest Contentful Paint): Target under 2.5s
LCP is almost always caused by an unoptimized image or slow server. First: identify your LCP element using PageSpeed Insights - it shows exactly which element is the LCP. If it is an image: compress it, convert to WebP, add fetchpriority=high to the img tag, and add a link rel=preload in the head. If it is a text element: reduce server response time with caching and a CDN. In Next.js, the Image component handles LCP image optimization automatically. In WordPress, install a caching plugin and use ShortPixel for image compression.
Fixing CLS (Cumulative Layout Shift): Target under 0.1
CLS is almost always caused by images without explicit dimensions. The fix: add width and height attributes to every img tag on your site. This is the single change that fixes CLS for 80% of affected sites. The second most common cause: third-party embeds (ads, social widgets) without reserved space. Add a wrapper div with a fixed min-height matching the embed before it loads. Check Chrome DevTools Layout Shift Regions (in Rendering panel) to visually identify which elements are shifting on your specific pages.
Fixing INP (Interaction to Next Paint): Target under 200ms
INP is the newest Core Web Vital and the hardest to fix because it requires JavaScript profiling. Open Chrome DevTools, go to Performance, record yourself clicking around the page, and look for long tasks (red markers) that fire during interactions. The most common causes: heavy event handlers, third-party scripts executing on interaction, and expensive React re-renders. Start by deferring or removing third-party scripts - analytics, chat widgets, and A/B testing tools are frequent culprits. For React apps, use React Profiler to identify expensive component re-renders.
How Long Until Google Registers Your Fixes
CrUX data updates monthly. After deploying fixes, it takes 28 days for the field data to fully reflect the improvement. You will see incremental improvement in the Google Search Console Core Web Vitals report each week as the 28-day rolling window includes more data from your improved pages. For lab scores (PageSpeed Insights), improvements are immediate. Track both: use lab scores for debugging and verifying fixes work, use field data to confirm ranking impact.
Prioritizing Which Pages to Fix First
Focus on pages with the most organic traffic first - these have the most ranking impact. In Google Search Console, sort your Core Web Vitals URL groups by the number of URLs in Poor status, then cross-reference with your Performance report to find which Poor pages also get significant search traffic. A homepage with poor LCP affects all users but a deep blog post with zero traffic does not. Fix high-traffic Poor pages first, then work through Needs Improvement pages.