Introduction
To pass Core Web Vitals on a WordPress website, at least 75% of real visits to a page must load the main content within 2.5 seconds (LCP), respond to taps and clicks within 200 milliseconds (INP), and keep layout shift at 0.1 or less (CLS). Google's Web Vitals guidance on web.dev sets those three targets, and a page only passes when it meets all three, measured separately for mobile and desktop.
On WordPress, most failures trace back to a handful of causes: a heavy theme or page builder, a large hero image that loads late, too many plugins adding JavaScript, and banners or embeds that push content around. This guide takes each metric in turn, explains what usually breaks it on WordPress, and gives the fixes we apply, in the order we apply them.
What are the Core Web Vitals thresholds?
Core Web Vitals are three metrics that describe loading, responsiveness and visual stability. Google Search Central's Core Web Vitals page says it highly recommends site owners achieve good scores, and that this aligns with what its core ranking systems seek to reward. They will not rescue thin content, but slow, jumpy pages lose visitors whatever their ranking.
| Metric | What it measures | Good result | Common WordPress cause of failure |
|---|---|---|---|
| Largest Contentful Paint (LCP) | Loading: when the largest element in view has rendered | Within 2.5 seconds | Slow hosting, uncached pages, an oversized or lazy-loaded hero image |
| Interaction to Next Paint (INP) | Responsiveness to clicks, taps and key presses | 200 milliseconds or less | Page builders, sliders, chat widgets and tracking scripts competing for the main thread |
| Cumulative Layout Shift (CLS) | Visual stability: how much content moves while loading | 0.1 or less | Images without dimensions, cookie and promo bars, ads and embeds, late-loading web fonts |
INP replaced First Input Delay (FID) as a stable Core Web Vital in 2024, according to web.dev. If an older plugin or audit still talks about FID, its advice on responsiveness is out of date.
How do you check whether your WordPress site passes?
Start with field data, not a lab score. Field data comes from real Chrome users through the Chrome User Experience Report, and it powers the Core Web Vitals report in Search Console and the field section at the top of PageSpeed Insights. Search Console groups your URLs as good, needing improvement or poor, which shows which templates fail: often the blog post template or the product page, not the home page.
Lab tools such as Lighthouse are useful for testing a fix before it goes live, but web.dev points out that Lighthouse cannot measure INP because no real user is interacting. It reports Total Blocking Time (TBT) instead, as a stand-in. Our comparison of PageSpeed Insights, Lighthouse and GTmetrix explains which tool answers which question.
- Open Search Console, then the Core Web Vitals report, and note which metric fails on mobile and on desktop.
- Pick one example URL per failing template and run it through PageSpeed Insights.
- Write down the LCP element PageSpeed Insights names. On most WordPress sites it is the hero image, a featured image or a large heading.
How to fix LCP on WordPress
A slow LCP on WordPress usually comes down to two things: how fast the server sends the HTML, and how early the browser starts downloading the main image.
Make the server respond faster
- Use full-page caching. Most pages on a brochure site or blog are the same for every visitor, so serve a cached HTML copy instead of building the page with PHP and database queries on each request. Many hosts provide this at server level; otherwise a caching plugin does the job.
- Keep PHP and WordPress up to date. Newer releases bring performance work, including the image changes below.
- Review your hosting. If uncached pages are slow even with a light theme, the server is the bottleneck, and no plugin will fix that.
Get the hero image loading early
Since WordPress 6.3, core automatically adds fetchpriority="high" to the image it judges most likely to be the LCP image, and it no longer lazy-loads images it expects in the first screen. The WordPress 6.3 developer note says the fetchpriority change typically improves LCP by 5 to 10%, and that the default number of images left un-lazy-loaded rose from 1 to 3 to suit multi-column layouts.
That only works if your theme renders images through WordPress functions. Problems we see often:
- A page builder or slider outputs the hero as a CSS background image, so the browser finds it late and core cannot prioritise it.
- A lazy-loading plugin adds
loading="lazy"to every image, including the hero, which delays exactly the image that matters. The developer note calls lazy-loading a high-priority image an anti-pattern. - The hero is a full-size camera upload scaled down in the browser. Serve a properly sized, compressed image in a modern format such as WebP.
If your hero is a slider, replace it with one strong static image. Sliders delay LCP and rarely earn their place.
How to fix INP on WordPress
INP measures how long the page takes to show a visual response after someone clicks, taps or types. On WordPress, the cause is almost always too much JavaScript running on the main thread.
- Audit plugins by what they load on the front end. A plugin used on one page often loads its scripts on every page. Remove what you do not need, and load the rest only where it is used.
- Delay third-party scripts. Chat widgets, heatmaps, social embeds and extra tracking tags can usually wait until after the page is interactive, or until the visitor scrolls or clicks.
- Be wary of heavy page builders. Large builder layouts add markup and scripts. For key templates such as the home page and service pages, a block theme or a lean custom theme gives a lighter page.
- Test menus, filters and forms. Mega menus, product filters and multi-step forms are the interactions most likely to feel slow on a mid-range phone.
Use Total Blocking Time in Lighthouse as your lab guide while you work, then confirm in field data once real visits accumulate.
How to fix CLS on WordPress
CLS is often the quickest of the three to fix, because the causes are visible once you watch a page load on a phone.
- Give every image and embed its dimensions. Custom theme code, builder widgets and some embeds often leave out width and height. Without dimensions, the browser cannot reserve space.
- Reserve space for banners. Cookie notices, announcement bars and popups that push the page down cause large shifts. Overlay them instead, or reserve their height from the start.
- Control web fonts. A late font swap can reflow headings and buttons. Load fewer font files, host them yourself, and preload the main one.
- Watch ads and dynamic blocks. Give ad slots, related-post widgets and review carousels a fixed minimum height.
Does WooCommerce need anything different?
Yes. Cart, checkout and account pages cannot be fully cached for every visitor, and product pages carry galleries, variation scripts and review widgets. The same metric-by-metric approach applies, but caching rules and script loading need more care. Our guide to WooCommerce speed optimisation covers store-specific fixes in detail.
When is it time to rebuild instead of fixing?
Most WordPress sites can pass Core Web Vitals with a lighter theme, careful plugins and good hosting. A rebuild makes sense when the theme is so tied to a heavy builder that every fix breaks something, or when you are redesigning anyway. If you are weighing a different platform, read our Next.js vs WordPress comparison for business websites before deciding.
Frequently asked questions
How long does it take for Core Web Vitals to update after a fix?
Lab tools such as Lighthouse show the change straight away. Field data in Search Console and PageSpeed Insights is gathered from real Chrome visits over a rolling period, so expect a delay of a few weeks before the report reflects your fix.
Is a caching plugin enough to pass Core Web Vitals?
Caching mainly helps LCP by sending HTML faster. It does little for INP, which depends on JavaScript, or for CLS, which depends on how the layout reserves space. Most sites need caching plus image, script and layout fixes.
Why does my site pass on desktop but fail on mobile?
Phones have slower processors and often slower connections, so the same JavaScript and images take longer. Google assesses mobile and desktop separately, so fix the mobile result first.
Do Core Web Vitals affect Google rankings?
Google Search Central says good Core Web Vitals align with what its core ranking systems seek to reward, alongside other page experience aspects. Relevant, helpful content still matters most, so treat Core Web Vitals as one part of a healthy site rather than a ranking shortcut.
Conclusion
Start with field data, find the template and metric that fail, then fix LCP through caching and an early-loading hero image, INP by cutting front-end JavaScript, and CLS by reserving space for everything that loads late. If you would rather hand it over, we have 100+ projects delivered since 2022 and can audit and fix your WordPress site as part of our website maintenance services. Message us on WhatsApp at +91 73482 28167 and you get a fixed written quote within one working day.