Core Web Vitals

What Are Core Web Vitals?

Core Web Vitals are three Google metrics that measure how a page feels to real visitors: how fast the main content loads, how quickly the page responds when someone taps or clicks, and how stable the layout stays while loading. Google uses them as part of its page experience signals, and SEOs and developers check them in PageSpeed Insights and Search Console.

Note: INP replaced First Input Delay (FID) in March 2024. Many older guides still mention FID, so check the date on anything you read.

Why Is Core Web Vitals Important?

Core Web Vitals are one part of technical SEO, alongside crawlability, indexing and site structure. These metrics put numbers on the things that make people leave a site. Think of a product page where the photo takes five seconds to show up, or an “Add to cart” button that freezes for a moment after you tap it. The most familiar one is a news article where an ad loads late and pushes the paragraph you were reading off the screen.

Google uses Core Web Vitals in its ranking systems, but keep that in proportion. Google has said plainly that relevant, helpful content can still rank well with average page experience. Great scores won’t lift a thin page to the top. They tend to matter most as a tiebreaker in competitive results, where several pages answer the query equally well.

The bigger cost of ignoring them is usually lost visitors and sales, especially on mobile and slower connections.

How Does Core Web Vitals Work?

The scores Google counts come from real Chrome users, not from a test you run once:

• Chrome collects anonymous performance data from users who have opted in, and Google publishes it in the Chrome UX Report (CrUX).
• Google looks at the 75th percentile of visits over the last 28 days. A page passes only if at least three out of four visits hit the “good” threshold.
• Mobile and desktop are scored separately. Many sites pass on desktop and fail on mobile.
• If a page doesn’t get enough traffic to have its own data, Google may fall back to data for similar pages or for the whole site. Very small sites may show no data at all.

Two kinds of data cause most of the confusion. Field data comes from real users, and it’s what Google uses. Lab data, such as a Lighthouse test, is a simulated single load on one device. It’s useful for debugging, but it can’t measure INP directly, and its numbers often don’t match what Search Console reports.

Best Practices for Core Web Vitals

• Find your LCP element in PageSpeed Insights first: It’s often the hero image, and it shouldn’t be lazy-loaded. Adding fetchpriority="high" to it can help the browser fetch it sooner.
• Serve images in WebP or AVIF at display size: A 3000-pixel photo shrunk down to a 600-pixel slot is one of the most common LCP problems.
• Set explicit width and height (or aspect-ratio): On every image, video, and embed so the browser can reserve the space before the file arrives. This fixes a lot of CLS on its own.
• Reserve fixed space for dynamic elements: Fixed space for ads, cookie banners, and late-loading content prevents injecting content above what the visitor is already reading.
• Cut back on third-party scripts: Chat widgets, heatmaps, extra tracking tags, and social embeds are frequent causes of poor INP. Remove the ones nobody uses and delay the rest until after the page loads.
• Fix slow server response time (TTFB): Good hosting, page caching, and a CDN make every other optimization easier.
• Audit heavy builders and stacked plugins: On WordPress, one well-configured caching plugin usually does more than three overlapping “speed” plugins.

Common Mistakes to Avoid

• Chasing a 100 Lighthouse score: A perfect lab score feels good but isn’t what Google measures. Watch the field data in Search Console and the real-user section of PageSpeed Insights.
• Expecting results the next day: Field data is a 28-day rolling average, so a fix made today takes weeks to fully show. Give it a full cycle, then use the “Validate fix” option in Search Console.
• Testing only the homepage: The homepage is often the most optimized page on the site. Product, category, and blog templates are where the problems usually sit.
• Installing every speed plugin at once: Overlapping minification, caching, and lazy-loading settings can break layouts or make CLS worse. Use one tool, change one setting at a time, and retest.

How to Fix Core Web Vitals Issues

Start with the Core Web Vitals report in Search Console to see which metric is failing and on which URL group. Then run a few sample URLs through PageSpeed Insights for the specific causes.

LCP is Slow

The usual causes are a slow server, a large or lazy-loaded hero image, or render-blocking CSS and JavaScript. Check Time to First Byte (TTFB) first. If the server alone takes over a second to respond, front-end tweaks won’t be enough, and caching, a CDN, or better hosting comes first.

INP is Poor

Heavy JavaScript is almost always behind it. Long tasks block the browser from responding when someone taps. Audit third-party scripts, remove unused ones, and ask a developer to break long tasks into smaller pieces if your own code is the problem.

CLS is High

Look for images without dimensions, ads or embeds without reserved space, and web fonts that swap in and change text size. The PageSpeed Insights diagnostics list the exact elements that moved.

Warning: Before removing a script, check what depends on it. Deleting a tag manager or an analytics script to speed things up can quietly break tracking or conversions.

Pro Tips for Core Web Vitals

• If Search Console shows “Not enough usage data”: Google is likely using site-level data or none at all. Spend that time on content and links, not on chasing milliseconds.
• Test with CPU throttling: Pages that pass in testing but fail in the field often have the problem on slower phones. Test with CPU throttling turned on in Chrome DevTools to see what those users get.
• Inspect cookie consent banners: They are a frequent hidden cause of both LCP and CLS problems, because they can become the largest element on the screen.
• A site that passes isn’t finished: A new plugin, a redesigned hero section, or an extra marketing tag can push a passing page back into the red within a month.

Frequently Asked Questions