How to Fix Your Core Web Vitals
Core Web Vitals are Google's official page experience metrics. They measure real loading speed, visual stability, and interactivity, and they directly affect your rankings. Here's what each one measures and how to fix the most common problems.
What Core Web Vitals actually measure
Google uses three metrics to evaluate page experience:
- LCP (Largest Contentful Paint) — how long it takes for the main content on a page to become visible. Usually the hero image or the largest block of text.
- CLS (Cumulative Layout Shift) — how much content visually shifts around after the page first loads. A banner that loads late and pushes text down is a classic CLS issue.
- TBT (Total Blocking Time) — how long the browser's main thread is blocked from responding to user input. Heavy JavaScript is the main culprit. (In field data, Google uses INP instead of TBT, but TBT in lab tools like PageSpeed Insights is your diagnostic proxy.)
| Metric | Good | Needs Improvement | Poor |
|---|
| LCP | Under 2.5s | 2.5s to 4.0s | Over 4.0s |
| CLS | Under 0.1 | 0.1 to 0.25 | Over 0.25 |
| TBT | Under 200ms | 200ms to 600ms | Over 600ms |
How to check your current scores
Two places to check:
- PageSpeed Insights (pagespeed.web.dev) — enter any URL and get both lab scores and real-world field data. Check mobile and desktop separately. Mobile scores are almost always worse, and that's what Google weighs more heavily for most sites.
- Search Console Core Web Vitals report — shows which pages have "Poor" or "Needs Improvement" status based on real user data. More representative than lab scores but slower to update after you make changes.
Fixing LCP (Largest Contentful Paint)
LCP
LCP is almost always caused by a slow-loading hero image, a large banner, or a slow server response. The fix depends on which element is your LCP element, which PageSpeed Insights tells you in the diagnostic section.
- Convert hero images to WebP format. WebP files are typically 25-35% smaller than equivalent JPEGs at the same visual quality. Most CMS platforms support WebP natively or via a plugin.
- Add
fetchpriority="high" and loading="eager" to your hero image tag. This tells the browser to prioritize that image over everything else on page load.
- Move your LCP image to a CDN (content delivery network) so it loads from a server geographically close to the user. Cloudflare's free tier covers this for most sites.
- Reduce server response time. A time-to-first-byte (TTFB) over 600ms delays everything that follows. Upgrade hosting or enable server-side caching.
- Preconnect to image hosting domains. Add
<link rel="preconnect" href="https://your-image-cdn.com"> in your page head to reduce DNS and TCP connection overhead.
Fixing CLS (Cumulative Layout Shift)
CLS
CLS happens when elements load or resize after the initial paint, pushing other content around. The most reliable prevention is reserving space for all content before it loads.
- Add explicit
width and height attributes to all image tags. Without these, the browser doesn't know how much space to reserve, so images "pop in" and push content down.
- Set a fixed min-height on containers that load dynamic content (ads, embeds, newsletter sign-up forms). This reserves space even before the content loads.
- Avoid injecting content above existing content after page load. Banner announcements, cookie consent notices, and chat widgets that appear above the fold are common CLS offenders.
- For web fonts: add
font-display: swap to your CSS @font-face declarations to prevent invisible text that shifts when the font loads.
Fixing TBT (Total Blocking Time)
TBT
TBT measures how long JavaScript blocks the main thread. High TBT means the page looks loaded but doesn't respond to clicks or scrolls for several seconds, which damages both user experience and rankings.
- Defer all non-critical JavaScript. Add the
defer attribute to script tags for analytics, chat widgets, and marketing tools. They load after the page is interactive.
- Remove unused JavaScript. Check the Coverage panel in Chrome DevTools. Scripts from libraries and plugins often include large amounts of code that never runs on your specific pages.
- Load third-party scripts (Google Tag Manager, Facebook Pixel, Hotjar) asynchronously and after the page has loaded. Tag Manager has a "DOM Ready" trigger built in for this.
- Break up long JavaScript tasks. Any task that runs for over 50ms is considered "long" and contributes to TBT. If you have custom JS on your site, check its execution time in DevTools Performance tab.
Common mistakes when fixing Core Web Vitals
- Fixing lab scores but not field scores. PageSpeed Insights shows both. Field data (from real users) is what Google uses for ranking. Lab scores are useful for diagnosing issues, but verify your field scores improve too.
- Only checking desktop. Google primarily uses mobile scores. Run PageSpeed Insights on mobile for every page you're optimizing.
- Making one fix and checking too soon. Search Console field data updates over a 28-day rolling window. Give changes time to reflect before concluding they didn't work.
- Forgetting to test after new plugins. A single marketing or chat plugin can add 500ms to TBT and destroy a previously passing score.
Track your Core Web Vitals automatically
SEO Monitor includes weekly Core Web Vitals scores for every URL you're tracking. If a score drops after a site update or plugin change, you'll find out in your next Monday report before it has time to affect your rankings. No need to remember to run PageSpeed Insights manually.
From $9 per site per month.
Get your free weekly SEO report
Frequently asked questions
Do Core Web Vitals affect rankings on desktop and mobile separately?
Google evaluates Core Web Vitals separately for mobile and desktop. Mobile performance affects your mobile rankings, and desktop performance affects desktop rankings. Since most sites get more mobile traffic, prioritize mobile fixes first.
My LCP image is already compressed. Why is my LCP score still poor?
Compression is one factor. Other common causes include a slow server response time (TTFB), the image being loaded by JavaScript rather than as a direct HTML tag, or the image being lazy-loaded when it should load eagerly. Check the detailed diagnostics in PageSpeed Insights to find the specific bottleneck.
Does improving Core Web Vitals guarantee a ranking boost?
Passing Core Web Vitals removes a ranking disadvantage rather than guaranteeing an advantage. It's one of many signals. Sites that go from "Poor" to "Good" typically see improvements in competitive verticals where other ranking factors are roughly equal among the top results.
How long does it take for Core Web Vitals fixes to show in Search Console?
Search Console field data runs on a 28-day rolling window. This means it can take up to 4 weeks for fixes to fully show in the report. You can verify fixes faster using PageSpeed Insights, which gives you real-time lab data immediately.