top of page

Core Web Vitals: What They Are and How to Improve Your Scores

Jan 18
5 min read

Core Web Vitals are Google's standardized user experience metrics that measure loading performance, interactivity, and visual stability. They are confirmed ranking signals — pages with passing Core Web Vitals scores have a ranking advantage over pages that fail, all else being equal. More practically, Core Web Vitals measure experiences that directly affect whether users stay on a page or leave: slow-loading pages, pages that shift layouts unexpectedly, and pages that don't respond to user input promptly.

Google measures Core Web Vitals using real-user data (the Chrome User Experience Report, or CrUX) collected from actual visits by Chrome users. This means your Core Web Vitals scores reflect real-world performance, not just lab measurements.

⠀

The Three Core Web Vitals

⠀

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element (typically the hero image, main heading, or above-the-fold image) to load and render. It measures perceived load time from the user's perspective.

  • Good: Under 2.5 seconds

  • Needs Improvement: 2.5–4.0 seconds

  • Poor: Over 4.0 seconds

⠀

LCP is typically the most impactful Core Web Vitals issue for most websites because it directly reflects whether the page feels fast or slow to load. The most common LCP issues: large unoptimized hero images, render-blocking resources (JavaScript or CSS that blocks the browser from rendering), and slow server response times (TTFB).

INP — Interaction to Next Paint (replaced FID in 2024)

INP measures how quickly the page responds to user interactions — clicking buttons, selecting options, typing in forms. It measures the worst interaction delay experienced during a page visit.

  • Good: Under 200 milliseconds

  • Needs Improvement: 200–500 milliseconds

  • Poor: Over 500 milliseconds

⠀

INP issues are primarily caused by excessive JavaScript execution that blocks the browser's main thread — long tasks that delay the browser's ability to process and respond to user interactions.

CLS — Cumulative Layout Shift

CLS measures unexpected visual movement of page elements after the page has started loading. If content shifts down when an ad loads, or an image jumps position after a font loads, those are layout shifts that create frustrating user experiences.

  • Good: Under 0.1

  • Needs Improvement: 0.1–0.25

  • Poor: Over 0.25

⠀

CLS issues typically come from: images or ads without specified dimensions, fonts that cause text reflowing when they load, or dynamically injected content above existing content.

⠀

Diagnosing Core Web Vitals Issues

⠀

Google PageSpeed Insights

Enter any page URL at pagespeed.web.dev. The tool shows both lab data (controlled measurements) and field data (real-user CrUX data if available). Focus primarily on the field data, which reflects actual user experience. The "Opportunities" and "Diagnostics" sections identify specific issues and their estimated impact.

Google Search Console Core Web Vitals report

The Core Web Vitals report (Experience → Core Web Vitals) shows performance grouped by URL pattern — which groups of pages are passing, needing improvement, or failing. Click into a failing group to see the specific URLs and the metric that's failing.

⠀

⠀

Chrome DevTools

For detailed debugging of specific Core Web Vitals issues, Chrome DevTools (Performance tab → run a performance recording) shows exactly what's causing slow LCP, long tasks (INP issues), and layout shifts (CLS issues) with specific element and timing data.

⠀

How to Improve LCP

⠀

Optimize hero images:

  • Compress images to WebP format (50–80% smaller than JPEG/PNG with comparable quality)

  • Set explicit width and height on the image element

  • Use loading="eager" on the LCP image (don't lazy-load it — lazy-loading the hero image delays it)

  • Preload the LCP image using <link rel="preload"> in the <head>

  • Size the image correctly for the viewport (a 4000px-wide image served for a 400px-wide mobile display wastes bandwidth and slows loading)

⠀

Reduce server response time (TTFB):

  • Implement server-side caching

  • Use a CDN to serve content from servers geographically closer to users

  • Upgrade hosting to faster infrastructure if TTFB consistently exceeds 0.6 seconds

⠀

Remove render-blocking resources:

  • Move non-critical JavaScript to load asynchronously or defer

  • Inline critical CSS (above-the-fold styles) and load remaining CSS asynchronously

  • Remove unused CSS and JavaScript

⠀

⠀

How to Improve CLS

⠀

Set explicit dimensions on images and media:

Add width and height attributes to all <img> elements. This allows the browser to reserve the correct space before the image loads, preventing layout shift when the image appears.

Reserve space for ads and embeds:

Dynamically loaded ad units cause CLS when they inject content that pushes other content down. Use container elements with explicit min-height that matches the typical ad size.

Preload fonts or use `font-display: optional`:

Web fonts that load after initial render cause text reflowing (FOIT/FOUT), contributing to CLS. font-display: optional prevents layout shift by only using the web font if it's already cached; otherwise, it uses the fallback font permanently.

⠀

Monitoring Core Web Vitals

⠀

⠀

⠀

Core Web Vitals scores in Google Search Console reflect real user experience and update on a 28-day rolling window. Changes you make to your site don't appear immediately in the report — expect 2–4 weeks of lag before optimizations appear in the field data.

Monitor these metrics after every significant site update (theme changes, new plugins, page redesigns). Development changes that improve visual design frequently introduce CLS or LCP regressions that aren't visible until the Core Web Vitals report updates.

Blakfy diagnoses and improves Core Web Vitals scores for clients — identifying the specific performance issues causing failing scores and implementing the optimizations that improve both user experience and search rankings.

⠀

⠀

Frequently Asked Questions

⠀

How much do Core Web Vitals affect Google rankings?

Google has confirmed Core Web Vitals as a ranking signal as part of the page experience update. The impact is real but not the primary ranking factor — content relevance, authority, and E-E-A-T signals weigh more heavily than page experience. However, at competitive parity (two pages with similar content quality and authority), Core Web Vitals passing scores provide a tiebreaker advantage. Additionally, failing Core Web Vitals correlates with higher bounce rates, which indirectly affects the behavioral signals that influence ranking.

My PageSpeed Insights score is 45 — is that bad?

PageSpeed Insights scores are useful directional indicators, not absolute standards. A score of 45 on the lab measurement doesn't mean your site is failing Core Web Vitals in the field — field data (CrUX) reflects actual user experience, which often differs from lab measurements. Check your Google Search Console Core Web Vitals report for field data rather than optimizing purely for the PageSpeed Insights lab score.

How do I test Core Web Vitals on mobile?

PageSpeed Insights runs both mobile and desktop tests — the mobile test uses a simulated mid-range device and throttled connection, providing a realistic mobile performance measurement. Chrome DevTools allows you to record actual performance on a real device connected via USB (Remote Debugging). The Google Search Console Core Web Vitals report segments data by mobile and desktop, showing real-user performance for each.

Can a website built on Wix, WordPress, or Shopify pass Core Web Vitals?

Yes — modern hosted platforms (including Wix) have invested significantly in Core Web Vitals performance. Platform performance is the baseline, but page-level optimizations (image compression, theme choices, plugin/app load) still affect individual page scores. The most common sources of poor Core Web Vitals on hosted platforms: large unoptimized uploaded images, heavy third-party scripts (chat widgets, marketing tools), and theme choices with excessive CSS/JavaScript.

bottom of page