Core Web Vitals Explained: How to Pass Google's Performance Test

Google doesn't just rank pages by content anymore. Since 2021, your site's performance directly affects where you show up in search results. The system Google uses to measure that performance is called Core Web Vitals, and if your scores are poor, you're losing rankings to competitors with faster sites.

Here's what each metric means, what causes bad scores, and how to fix them.

The Three Core Web Vitals

Google measures three specific things about how your page loads and responds. Each one captures a different part of the user experience.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the biggest visible element on your page to finish rendering. That's usually a hero image, a video thumbnail, or a large block of text. Google wants this to happen in 2.5 seconds or less.

Think of it this way: LCP is the moment a visitor feels like the page has actually loaded. Everything before that feels like waiting.

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) in March 2024. It measures how quickly your page responds when someone clicks a button, taps a link, or types in a form field. Google wants responses in 200 milliseconds or less.

Unlike FID, which only measured the first interaction, INP tracks every interaction throughout the entire page visit and reports the worst one. If your page feels sluggish at any point, INP will catch it.

Cumulative Layout Shift (CLS)

CLS measures how much your page layout jumps around while loading. You've probably experienced this yourself: you start reading an article, an ad loads above, and suddenly the text shifts down. That's layout shift, and it's infuriating.

Google wants a CLS score of 0.1 or less. Anything higher means elements are moving around enough to disrupt the reading experience.

How to Check Your Scores

You have several free tools available:

PageSpeed Insights (pagespeed.web.dev) gives you both lab data and real-user data from the Chrome User Experience Report
Google Search Console has a Core Web Vitals report that flags problem pages across your entire site
Chrome DevTools Performance tab lets you diagnose issues in real time during development
web.dev/measure runs a Lighthouse audit and provides specific recommendations

Start with PageSpeed Insights. Enter your URL and look at the "field data" section first. That shows real performance from actual visitors. Lab data is useful for debugging, but field data is what Google uses for rankings.

Fixing Slow LCP

LCP problems almost always come from one of four sources:

Slow server response time. If your server takes 800ms just to start sending HTML, you've already burned a third of your budget. This is where hosting matters most. NVMe SSD storage, adequate RAM, and proximity to your visitors all reduce Time to First Byte (TTFB).
Render-blocking resources. Large CSS and JavaScript files that load in the <head> block the browser from rendering anything. Inline critical CSS, defer non-essential scripts, and remove unused code.
Unoptimized images. A 3MB hero image will tank your LCP every time. Use WebP or AVIF format, serve responsive sizes with srcset, and add fetchpriority="high" to your LCP image.
Client-side rendering delays. If your page relies on JavaScript to render the main content, the browser has to download, parse, and execute JS before LCP can even start. Server-side rendering or static generation eliminates this bottleneck.

Fixing Poor INP

INP problems are caused by JavaScript blocking the browser's main thread. When a user clicks something, the browser can't update the screen until the main thread is free.

Break up long tasks. Any JavaScript task running longer than 50ms blocks interactions. Split heavy operations into smaller chunks using requestIdleCallback or setTimeout.
Reduce third-party scripts. Analytics, chat widgets, ad scripts, and social embeds all compete for main thread time. Audit your third-party scripts and remove anything that isn't pulling its weight.
Use web workers. Move heavy computation off the main thread entirely. Data processing, complex calculations, and large JSON parsing can all happen in a web worker without blocking interactions.
Debounce event handlers. If your scroll or resize handlers trigger expensive operations, debounce them so they don't fire on every single event.

Fixing Layout Shift (CLS)

CLS is often the easiest metric to fix because the causes are straightforward:

Set explicit dimensions on images and videos. Always include width and height attributes. The browser reserves space before the file loads, preventing shifts.
Reserve space for ads and embeds. If you load ads dynamically, wrap them in a container with a minimum height matching the ad size.
Avoid inserting content above existing content. Banners, cookie notices, and notification bars should push content down from the top before the page is interactive, not after.
Use CSS font-display: swap carefully. Custom fonts that load late can cause text to reflow. Preload your primary fonts and use font-display: optional if font swap is causing visible shifts.

How Your Hosting Affects Core Web Vitals

Your hosting provider controls the first and most critical variable: server response time. No amount of frontend optimization can fix a server that takes a full second to respond.

Here's what makes the difference at the server level:

NVMe SSD storage reads data 5-7x faster than traditional SSDs and dramatically faster than spinning disks
Adequate PHP workers prevent requests from queuing during traffic spikes
Server-side caching (like LiteSpeed Cache or Redis) serves pages from memory instead of regenerating them on every request
Geographic proximity reduces the physical distance data travels, cutting latency by 20-100ms per hop

SpectraHost shared hosting and VPS plans run on NVMe storage with LiteSpeed web server and built-in caching. That combination handles the server-side performance so you can focus on optimizing your code and content.

A Quick Action Plan

If you want to improve your Core Web Vitals scores this week, here's where to start:

Run PageSpeed Insights on your five highest-traffic pages
Fix any images missing width/height attributes (instant CLS improvement)
Convert images to WebP format (LCP improvement)
Audit and defer non-critical JavaScript (INP improvement)
Check your server response time. If TTFB is over 600ms, your hosting is the bottleneck

Core Web Vitals aren't going away. Google has been increasing their weight in the ranking algorithm year over year. The sites that pass consistently are the ones that win in search.

See SpectraHost plans built for performance →