What Are Core Web Vitals and Why Do They Matter?
Core Web Vitals are a set of real-world performance metrics that Google uses to evaluate the user experience of a web page. Introduced as a ranking factor in 2021, they have grown in importance every year since. In 2025, Google continues to use these signals as part of its Page Experience ranking system — meaning a site that scores poorly can lose organic visibility even if its content is excellent.
Crucially, these are not theoretical benchmarks. They are measured from real user data collected via Chrome browsers and aggregated in the Chrome User Experience Report (CrUX). If your visitors are having a poor experience, Google knows about it — and your rankings will reflect that.
There are three Core Web Vitals metrics, each targeting a different dimension of the user experience:
- LCP (Largest Contentful Paint) — loading performance
- INP (Interaction to Next Paint) — interactivity and responsiveness
- CLS (Cumulative Layout Shift) — visual stability
LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible element in the viewport — typically a hero image, a large heading, or a video poster — to fully render on screen. Google's threshold for a "good" score is under 2.5 seconds. Between 2.5 and 4 seconds is considered "needs improvement", and anything above 4 seconds is "poor".
Common causes of poor LCP
- Slow server response times (TTFB above 600ms)
- Render-blocking JavaScript and CSS in the document head
- Large, uncompressed hero images not served in modern formats (WebP, AVIF)
- Images loaded lazily when they should be prioritised
- Third-party scripts delaying the critical rendering path
How to improve LCP
The single biggest win is almost always image optimisation. Convert your hero images to WebP or AVIF and use the fetchpriority="high" attribute on the LCP element to tell the browser to prioritise it. Avoid using loading="lazy" on above-the-fold images — lazy loading is helpful for images further down the page, but it actively harms LCP when applied to the main hero. Additionally, serve your pages from a content delivery network (CDN) to reduce the physical distance between your server and the user.
INP: Interaction to Next Paint
INP replaced FID (First Input Delay) as an official Core Web Vital in March 2024. While FID only measured the delay on the very first interaction, INP evaluates all interactions throughout the page lifecycle — clicks, taps, and keyboard inputs. Google's "good" threshold is under 200 milliseconds.
A poor INP score means your page feels sluggish to users: buttons that don't respond immediately, filters that take a moment to register, forms that lag as you type. Even if a page loads quickly, a high INP score signals a frustrating experience.
Common causes of poor INP
- Long JavaScript tasks blocking the main thread
- Heavy third-party scripts (chat widgets, analytics, ad scripts)
- Inefficient event handlers that trigger expensive re-renders
- Too much work happening synchronously in response to a user action
How to improve INP
Break up long JavaScript tasks using setTimeout or the Scheduler API. Audit your third-party scripts ruthlessly — remove anything that isn't delivering clear business value. For WordPress sites, deactivate plugins one by one and re-test INP scores to identify offenders. For React or other framework-based sites, investigate component re-render frequency and use memoisation where appropriate.
CLS: Cumulative Layout Shift
CLS measures the visual stability of a page — specifically, how much the layout unexpectedly shifts as the page loads. A layout shift happens when an element moves from its initial position: images without dimensions, ads that load in and push content down, or web fonts swapping mid-render. Google's "good" threshold is a CLS score below 0.1.
Common causes of poor CLS
- Images and video without specified width and height attributes
- Ads, embeds, or iframes without reserved space
- Dynamically injected content above existing content
- Web fonts causing FOUT (Flash of Unstyled Text) with different metrics
- Animations that use layout-triggering properties like
top,left, ormargin
How to improve CLS
Always include explicit width and height attributes on images and video elements. Reserve space for ad slots using CSS min-height. For fonts, use font-display: optional or font-display: swap combined with a size-adjusted fallback font to minimise layout shift during font swap. Use CSS transform and opacity for animations instead of properties that trigger layout recalculation.
How to Measure Core Web Vitals
There are two types of data to consider: lab data (simulated) and field data (real users). Both are important, but field data is what Google actually uses for rankings.
- Google PageSpeed Insights — shows both lab and field data, powered by CrUX. The free go-to tool for any audit.
- Google Search Console — the Core Web Vitals report groups your URLs into "Good", "Needs Improvement" and "Poor" categories based on real field data. Invaluable for identifying which pages to prioritise.
- CrUX Dashboard — a Looker Studio template that tracks your Core Web Vitals trends over time at domain level.
- WebPageTest — offers granular filmstrip analysis and waterfall charts useful for identifying exactly what is causing slow LCP.
- Chrome DevTools — the Performance panel lets you profile interactions in real time, essential for diagnosing INP issues.
WordPress-Specific Fixes
WordPress powers a large proportion of UK business websites, and it has specific quirks that affect Core Web Vitals.
- Caching plugins: WP Rocket is the gold standard for most sites — it handles page caching, file minification, lazy loading, and preloading with minimal configuration. W3 Total Cache is a free alternative that requires more manual configuration but is highly capable.
- Image optimisation: Install ShortPixel or Smush to automatically compress images and serve them in WebP format. Both integrate with the WordPress media library and process existing images in bulk.
- Critical CSS: WP Rocket's "Remove Unused CSS" feature eliminates render-blocking CSS by generating critical CSS per page type. This alone can improve LCP significantly.
- Plugin audits: Every active plugin adds PHP execution time and potentially JavaScript to your pages. Deactivate and delete plugins you no longer use. Replace multiple single-purpose plugins with multi-function alternatives where possible.
- Hosting: Shared hosting is the most common reason for a high TTFB. Upgrading to managed WordPress hosting (WP Engine, Kinsta, or Cloudways) typically improves server response times dramatically.
Shopify Performance Tips
Shopify merchants have less server-level control than WordPress site owners, but there is still plenty you can do. Choose a lightweight, performance-optimised theme — many popular themes are bloated with features you will never use. Audit your installed apps carefully: each Shopify app can inject scripts into your storefront, and even a handful of apps can push your INP score into "poor" territory. Use Shopify's built-in image optimisation (it automatically serves WebP) and ensure you are setting explicit dimensions on all product and collection images. The Shopify Speed Score in your admin is a useful starting point, but always cross-reference with PageSpeed Insights for field data.
Key Takeaway
Core Web Vitals are a genuine ranking factor in 2025, but more importantly, they reflect real user experience. Prioritise fixing LCP first (image optimisation and server response time give the biggest wins), then tackle CLS by adding image dimensions, and finally address INP by auditing your JavaScript. Use Google Search Console to identify which pages need the most urgent attention, and verify improvements using PageSpeed Insights field data — not just lab scores.
When to Hire a Developer
Many Core Web Vitals issues can be addressed through plugins and configuration changes — but some require deeper technical work. If your LCP is above 4 seconds despite image optimisation and caching, you likely need a developer to audit your server configuration, implement server-side rendering, or refactor the critical rendering path. INP problems rooted in complex JavaScript interactions almost always require a developer to profile and fix. If you have invested time in the "easy wins" and your scores remain poor, a professional technical audit will identify root causes that surface-level tools cannot reveal.
Final Thoughts
Core Web Vitals are not a one-time fix. Google continues to refine its thresholds and measurement methodology, and as your website evolves — new plugins, updated themes, additional third-party scripts — your scores will change. Build regular performance monitoring into your workflow: set up a monthly PageSpeed Insights check, review your Search Console Core Web Vitals report quarterly, and treat performance as an ongoing discipline rather than a single project. Sites that prioritise performance consistently outperform competitors not just in rankings, but in conversion rates and user satisfaction. If you need expert help assessing or improving your site's Core Web Vitals, our web development team is ready to assist.
