Most performance advice is folk wisdom. We've shipped enough sites to have actual data on what moves the needle on Core Web Vitals — and what's just performance theatre. Here's the short version.

The three metrics that matter

Google measures three things in Core Web Vitals: LCP (Largest Contentful Paint), INP (Interaction to Next Paint, which replaced FID), and CLS (Cumulative Layout Shift). Everything else is supporting cast.

If you only fix three things, fix the things measured by these three metrics. Most "performance optimisations" we see in client codebases don't touch any of them.

LCP: 80% of LCP problems are images

LCP measures how fast the largest element above the fold renders. On 90% of sites, that element is a hero image. Therefore, 90% of LCP wins come from image optimisation:

  • Serve modern formats. AVIF first, WebP fallback, no JPEG/PNG in 2026 except for source files.
  • Right-size images. Don't serve a 3000px image to a phone screen. Use srcset and sizes attributes religiously.
  • Preload the LCP image. Put a <link rel="preload"> for the hero image in the document head. This alone can shave 200-400ms.
  • Don't lazy-load above the fold. Lazy-loading is for below-fold images. Above the fold, mark them fetchpriority="high".

If your LCP is bad, it's almost certainly because you're shipping unoptimised images. Fix that first. Most other things are noise.

INP: 80% of INP problems are JavaScript

INP measures how responsive your page is to interaction. Bad INP feels like a janky page — taps that don't respond, dropdowns that lag, scrolling that stutters.

The cause is usually too much JavaScript executing on the main thread. The solutions:

  • Ship less JavaScript. Audit your bundle. Most sites carry 200-400KB of JS they don't need. Tree-shake, code-split, and remove libraries you imported once.
  • Defer the non-critical. Analytics, chat widgets, ad scripts — all of these should load after page interaction is ready, not before.
  • Break up long tasks. A single 200ms JS task blocks interaction. Use scheduler.yield(), requestIdleCallback, or Web Workers for heavy work.
  • Use the right framework for the workload. A content site rendered as a heavy React SPA is going to have worse INP than the same site rendered as HTML. Pick the right framework.

CLS: 80% of CLS problems are missing dimensions

CLS measures layout shifts. It happens when content moves after the page has rendered — usually because an image, ad, or embed loaded and pushed everything down.

Solutions are almost entirely about declaring space ahead of time:

  • Set width and height on every image. The browser uses these to reserve space before the image loads.
  • Reserve space for embeds. If you're embedding a video, ad, or iframe, give it a fixed-size container.
  • Avoid injecting content above existing content. Banners that appear after a delay, cookie consent UI that shifts the page — all of these destroy CLS.
  • Use font-display: swap with size-adjust. Web fonts cause layout shifts when they swap in. The size-adjust CSS property minimises that shift.

What doesn't matter as much as you think

Performance lore overestimates the impact of:

  • Server response time on sites that aren't doing anything slow on the server. A 200ms TTFB is fine. Don't lose sleep over getting it to 100ms.
  • Critical CSS inlining on sites with small CSS bundles. Modern CSS-in-JS or Tailwind setups don't benefit much.
  • Service Workers for sites that don't need offline. The complexity-to-payoff ratio is usually wrong.
  • HTTP/3 vs HTTP/2 in 2026. Both are fine. The browser picks. Stop tuning this.
If your LCP is 4 seconds, no amount of HTTP/3 tuning will save you. Fix the image. Then come back to the deep cuts.

The order of operations

If you're starting from a slow site, fix things in this order:

  1. Image strategy (LCP).
  2. JavaScript bundle audit and code-splitting (INP).
  3. Explicit dimensions and reserved space (CLS).
  4. Server response time and caching.
  5. Everything else.

Most sites hit a 95+ Lighthouse score with just steps 1-3 done well. The remaining steps are diminishing returns. Spend your time wisely.