Web Vitals Analyzer

Core Web Vitals are Google's standardized page experience metrics: LCP (loading), INP (interactivity), and CLS (visual stability). Since the Page Experience update, they're a ranking signal. Poor Core Web Vitals can hurt rankings and significantly impact user engagement — a 0.1s improvement in LCP correlates with 8% more conversions for eCommerce. Google uses field data (real users via CrUX) rather than lab data for ranking, so real-world performance matters.

Lab data comes from controlled test environments (Lighthouse, WebPageTest) with simulated network and device conditions. It's reproducible and useful for development. Field data comes from real users via the Chrome UX Report (CrUX) — it captures actual device diversity, network conditions, and user behaviors. Google uses field data (75th percentile) for ranking. A page can score well in Lighthouse but poorly in field data if real users have slow devices or connections.

INP (Interaction to Next Paint) replaced FID as a Core Web Vital in March 2024. FID only measured the first interaction delay; INP measures all interactions throughout the page lifecycle — clicks, taps, and keyboard input — and reports the slowest 98th percentile interaction. INP is stricter: a page can have a fast FID but poor INP if it has heavy event handlers that fire late in the session, like after dynamic content loads.

Multiple tools: PageSpeed Insights (pagespeed.web.dev) shows both lab and field data. Chrome DevTools → Lighthouse runs lab tests. Chrome DevTools → Performance recorder for INP debugging. Chrome UX Report (CrUX) API for programmatic field data. web-vitals npm package to measure in your app: import { onLCP, onINP, onCLS } from 'web-vitals' and send to your analytics. Search Console's Core Web Vitals report shows real-world data aggregated by URL group.

CLS (Cumulative Layout Shift) is caused by content moving unexpectedly. Top causes: images without explicit dimensions (add width/height attributes), dynamically injected content above existing content (ads, banners, cookie notices), web fonts causing FOUT/FOIT (add font-display: swap and preload critical fonts), lazy-loaded embeds without reserved space (use aspect-ratio CSS). Use the Layout Shift Regions visualization in Chrome DevTools to identify which elements are shifting.

Good LCP is under 2.5 seconds. The LCP element is usually a hero image, background image, or above-the-fold text block. To optimize: preload the LCP image with <link rel='preload' as='image'>, use a CDN to serve images from edge locations, convert images to WebP/AVIF, add fetchpriority='high' to the LCP image element, remove render-blocking scripts and stylesheets, and consider streaming SSR to send HTML faster.