After auditing more than 2,000 websites over the past three years, the relationship between Core Web Vitals scores and organic ranking position is unambiguous. Sites that score above 90 on all three metrics — LCP, INP, and CLS — consistently outrank technically equivalent sites that score below 70. More importantly, most of the performance improvements that move scores from poor to excellent come from the same six changes. Here they are.
Understanding What Google Actually Measures
Core Web Vitals are three specific user experience metrics that Google uses as ranking signals. Largest Contentful Paint (LCP) measures how quickly the main content of a page loads. Interaction to Next Paint (INP) — which replaced First Input Delay in 2024 — measures how quickly your page responds to user interaction. Cumulative Layout Shift (CLS) measures visual stability: how much your page layout jumps around while loading. Google wants all three to be in the "good" range: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1.
Fix 1: Image Optimisation and Modern Formats
Unoptimised images are the single most common cause of poor LCP scores. The fix is consistent but requires attention to detail. Convert all images to WebP or AVIF — both offer 30–50% better compression than JPEG at equivalent quality. Implement responsive images using the srcset attribute so mobile users aren't downloading desktop sized images. Set explicit width and height attributes on every image to prevent layout shift. And critically: identify your LCP element (the largest visible image or text block on page load) and preload it with a link rel="preload" tag in the document head. This one change alone often moves LCP by 0.4–0.8 seconds.
Implementation Priority
Start with the hero image on your homepage — it is almost always the LCP element. Convert it to WebP, preload it, and set explicit dimensions. Run PageSpeed Insights before and after. You'll see the improvement immediately.
Fix 2: Eliminate Render Blocking Resources
Every CSS file and JavaScript file in your document head that loads synchronously blocks the browser from rendering anything until it's finished downloading and parsing. For most sites we audit, there are between four and twelve render blocking resources that can be addressed with two techniques: adding defer or async attributes to non critical JavaScript, and moving non critical CSS to load asynchronously using the media trick or a JavaScript based loader.
Performance is not a feature you add after launch. It's a discipline you maintain from the first line of code. The sites we've taken from 2.8s to 0.9s load time didn't get rebuilt — they got audited, prioritised, and fixed systematically.
Fix 3: Implement Proper Caching Headers
Browser caching means returning visitors load your site from their local cache instead of downloading everything again. Yet the majority of sites we audit have either no cache headers or cache headers set to expire in 24 hours. Static assets — images, fonts, CSS, JavaScript — should be cached for a minimum of one year with a cache control: max age=31536000 header. Combine this with content addressable filenames (hashed filenames that change when the file changes) and you get aggressive caching without stale content issues. This is most impactful for returning visitors and Google's crawl efficiency.
Fix 4: Self Host Critical Fonts
Google Fonts is fast, but loading fonts from an external domain still requires a DNS lookup, TCP connection, and TLS handshake before the first byte arrives. For fonts that are central to your visual design — and therefore to your LCP element — the latency adds up. Self hosting fonts eliminates this entirely. Download your font files, add them with @font face declarations in your CSS, and serve them from your own domain with the caching headers from Fix 3. Add font display: swap to prevent invisible text during load. The combination of self hosting and font display: swap consistently improves LCP by 0.2–0.4 seconds.
Fix 5: Address Cumulative Layout Shift at the Source
CLS failures are almost always caused by the same three things: images and embeds without explicit dimensions, dynamically injected content that pushes existing content down, and web fonts causing text reflow. The fix for images is straightforward — always set width and height attributes. For dynamic content like cookie banners, chat widgets, and notification bars, use CSS to reserve space for them before they render using min height. For font reflow, the font display: swap approach from Fix 4 handles most cases, though font display: optional eliminates reflow entirely by not swapping if the font hasn't loaded within a timeout.
Fix 6: Optimise Third Party Scripts
Analytics tags, chat widgets, advertising pixels, heat mapping tools, social share buttons — the average marketing website loads 14 third party scripts. Each one adds network requests, JavaScript execution time, and in many cases, render blocking behaviour. The audit process: use WebPageTest's waterfall view to identify every third party script and its impact on load time. Anything adding more than 200ms that isn't directly revenue generating should be loaded with a setTimeout delay of 3–5 seconds, after the page is interactive. Tag managers help here — moving all third party tags to load after the onload event is a single configuration change that can improve INP scores dramatically.
Putting It Together
These six fixes address the root causes of the vast majority of Core Web Vitals failures we see in audits. The implementation order matters: start with images (Fix 1), then render blocking resources (Fix 2), then caching (Fix 3), then fonts (Fix 4), then CLS (Fix 5), then third party scripts (Fix 6). Each fix compounds on the previous one. A site that implements all six consistently moves from the "needs improvement" range to the "good" range on all three metrics — and the organic ranking improvements follow within one to three crawl cycles.
Ready To Grow?
Let's build a custom strategy for your business. No obligation, no sales pressure.
Get Your Free Strategy →