Site Speed and Core Web Vitals

Google's Core Web Vitals are three real-user metrics measured in the wild via the Chrome User Experience Report. They replaced lab-only metrics like First Meaningful Paint because they better reflect actual user experience.

• LCP (Largest Contentful Paint): how long until the largest above-the-fold element renders. Target: under 2.5 seconds. Pass: green; needs improvement: yellow; poor: red.
• INP (Interaction to Next Paint): how long after a user interaction until the next visual response. Target: under 200ms. Replaced FID in March 2024.
• CLS (Cumulative Layout Shift): how much the page moves around as it loads. Target: under 0.1.

Two complementary tools: PageSpeed Insights (combines real CrUX data and lab testing) and Search Console's Core Web Vitals report (real CrUX data only, aggregated by URL group). Use Search Console to find which URL groups fail; use PageSpeed Insights to diagnose the why on individual URLs.

Lighthouse in Chrome DevTools is also useful for individual URL deep-dives, but remember: lab numbers are not field numbers. Google ranks based on field data.

LCP is usually limited by the hero image, the largest text block, or a video poster. The biggest wins:

• Optimize the hero image: WebP/AVIF, correctly sized via srcset, fetchpriority="high", served from a fast CDN.
• Eliminate render-blocking CSS and JS in the head; defer or async non-critical scripts.
• Preconnect and preload critical resources (fonts, hero image, primary CSS).
• Use a fast CDN with edge caching close to your visitors.
• Reduce server response time (TTFB) — slow databases or unoptimized server-side rendering kills LCP.

INP is dominated by long JavaScript tasks blocking the main thread. The fixes:

• Reduce total JavaScript bundle size. Audit with the Coverage tab in DevTools — sites routinely ship 200KB+ of unused JS.
• Code-split: load JS only when needed, not all on initial page load.
• Avoid expensive third-party scripts on critical paths (chat widgets, analytics, A/B testing libraries).
• Use requestIdleCallback for non-urgent work; avoid blocking the main thread on user input.

CLS is almost always caused by elements being inserted into the page after the layout is already painted. The fixes:

• Set explicit width and height on every <img> and <iframe>.
• Reserve space for ads, embeds, and lazy-loaded components — don't let them push content down when they appear.
• Use font-display: optional or font-display: swap with size-adjusted fallback fonts to avoid text reflow.
• Avoid inserting content above existing content unless triggered by a user action.

Once you pass all three Core Web Vitals comfortably on mobile (green across the board in CrUX field data), further speed optimization has diminishing returns for SEO. At that point, additional speed work should be justified by conversion-rate impact, not SEO.