Performance & Maintenance

What Are Core Web Vitals and How to Improve Them

Core Web Vitals are three Google metrics that measure real-world page experience and directly influence your search rankings.

A laptop displaying an analytics dashboard with real-time data tracking and analysis tools.

Core Web Vitals are three official Google metrics that measure the real experience visitors have when loading and using your page. Since 2021 they have been part of Google's ranking algorithm, meaning improvements directly affect your position in search results.

What Does Each Core Web Vital Measure?

Google defined three signals that cover the most critical aspects of the loading experience:

LCP — Largest Contentful Paint (loading)

Measures how long it takes for the largest visible element to appear on screen — typically a hero image, main text block, or video.

  • Good: under 2.5 seconds
  • Needs improvement: 2.5 – 4.0 seconds
  • Poor: over 4.0 seconds

INP — Interaction to Next Paint (interactivity)

Replaced FID in March 2024. It measures the latency of all user interactions (clicks, taps, key presses) throughout the entire session, not just the first one.

  • Good: under 200 ms
  • Needs improvement: 200 – 500 ms
  • Poor: over 500 ms

CLS — Cumulative Layout Shift (visual stability)

Quantifies how much page elements move unexpectedly while the page loads. A banner that pushes text down right as you try to tap a link is a classic example.

  • Good: under 0.1
  • Needs improvement: 0.1 – 0.25
  • Poor: over 0.25

How to Check Your Current Metrics

Before optimizing, you need to know where you stand. These free tools serve different purposes:

Tool Data type Best for
PageSpeed Insights Lab + real field (CrUX) Quick per-URL diagnosis
Google Search Console → Experience Real field (CrUX) Site-wide overview at a glance
Chrome DevTools → Performance Local lab Detailed debugging
web.dev/measure Lab (Lighthouse) Combined report + suggestions

Always prioritize field data (CrUX) over lab data — it reflects what your real visitors experience, not a simulation.

How to Improve LCP

LCP is often the hardest vital to optimize because it depends on several chained factors.

Preload the hero image

Add <link rel="preload" as="image" href="hero.webp"> in the <head> so the browser fetches the image before processing CSS.

Serve images in modern formats

Convert your JPEGs and PNGs to WebP or AVIF. An image weighing 200 KB in JPEG can drop to 80 KB in WebP with the same perceived quality.

Reduce TTFB

A slow server is the most underestimated root cause of a high LCP. Enable full-page caching (for example with WP Rocket in WordPress or mod_cache in Apache) and consider optimized web hosting with server response times under 200 ms.

Eliminate render-blocking resources

CSS and JS files that block rendering delay everything that follows. Load non-critical scripts with defer or async and move non-essential stylesheets out of the <head>.

How to Improve INP

A high INP almost always points to JavaScript monopolizing the main thread for too long.

  • Break up long tasks using setTimeout or scheduler.yield() to yield the thread back to the browser between work blocks.
  • Audit third-party scripts: analytics, chatbots, and social widgets are the main culprits. Load them after the load event.
  • Reduce unnecessary JavaScript with tree-shaking and load only what the page actually needs (code splitting).
  • Use Web Workers for heavy operations that don't need DOM access.

How to Improve CLS

CLS is fixed by reserving space for content that takes time to load:

  • Always specify width and height on <img> and <video> tags. The browser reserves the exact space before downloading the resource.
  • Set fixed dimensions for embedded ads and banners. If the space varies, reserve the maximum expected size.
  • Avoid injecting dynamic content (cookie banners, notifications) above visible content without reserving space in advance.
  • Use font-display: swap for web fonts to avoid text jumps when the custom typeface loads.

If your site runs on WordPress, working with a team specialized in web performance can automate many of these fixes. You'll also find more practical guides in our web performance section.

Key Takeaways

  • Core Web Vitals are LCP (loading), INP (interactivity), and CLS (visual stability) — all official Google ranking factors.
  • Check field data in Search Console or PageSpeed Insights before optimizing.
  • LCP improves with preloading, modern image formats, fast hosting, and eliminating render-blocking resources.
  • INP improves by reducing and splitting JavaScript work on the main thread.
  • CLS is fixed by declaring explicit dimensions on images, ads, and web fonts.
  • Sustained improvement requires ongoing monitoring, not a one-time fix.

Want to know exactly what's slowing your site down? At elenlace.com we run Core Web Vitals audits and apply the necessary fixes so your site loads fast and climbs Google rankings.

FAQ

Do Core Web Vitals directly affect my Google ranking?

Yes. Since May 2021 they have been part of the Page Experience signals Google uses as a ranking factor. They are not the only factor, but they can make the difference between two pages with similar content.

How often should I check my Core Web Vitals?

At least once a month in Search Console and whenever you make significant changes to the site. CrUX field data is updated with a rolling 28-day window.

What if my site has few visitors and doesn't appear in CrUX?

Google does not show field data for URLs with low traffic. In that case, rely exclusively on lab data (PageSpeed Insights, Lighthouse) as a reference, and focus on reaching the recommended scores.

Can WordPress achieve good Core Web Vitals?

Absolutely. WordPress can reach excellent scores with the right combination: fast hosting, a lightweight theme, optimized images, and a solid performance plugin. The main challenges are heavy third-party plugins and JavaScript-heavy themes.

Useful resources

Other providers and guides worth comparing:

← All