Google has been using Core Web Vitals as a ranking signal since 2021, but most WordPress sites still score poorly on at least one of the three metrics. A slow LCP, layout shifts on load, or sluggish interaction responses can all affect where your pages appear in search results — and how quickly visitors give up and leave.
The three Core Web Vitals are Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Each measures a different aspect of how a page feels to real users. The good news is that WordPress gives you straightforward ways to address all three without needing a developer.
This guide walks through the most effective fixes for each metric, starting with the ones that move the needle fastest.
Quick Answer
To improve Core Web Vitals in WordPress: optimise and compress images, serve them in next-gen formats like WebP, enable lazy loading for off-screen images, preload your hero image, set explicit width and height on all images, and use a caching plugin to reduce server response time. Fixing these five things typically resolves the majority of Core Web Vitals issues on a standard WordPress site.
Why Core Web Vitals Matter for Your Site
Core Web Vitals are part of Google’s Page Experience signals. Sites that score well — LCP under 2.5 seconds, CLS below 0.1, INP under 200 milliseconds — are eligible for a ranking advantage compared to slower alternatives. More practically, each metric corresponds directly to something users notice: how quickly the main content appears, whether the page jumps around while loading, and how fast it responds when they tap or click.
Poor scores tend to compound. A site that loads slowly also tends to frustrate users, which increases bounce rate, which reduces the engagement signals Google tracks. Fixing Core Web Vitals improves both your rankings and the actual experience of using your site.
How to Check Your Current Scores
Before you start fixing, find out where your site actually stands. Two tools are worth using:
- Google Search Console — under Experience → Core Web Vitals, you’ll see field data from real users visiting your site. This is the data Google uses for ranking. If pages appear in the “Poor” or “Needs improvement” lists, start there.
- Google PageSpeed Insights — enter any URL to get both lab data (synthetic test) and field data. It shows which specific elements are causing each metric to fail, which makes prioritisation straightforward.
Start with your homepage and your highest-traffic pages — these are the ones where improvements will have the most impact.
Fix LCP: Improve How Fast Your Main Content Loads
LCP measures how long it takes for the largest visible element — usually a hero image or a large heading — to render on screen. Most WordPress sites fail LCP because of unoptimised images, slow server response, or render-blocking resources.
Optimise and compress your images
The hero image is almost always the LCP element. If it is a large uncompressed JPEG or PNG, it will drag your score down regardless of everything else. Convert images to WebP format — it is typically 25–35% smaller than JPEG at the same quality. Plugins like ShortPixel or Imagify handle this automatically on upload. Make sure you are also optimising images properly for both performance and SEO — dimensions, alt text, and file size all contribute.
Preload the hero image
For your LCP element specifically, preloading tells the browser to fetch it early, before it finishes parsing the rest of the page. In LiteSpeed Cache (or most performance plugins), this is available under the media or page optimisation settings. If you are doing it manually, add a <link rel="preload"> tag in your theme’s header for the hero image.
Use lazy loading for everything else
Lazy loading defers off-screen images until the user scrolls to them, which frees up bandwidth for the content that matters right now. WordPress adds loading="lazy" to images automatically since version 5.5, but performance plugins let you extend this to iframes and other elements. Enabling lazy loading in WordPress is one of the quickest ways to improve initial load performance without any visible trade-off for users.
Reduce server response time
If your server takes more than 600ms to respond, LCP will struggle even with perfect images. The most effective fix is page caching — it serves a pre-built HTML file instead of running PHP and querying the database on every visit. Enabling browser caching in WordPress is a related step that reduces repeat-visit load times further.
Fix CLS: Stop Your Page from Jumping Around
CLS measures unexpected layout shifts — when elements move on screen after they have already rendered. This happens when images load without reserved space, when web fonts cause text to reflow, or when ads or embeds push content down unexpectedly.
Set width and height on every image
This is the single biggest cause of CLS on most sites. When the browser does not know an image’s dimensions before it loads, it allocates no space — so when the image appears, everything below shifts down. WordPress typically adds dimensions automatically when you insert images from the media library. If you are pasting raw HTML, always include width and height attributes that match the actual image dimensions.
Use font-display: swap for web fonts
When a custom font takes time to load, the browser may initially render text in a fallback font, then swap to the custom font once it is ready — causing a visible shift. Adding font-display: swap to your font declarations prevents this. Many theme frameworks and Google Fonts integrations apply this automatically, but it is worth checking your PageSpeed Insights report to confirm.
Fix INP: Make Your Site Feel Responsive
INP replaced FID as a Core Web Vital in March 2024. It measures the delay between a user interaction — clicking, tapping, typing — and the next visual update. A high INP usually means too much JavaScript is running on the main thread, blocking the browser from responding quickly.
Defer or remove unused JavaScript
Check which scripts are loading on each page. Plugins often enqueue scripts site-wide even when they are only needed on one page. A performance plugin like LiteSpeed Cache or WP Rocket can defer non-critical JavaScript so it loads after the page is interactive. For scripts you do not recognise, check whether the plugin responsible for them is actually needed — deactivating unused plugins is sometimes the fastest fix.
Reduce third-party scripts
Chat widgets, social share buttons, advertising scripts, and analytics tools all add JavaScript that runs on the main thread. Each one is a small drag on INP. In most sites I build, I load third-party scripts conditionally — only on pages where they are actually needed — rather than globally across the whole site.
Practical Tips for Better Scores
- Run PageSpeed Insights on your homepage and your three most-visited posts — fix those first before generalising.
- Use a CDN to serve static assets (images, CSS, JavaScript) from servers closer to your visitors. LiteSpeed Cache includes a CDN option.
- Test after every change. Core Web Vitals improvements are cumulative, but they are also easy to accidentally undo — a new plugin or a theme update can reintroduce the same issues.
- Field data in Search Console lags by roughly 28 days. Lab data in PageSpeed Insights reflects your current site immediately, which is more useful during active optimisation.
Common Mistakes to Avoid
- Treating PageSpeed score as the goal. A score of 100 does not guarantee good field data. Focus on the actual metrics — LCP, CLS, INP — not the number.
- Over-optimising for desktop only. Google uses mobile-first indexing, and mobile scores are typically much lower. Always check the Mobile tab in PageSpeed Insights.
- Installing multiple performance plugins. Running LiteSpeed Cache alongside WP Rocket or W3 Total Cache causes conflicts. Pick one and configure it properly.
- Lazy loading your hero image. The LCP element should never be lazy loaded — it needs to load as fast as possible. Most performance plugins are smart enough to skip the first visible image, but verify this is working correctly.
Plugins vs Manual Configuration
For most WordPress sites, a well-configured performance plugin covers 80% of Core Web Vitals improvements. LiteSpeed Cache (if your host runs LiteSpeed), WP Rocket (paid, widely regarded as the best option), and Perfmatters (for disabling unused features) are all solid choices. Manual configuration via functions.php or server-level headers is more precise but requires more maintenance — worth it for high-traffic sites where every millisecond matters, less so for small or new sites.
If you are building from scratch and want to get the fundamentals right from the start, the step-by-step guide to building a WordPress website covers hosting, theme selection, and performance setup in the right order.
For a deeper look at how Google measures page performance in practice, the Core Web Vitals documentation on Google Search Central is the authoritative reference.
Conclusion
Start with images — compress, resize, and convert to WebP — then move to caching, lazy loading, and JavaScript reduction. In most cases, those four steps will move your Core Web Vitals scores from red to green without touching a single line of code.
Etienne Basson works with website systems, SEO-driven site architecture, and technical implementation. He writes practical guides on building, structuring, and optimizing websites for long-term growth.