Core Web Vitals are Google's three signals for measuring real-world user experience: how fast your page loads, how quickly it responds to input, and how stable it is visually. They are ranking factors, but more importantly they are a proxy for how your users actually feel about your site. Here is how to get all three green.
LCP (Largest Contentful Paint): under 2.5 seconds
LCP measures when the largest visible element finishes rendering — usually a hero image, a video poster, or a large text block. To improve it: preload your LCP element, serve images in AVIF or WebP with responsive srcset, use a CDN, and avoid render-blocking CSS and JavaScript. If your LCP is a font, preload the critical font variant and use font-display: swap. The most common LCP killer is a large unoptimized hero image — fix that first.
INP (Interaction to Next Paint): under 200 milliseconds
INP replaced FID in 2024 and is stricter. It measures the time from when a user interacts with your page (click, tap, keypress) to when the browser paints the next frame. To improve it: reduce JavaScript execution time, break up long tasks with requestIdleCallback or scheduler.yield(), defer non-critical JavaScript, and use web workers for heavy computation. Third-party scripts are the usual culprit — audit and defer them aggressively.
CLS (Cumulative Layout Shift): under 0.1
CLS measures how much your page layout shifts as it loads. Every time a button moves because an image loaded above it, that is a layout shift. To fix it: always set width and height attributes on images and video, reserve space for ads and embeds using CSS min-height, avoid injecting content above existing content, and use CSS aspect-ratio for responsive media. Fonts can also cause CLS — use font-display: swap and preconnect to font origins.
How to measure: lab vs. field data
Lighthouse gives you lab data — a simulated load on a fast connection. CrUX (Chrome User Experience Report) gives you field data — what real users actually experience. Google ranks on field data, not lab data. Check your CrUX data in Google Search Console under the Core Web Vitals report. If your Lighthouse score is 95 but your CrUX data shows INP at 400ms, your real users are suffering on slow devices and connections.
The 80/20 fixes that solve most problems
For most sites, three fixes solve 80% of Core Web Vitals issues: (1) optimize and preload the LCP image, (2) defer or remove third-party JavaScript, and (3) set explicit dimensions on all images and ads. Start there before chasing micro-optimizations. A site that does these three things will go from red to yellow or green on all three metrics.
Setting performance budgets
Performance regresses unless you guard it. Set a JavaScript budget (e.g., 150KB per page), an image budget (e.g., 500KB above the fold), and a third-party script budget. Enforce these in CI using tools like Lighthouse CI or Bundlephobia. When a PR adds 50KB of JavaScript, the build fails and the developer has to justify or remove it. Without budgets, performance erodes one commit at a time.
Green Core Web Vitals are achievable for almost any site. The fixes are known, the tools are free, and the impact on rankings and conversion is real. Start with the 80/20, measure with field data, and build performance into your workflow.