Core Web Vitals Explained: What They Are and How to Fix Them

Core Web Vitals are Google’s set of user experience metrics — specific, measurable signals that Google uses to evaluate whether a web page provides a good user experience. Since 2021, they have been a confirmed Google ranking signal, meaning poor Core Web Vitals scores can directly suppress your search rankings relative to competitors whose sites perform better.

This post explains each metric in plain English, how to measure them, and — critically — how to fix the most common issues on WordPress websites.

The Three Core Web Vitals Metrics

1. LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to load. For most websites, this is the hero image, a large heading, or a featured video. LCP is essentially Google’s measure of ‘how long until the user sees something meaningful’.

• Good: under 2.5 seconds
• Needs Improvement: 2.5 to 4.0 seconds
• Poor: over 4.0 seconds

LCP is the metric most affected by large, unoptimised images and slow hosting.

2. INP — Interaction to Next Paint

INP replaced FID (First Input Delay) as the Core Web Vitals interactivity metric in 2024. INP measures the time from when a user interacts with the page (clicks a button, taps a menu, fills a form field) to when the page visually responds. A high INP means the page feels laggy and unresponsive.

• Good: under 200 milliseconds
• Needs Improvement: 200 to 500 milliseconds
• Poor: over 500 milliseconds

INP is primarily affected by heavy JavaScript execution on the main thread.

3. CLS — Cumulative Layout Shift

CLS measures visual instability — how much page elements shift around while the page loads. The classic example: you’re about to click a button, then an image loads above it and pushes the button down, and you accidentally click something else. CLS quantifies this frustrating experience.

• Good: under 0.1
• Needs Improvement: 0.1 to 0.25
• Poor: over 0.25

CLS is primarily caused by images or ads loading without reserved space, and fonts that swap after the page has already rendered.

How to Measure Your Core Web Vitals

Google PageSpeed Insights (free) shows both lab data (simulated) and field data (real user data from Chrome browsers) for your URL. Google Search Console → Core Web Vitals report shows how your pages are performing across your real user base, segmented by mobile and desktop. The Field Data in Search Console is the most authoritative — it’s what Google actually uses for ranking.

How to Fix Poor LCP on WordPress

• Compress and convert your hero image to WebP format — target under 200KB
• Add `fetchpriority=’high’` attribute to the hero image so the browser loads it first
• Enable resource hints: `<link rel=’preconnect’>` for Google Fonts and external resources
• Upgrade to faster hosting or move to a server geographically closer to your audience
• Enable server-side caching (via your caching plugin or hosting panel)
• Use a CDN (Cloudflare) to serve static assets from edge nodes closer to users

How to Fix Poor INP on WordPress

• Identify and minimise third-party scripts (chat widgets, analytics, ad networks) that run on the main thread
• Defer non-critical JavaScript using the `defer` attribute
• Remove unused JavaScript — particularly from inactive plugins (deactivate and delete, don’t just deactivate)
• Use WP Rocket’s ‘Delay JavaScript Execution’ feature to postpone non-critical scripts until user interaction
• Avoid complex DOM manipulation on page load — prefer loading additional content on user interaction

How to Fix Poor CLS on WordPress

• Add explicit width and height attributes to all images in HTML — this reserves space before the image loads
• For WordPress, use the ‘Add Missing Image Dimensions’ setting in WP Rocket
• Avoid inserting content above existing content dynamically (banners, cookie notices, popups that push content down)
• Use `font-display: optional` or preload fonts to prevent layout shift from font swap
• If you run ads, reserve fixed-size ad slots in your CSS so ads don’t cause layout shift when they load

WordPress-Specific Core Web Vitals Checklist

1. Upgrade hosting to managed WordPress or a quality VPS
2. Install WP Rocket or LiteSpeed Cache and configure properly
3. Convert all images to WebP and add explicit dimensions
4. Connect Cloudflare as CDN and enable caching rules
5. Audit and remove unused plugins
6. Defer and delay non-critical JavaScript
7. Preconnect to Google Fonts and other external domains
8. Check Search Console monthly for CWV status across mobile and desktop

Poor Core Web Vitals rarely fix themselves — they require active intervention. If this feels complex, our WordPress maintenance team handles Core Web Vitals monitoring and optimisation as an ongoing service. And if you’re commissioning a new site, our WordPress development process bakes performance-first architecture in from day one so you’re not fighting these issues post-launch.