core web vitals


Core Web Vitals measure loading (LCP), visual stability (CLS), and responsiveness (INP). Aim for LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms at the 75th percentile of field data. Use PageSpeed Insights/CrUX to measure real users, then fix the LCP image and fonts, prevent layout shifts, and trim/blocking JavaScript—especially on mobile.

Improve your Core Web Vitals
Get a fast, actionable audit from our performance team.

  • Field data review (CrUX), PSI diagnostics, Lighthouse traces
  • Prioritized fix list for LCP/CLS/INP with effort/impact
  • Platform‑specific settings and code snippets
    Contact Us
  • Request a Core Web Vitals performance audit and turn every metric into measurable growth.

What are Core Web Vitals?

lcp cls inp metrics

Core Web Vitals are user‑centric performance metrics Google uses to evaluate page experience:

  • LCP (Largest Contentful Paint): How quickly the main content appears.
  • CLS (Cumulative Layout Shift): How visually stable the page is while loading.
  • INP (Interaction to Next Paint): How quickly the page responds to user input. INP replaced FID in 2024.

🧠 Did you know?
👉 Sites that meet Core Web Vitals thresholds see a 24% lower bounce rate and users spend 15% more time on their pages.

Do Core Web Vitals affect Google rankings?

Yes—Core Web Vitals are part of Google’s page experience signals. They’re not a silver bullet, but good CWV can support visibility and improve engagement and conversions, especially on mobile. High‑quality content and intent match still lead, but poor CWV can hold you back.

Targets and thresholds (at the 75th percentile of field data)

  • LCP: Good ≤ 2.5s, Needs improvement 2.5–4.0s, Poor > 4.0s
  • CLS: Good ≤ 0.1, Needs improvement 0.1–0.25, Poor > 0.25
  • INP: Good ≤ 200ms, Needs improvement 200–500ms, Poor > 500ms
MetricGoodNeeds ImprovementPoor
LCP≤ 2.5s2.5–4s> 4s
CLS≤ 0.10.1–0.25> 0.25
INP≤ 200ms200–500ms> 500ms

💡 See this also: Google’s Nano Banana AI Tool 2025

Field vs lab data (why both matter)

  • Field data (CrUX): Real‑user data from Chrome, used for CWV evaluation. Shows how your site performs across devices, networks, and geographies. Stabilizes over 28 days.
  • Lab data (Lighthouse): Synthetic tests in controlled conditions. Great for debugging and measuring the impact of specific changes.

How to measure

  • PageSpeed Insights (PSI): Enter a URL to see field data (if eligible) plus lab diagnostics. Prioritize mobile results.
  • Lighthouse (Chrome DevTools): Run lab audits, record performance traces, and identify long tasks and bottlenecks.
  • Search Console: Core Web Vitals report groups similar URLs and highlights sitewide issues.
  • CrUX Dashboard (Looker Studio): Track field data trends by URL patterns and markets.

👉 Did you know?

A 1-second delay in page load time can reduce conversions by up to 20%, and Google ranks faster sites higher on both mobile and desktop.

How to improve Core Web Vitals metrics

improve core web vitals performance

LCP CLS INP explained

  1. Improve LCP (Largest Contentful Paint)
    Goal: Make the main content render fast—especially the hero image/text.
  • Optimize the LCP element
    • Identify the LCP element in PSI/Lighthouse.
    • Compress and convert the hero image to WebP/AVIF; size appropriately.
    • Do not lazy‑load the LCP image. Use loading=”eager” and fetchpriority=”high”.
  • Reduce TTFB and render delay
    • Use efficient hosting/CDN; enable edge HTML caching where appropriate.
    • Minimize render‑blocking CSS/JS; inline critical CSS.
    • Preload key assets: hero image, primary font, critical CSS.
  • Fonts and CSS
    • Use font‑display: swap and limit weights/styles.
    • Preload your primary WOFF2; self‑host when possible.

Example hero image
<img src=”/images/hero.webp” width=”1600″ height=”900″ loading=”eager” fetchpriority=”high” alt=”Hero image showing main content” />

  1. Reduce CLS (Cumulative Layout Shift)
    Goal: Stop unexpected visual movement during load.
  • Reserve space
    • Always include width/height or aspect-ratio for images and videos.
    • Provide fixed containers/placeholders for ads, embeds, and iframes.
  • Font stability
    • Preload critical fonts to avoid swaps; use font‑display: swap/fallbacks with similar metrics.
  • UI discipline
    • Avoid inserting banners, consent prompts, or ads above existing content without reserving space.
  1. Improve INP (Interaction to Next Paint)
    Goal: Make the page respond quickly to input (typing, taps, clicks).
  • Trim JavaScript and break up long tasks
    • Defer/delay non‑critical scripts (analytics, A/B, chat).
    • Split bundles; load route‑level scripts only where needed.
    • Use the Performance panel to find tasks >50ms and chunk them.
  • Optimize interactivity
    • Prefer CSS for simple animations/transitions.
    • Avoid heavy DOM work on input; debounce expensive handlers.
  • Third‑parties
    • Audit tags regularly; remove unused pixels; load non‑essentials after interaction or consent.

Sitewide factors that move the needle

  • TTFB: Aim for <0.8s on mobile. Use fast hosting, edge caching (CDN), HTTP/3, TLS 1.3, and object caching for dynamic sites.
  • Images: Use modern formats (WebP/AVIF), responsive srcset/sizes, and an image CDN with smart compression.
  • Fonts: Self‑host WOFF2, subset character sets, preload primary fonts, minimize weights.
  • CSS/JS: Minify and remove unused CSS; defer/delay JS. Bundle only when it helps; HTTP/2/3 handles many small files well.
  • Third‑party scripts: Keep a lean allowlist. Each tag must earn its keep.
  • Page builders/CMS: Reduce DOM depth, avoid heavy sliders/pop‑ups on mobile, and load features on pages that need them.

⚙️ Did you know?

👉  Images contribute to over 60% of slow LCP issues, especially large hero banners and unoptimized background videos.

Platform tips

WordPress

  • Use a cache plugin (LiteSpeed Cache, WP Rocket) with HTML caching and remove/critical CSS.
  • Delay/defer non‑critical JS; exclude the LCP image from lazy‑load.
  • Optimize images with ShortPixel/Imagify or QUIC.cloud; serve WebP/AVIF.
  • Object cache (Redis) for dynamic pages; Cloudflare APO or QUIC.cloud for edge caching.

Shopify

  • Limit installed apps; remove unused scripts.
  • Use Online Store 2.0 features; reduce section complexity on homepage.
  • Compress hero images; avoid lazy‑loading LCP image; preload key fonts.
  • Consider an image CDN and route‑level script control.

Monitoring and QA

  • Track: Search Console CWV by URL group; CrUX Dashboard for field data trends.
  • Test: PSI mobile first; Lighthouse traces before/after changes; WebPageTest for waterfalls and TTFB.
  • Alert: Set budgets in Lighthouse CI; review third‑party tags quarterly.
  • Rollout: Ship changes in small batches; use staging; keep rollback plans.

💡 See this also: Top Free Website Hosting Services — explore reliable and cost-effective hosting options to boost your site’s speed and performance.

Checklist to Improve Core Web Vitals Metrics

  1. Identify the LCP element; convert to WebP/AVIF, size correctly, and exclude from lazy‑load.
  2. Preload the LCP image and the primary WOFF2 font; inline critical CSS.
  3. Minify CSS/JS; remove unused CSS; defer/delay non‑critical JS.
  4. Improve TTFB with fast hosting + CDN edge caching (HTML + static assets).
  5. Add width/height or aspect‑ratio to all media; reserve space for ads/embeds.
  6. Self‑host and subset fonts; limit to 1–2 weights; font‑display: swap.
  7. Eliminate long JS tasks; split bundles; load route‑level scripts only when needed.
  8. Audit third‑party tags; load after interaction/consent; remove unused.
  9. Verify mobile PSI and compare field vs lab; monitor CWV in Search Console.
  10. Repeat quarterly and after major content/design changes.

👉 Did you know?
📱 More than 90% of Google searches now happen on mobile, yet two-thirds of websites still don’t pass Core Web Vitals on mobile devices.

FAQs

Q: What are the three Core Web Vitals?
A: LCP (loading), CLS (visual stability), and INP (responsiveness). INP replaced FID in 2024.

Q: What scores should I aim for?
A: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms—measured at the 75th percentile of real‑user (field) data.

Q: Do Core Web Vitals impact SEO?
A: Yes, they contribute to page experience signals. They won’t outrank irrelevant content, but poor CWV can hurt visibility and user engagement.

Q: Why do I pass on desktop but fail on mobile?
A: Mobile networks/devices amplify issues: heavy images, render‑blocking CSS/JS, long TTFB, and third‑party scripts. Optimize for mobile first.

Q: How long until field data improves?
A: The CrUX dataset updates over a 28‑day window. Expect a few weeks for changes to reflect in field metrics.

🌐 Did you know?
Websites that test only in Lighthouse often miss up to 40% of real user issues — CrUX (Chrome User Experience Report) shows the real story.

🏁 Conclusion: Pass Core Web Vitals and Future-Proof Your Website in 2025

Mastering Core Web Vitals isn’t just about meeting Google’s metrics — it’s about delivering a faster, smoother, and more engaging experience for your users. As search continues to evolve in 2025, websites that combine technical performance, user experience, and content quality will stay ahead of every algorithm update.

Start by fixing the fundamentals:
✅ Optimize your LCP with fast-loading hero images and efficient caching.
✅ Stabilize your CLS by reserving space and preloading fonts.
✅ Improve INP by trimming JavaScript and enhancing interactivity.

Regularly monitor your field data with PageSpeed Insights, Search Console, and CrUX, and take a proactive approach to performance audits. Every millisecond you save translates into higher engagement, better SEO, and stronger conversions.

In short — pass Core Web Vitals, and you don’t just please Google—you delight real users.