Web Development

Core Web Vitals Explained (and How to Improve Them)

W WDesign IT Team 3 min read
Core Web Vitals performance metrics on a dashboard

Core Web Vitals are Google’s way of measuring real-world user experience — and they’re a confirmed ranking factor. If you’ve seen these terms in a performance report and felt lost, this guide breaks them down in plain English.

What are Core Web Vitals?

Core Web Vitals are a set of three metrics, defined by Google on web.dev, that quantify loading speed, interactivity, and visual stability. They’re part of the broader “page experience” signals Google uses to assess quality.

The three metrics

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element — usually a hero image or headline — to load. Good: under 2.5 seconds. Slow LCP usually means heavy images, slow servers, or render-blocking resources.

Interaction to Next Paint (INP)

INP measures responsiveness — how quickly the page reacts when a user clicks or taps. Good: under 200 milliseconds. Poor INP is typically caused by heavy JavaScript blocking the main thread.

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much elements jump around as the page loads. Good: under 0.1. Common causes are images without dimensions and fonts that cause reflow.

Measuring loading, interactivity, and layout stability

How to measure them

Use PageSpeed Insights for both lab and real-world (field) data, Lighthouse for diagnostics, and Google Search Console, which has a dedicated Core Web Vitals report based on real visitor data.

How to improve LCP

  • Optimise and properly size your hero image (see our performance optimization guide)
  • Use a CDN and fast hosting
  • Preload critical resources
  • Eliminate render-blocking CSS and JavaScript

How to improve INP

  • Reduce and split JavaScript bundles
  • Defer non-essential scripts
  • Choose a lightweight framework — this ties back to choosing a tech stack

How to improve CLS

  • Always set width and height on images and videos
  • Reserve space for ads and embeds
  • Use font-display: swap and preload fonts to avoid text reflow

Why they matter beyond SEO

Even setting rankings aside, these metrics map directly to user satisfaction. Faster, smoother, more stable pages convert better — the same outcome we target in high-converting websites.

The takeaway

Core Web Vitals turn “fast and smooth” into something you can measure and improve. Track them, fix the biggest offenders first, and monitor over time. If you’d like a site that hits green across the board, our web development service builds for Core Web Vitals from day one.

Further reading

Need a hand with your project?

Get a free quote from our team — no commitment required.

No spam. We’ll only use your details to reply to your enquiry.

Looking for web development help?

See how our Web Development service can help you grow.

Explore Web Development →

Keep reading