Core Web Vitals: How to Fix LCP, FID, and CLS for Better Rankings

Why Core Web Vitals Still Matter for SEO in 2026

Core Web Vitals are a confirmed Google ranking signal. Sites that pass all three thresholds see measurably better organic performance — including up to 24% lower bounce rates according to recent data. More importantly, they reflect real user experience, which means fixing them improves conversions alongside rankings.

Here are the current "good" thresholds you need to hit (at the 75th percentile of page loads):

Metric	What It Measures	Good	Needs Improvement	Poor
LCP	Loading speed	≤ 2.5s	2.5s – 4.0s	> 4.0s
INP	Interactivity	≤ 200ms	200ms – 500ms	> 500ms
CLS	Visual stability	≤ 0.1	0.1 – 0.25	> 0.25

As of 2026, INP remains the most commonly failed metric — roughly 43% of sites still can't clear the 200ms threshold. That means fixing INP is where the biggest competitive advantage lies.

Prerequisites

Before you start optimizing, you need baseline measurements. Gather these first:

Google Search Console — Open the Core Web Vitals report (under "Experience") to see which URLs are flagged as Poor or Needs Improvement.
PageSpeed Insights — Test your key landing pages individually at pagespeed.web.dev. Note both field data (real users) and lab data (simulated).
Chrome DevTools — Open the Performance panel and run a Lighthouse audit locally for deeper diagnostics.
A staging environment — You'll want somewhere to test changes before pushing to production.

Write down your current LCP, INP, and CLS scores for your top 5-10 pages. You'll compare against these after each optimization.

How to Fix LCP (Largest Contentful Paint)

LCP measures how long it takes for the largest visible element — typically a hero image, video thumbnail, or heading text block — to render on screen. A slow LCP means users are staring at a blank or incomplete page.

Step 1: Identify Your LCP Element

Open Chrome DevTools, go to the Performance panel, and record a page load. Look for the "LCP" marker in the timeline. The element is usually:

A hero image or banner
A large block of text (H1 heading)
A background image applied via CSS
A video poster image

You can also run PageSpeed Insights, which explicitly tells you which element is the LCP element under the diagnostics section.

Step 2: Optimize Images

Images are the LCP element on the majority of pages. Fix them with these specific techniques:

Convert to modern formats. Serve images in WebP or AVIF. WebP is 25-35% smaller than JPEG at equivalent quality. AVIF compresses even further but has slightly less browser coverage.
Use responsive images. Implement srcset and sizes attributes so mobile users don't download desktop-sized images.
Add fetchpriority="high" to your LCP image element. This tells the browser to prioritize downloading it.
Preload the LCP image. Add in your so the browser starts fetching it immediately.
Avoid lazy-loading the LCP image. Lazy loading above-the-fold images is a common mistake — it delays the very element you need to load fastest.

<!-- Good: LCP image with priority hints -->
<img src="hero.webp" alt="..." fetchpriority="high" width="1200" height="600">

<!-- In <head>: preload for the LCP image -->
<link rel="preload" as="image" href="hero.webp">

Step 3: Reduce Server Response Time (TTFB)

If your Time to First Byte exceeds 800ms, hitting a 2.5s LCP becomes nearly impossible. Fix this by:

Using a CDN. Cloudflare, Fastly, or AWS CloudFront put your content on edge servers closer to users.
Enabling server-side caching. Cache rendered HTML at the server or CDN level. For WordPress, use a full-page caching plugin like WP Super Cache or W3 Total Cache.
Upgrading hosting. Shared hosting is often the bottleneck. A VPS or managed WordPress host (like Cloudways or Kinsta) can cut TTFB in half.

Step 4: Eliminate Render-Blocking Resources

CSS and synchronous JavaScript in the block rendering. Address this by:

Inlining critical CSS (the styles needed for above-the-fold content) directly in the HTML.
Deferring non-critical CSS with media="print" onload="this.media='all'" or loading it asynchronously.
Adding defer or async to JavaScript