Everyone knows how to measure page speed — run Lighthouse, get a number, feel bad. Fewer people know what to actually change. This is the remediation side: the specific, code-level fixes that move the metrics that matter, building on Core Web Vitals.
Why speed is a ranking factor
Core Web Vitals are a confirmed (if modest) ranking signal, and speed is a much larger conversion factor — every extra second of load time measurably increases bounce. Google ranks the real-user experience, so field data beats a one-off lab score.
Measure the right way
Lab tools (Lighthouse, PageSpeed Insights) are for diagnosing; field data (the Chrome UX Report in Search Console) is what Google actually uses. Optimise against field data, and use lab runs to find the cause. Chasing a perfect Lighthouse score on your dev machine is a trap.
Fixing LCP
Largest Contentful Paint is usually your hero image or a big heading. The highest-impact fixes: serve the LCP image in a modern format at the right size, preload it, and never lazy-load it. Add fetchpriority="high" to hint the browser. If your LCP is text, make sure the font isn't blocking render.
<link rel="preload" as="image" href="hero.avif" fetchpriority="high">Render-blocking resources
CSS and synchronous JS in the <head> block the first paint. Inline the small amount of critical CSS needed for above-the-fold content and defer the rest; add defer or async to scripts; and self-host or preconnect to third-party origins. Every render-blocking request in the head is delaying your first pixel.
TTFB and the server
If Time To First Byte is high, no amount of front-end tuning saves you — the browser is waiting on your server. Cache HTML at the edge (a CDN), use server-side caching for dynamic pages, and keep redirects to a single hop. A slow TTFB is often the hidden ceiling on every other metric.
Layout shifts
Cumulative Layout Shift comes from content that moves after it loads. Always set width/height on images and iframes, reserve space for ads and embeds, and use font-display: optional or size-adjust to avoid text reflowing when your web font arrives. Then verify the whole picture with SEO Inspector, which surfaces the on-page factors — image dimensions, heavy assets, render-blocking tags — that feed these scores.
