To improve WordPress Core Web Vitals, fix the issues slowing your pages down and test every change before applying it across the website.
Start with large images, slow server responses, heavy JavaScript and moving page elements. Be careful with caching and script settings. A speed plugin may improve your PageSpeed score while breaking a menu, form or booking button. This guide explains how to improve Core Web Vitals safely. You’ll learn how to fix LCP, INP and CLS, which changes to try first and how to check your results. For a wider site review, see our planned WordPress SEO checklist for UK businesses.
Check Your WordPress Core Web Vitals Before Making Changes
Google uses three Core Web Vitals to measure loading speed, responsiveness and layout stability.
| Metric | What it measures | Good score |
| Largest Contentful Paint (LCP) | How fast the main content appears | 2.5 seconds or less |
| Interaction to Next Paint (INP) | How quickly a page responds to actions | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | How much content moves unexpectedly | 0.1 or less |
Google checks these targets using real-user data at the 75th percentile. Meeting them can improve user experience, but it does not guarantee higher rankings.
Test Your Website With PageSpeed Insights
Open Google PageSpeed Insights and enter the page you want to test. Start with your homepage and important service pages. Test mobile and desktop separately because users may have different experiences. PageSpeed Insights shows two main data types:
- Field data: Real Chrome-user data from the previous 28 days, where enough data exists.
- Lab data: A controlled test that helps identify possible problems.
Look at individual LCP, INP and CLS results instead of relying only on the overall performance score. Lighthouse lab tests use Total Blocking Time (TBT) to help identify slow JavaScript. They do not measure field INP. INP comes from real-user interactions, so it may be unavailable when there is not enough field data. Use lab results to investigate when field data is unavailable, but remember that lab testing cannot fully represent real user behaviour.
Save a Copy of Your Results
Before changing WordPress settings, save your PageSpeed results. Record:
- exact URL;
- test date;
- mobile or desktop;
- LCP;
- CLS;
- lab TBT;
- field INP where available;
- PageSpeed warnings.
Also note which website features worked before making changes. Use the same information for later comparisons.
Which WordPress Core Web Vitals Fixes Should You Try First?
Not every PageSpeed warning needs urgent attention. Some fixes offer strong benefits with little risk. Others can break important website features.
| WordPress fix | Possible impact | Risk of problems |
| Compress oversized images | High when images slow loading | Low |
| Add missing image dimensions | High when images cause layout shifts | Low |
| Remove lazy loading from the main image | High when it controls LCP | Low to medium |
| Improve slow hosting or server caching | High when server response is poor | Medium |
| Delay non-essential JavaScript | High when scripts block loading | Medium to high |
| Remove unused CSS or JavaScript | Depends on unused code | High |
| Change critical font loading | Medium when fonts cause delays or shifts | Medium |
| Replace a heavy theme or page builder | Potentially high | High |
These ratings are practical estimates, not fixed results. The impact depends on what is slowing your site down. Start with fixes that address a measured problem and carry less risk. Leave major theme or JavaScript changes until safer fixes have been tested.
How to Improve LCP in WordPress
Largest Contentful Paint measures when the largest visible content element finishes rendering. On WordPress websites, this is often a hero image, banner or large heading. Slow LCP can leave visitors looking at a blank or partly loaded page.
1. Optimise Your Main Images
Large hero images can take longer to download, especially on mobile. Open the WordPress Media Library and review images used above the fold. Resize oversized files and use suitable formats such as WebP or AVIF. Choose image dimensions that fit the display area without looking blurry.
For example, a 4,000-pixel banner may be far larger than necessary. Serving a smaller version can reduce the amount of data downloaded. Replace the image carefully and check it on mobile and desktop.
2. Don’t Lazy-Load Your Main Hero Image
Lazy loading works well for images further down the page. However, the main LCP image usually needs to load immediately. Some performance plugins apply lazy loading to every image. This can delay the hero image and worsen Core Web Vitals. Check your caching or image-plugin settings.
Exclude the main hero image from lazy loading when it is the LCP element. Images further down the page can still use lazy loading.
3. Give Important Images Loading Priority
The browser should discover the main image early. Where appropriate, a developer can add fetchpriority=”high”:
<img
  src=”/images/homepage-banner.webp”
  width=”1200″
  height=”600″
  fetchpriority=”high”
  alt=”Your descriptive image text”
>
If the image is hidden behind JavaScript or loaded as a CSS background, a carefully configured preload may help. Do not preload every image or font. Too many priority requests can compete with resources that need to load first.
4. Improve Server Response Time
Even small images can load slowly when the server responds late. Check Time to First Byte (TTFB) in PageSpeed Insights. A slow response may point to:
- hosting;
- database work;
- missing page caching.
Page caching can reduce the work required to serve repeat requests. A Content Delivery Network may also help users load files from closer servers. For UK businesses, test performance for the audience you actually serve. A London service website should work well for UK visitors, not only from one test location.
Before enabling full-page caching, check whether your website uses user-specific pages or dynamic forms.
How to Improve INP in WordPress
Interaction to Next Paint measures how quickly your site responds after someone clicks, taps or types. A visitor may tap a menu and see nothing happen. Another may submit a form and wait for the page to respond. These delays can come from JavaScript, heavy page elements or slow browser rendering.
5. Find Scripts That Slow Down Interactions
Test the features visitors use most:
- mobile menus;
- search boxes;
- forms;
- filters;
- booking buttons.
Chrome DevTools can help developers identify long-running JavaScript tasks. WordPress sites may load extra code from:
- sliders;
- pop-ups;
- tracking tools;
- page builders.
Review the scripts causing delays before removing anything.
6. Reduce Unused JavaScript
Some plugins load files on pages that do not use their features. A form plugin may load scripts across the whole site even when the form appears on only one page. Where supported, stop unused scripts from loading on pages that do not need them. A developer can also split long JavaScript tasks into smaller pieces.
This gives the browser more chances to respond. Do not remove scripts unless you know what they control. A file that looks unnecessary may power a menu or enquiry form.
7. Delay Non-Essential Scripts Carefully
WordPress speed plugins often include options to defer or delay JavaScript. These settings change when scripts run rather than removing them. They can improve initial loading, but important scripts may still need to run immediately. Be careful with:
- mobile menus;
- navigation;
- contact forms;
- booking forms;
- cookie consent tools;
- payment features;
- interactive elements.
Use a staging page to test these features before keeping the new settings. For plugin comparisons, see our planned Yoast vs Rank Math vs All in One SEO article.
How to Reduce CLS in WordPress
Cumulative Layout Shift measures unexpected page movement. You may have seen text move just as you were about to tap a button. Images, fonts and late-loading content often cause these shifts.
8. Set Image and Video Dimensions
Browsers need to know how much space an image or video will use. Without that information, surrounding content may move when the media loads. Set width and height attributes, or use CSS to reserve the correct space. For example:
<img
  src=”/images/service-image.webp”
  width=”800″
  height=”450″
  alt=”Description of the service image”
>
WordPress often adds dimensions automatically. However, custom themes and page builders may not preserve them in every layout. Check the elements flagged by PageSpeed Insights.
9. Reserve Space for Banners and Embedded Content
Late-loading banners, videos and forms can push content down the page. Reserve enough space before they load. For example, a booking widget should have room to appear without moving the main call-to-action button. Test smaller screens too.
Layouts that work on desktop may need different spacing on mobile.
10. Check How Your Fonts Load
Custom fonts can cause text to change size or position after loading. This can happen when the browser first displays a fallback font and later replaces it. Use suitable font-loading settings and avoid loading styles you do not need. Preloading a critical font may help in some cases.
Settings such as font-display: swap or optional can also affect how text appears. Choose the approach that suits the page and test for layout shifts. Avoid changing every font setting at once.
How to Fix Render-Blocking Resources in WordPress
Render-blocking resources can delay the first visible content. These often include CSS and JavaScript files that load before the browser can display the page. For scripts that block the first render, defer or async may help when configured correctly. This is different from INP optimisation.
Render-blocking work focuses on initial display, while INP focuses on responsiveness after user interaction. For CSS, removing unused styles or loading non-critical styles later may reduce delays. Critical styles still need to be available when the page first appears. Removing required CSS can leave the page unstyled or create layout movement.
Compare the first visible screen before and after making changes.
How to Improve Core Web Vitals Without Breaking Your Website
Use this workflow when applying Core Web Vitals fixes to a live WordPress site.
1. Create a Backup and Test Safely
Back up your website files and database before major changes. For higher-risk work, use a staging website. A staging site lets you test changes without affecting visitors. Keep it out of public search results.
Make sure your backup can actually be restored. An untested backup may not help when something goes wrong.
2. Change One Setting at a Time
Start with the issue shown in PageSpeed Insights. Apply one fix. Then:
- clear relevant caches;
- test the page again;
- record the exact change.
Keeping changes separate makes problems easier to reverse.
3. Check Your Website’s Main Features
After each change, test the affected page on mobile and desktop. Check:
- navigation;
- forms;
- buttons;
- important user journeys.
For a London electrician, this might mean checking the mobile call button. For an online shop, checkout functionality may matter more than a small speed gain. If something stops working, reverse the change before moving on.
4. Compare Before-and-After Results
Run PageSpeed Insights again using the same exact URL and device type. Record:
- test date;
- changed setting;
- lab LCP;
- lab CLS;
- lab TBT;
- field LCP, INP and CLS where available.
| Test record | Before | After |
| Exact page URL | Record URL | Same URL |
| Device and test date | Record both | Record both |
| Lab LCP, CLS and TBT | Actual test values | Actual test values |
| Field LCP, INP and CLS | Only if available | Only if available |
| WordPress change | Current configuration | Exact option or code changed |
| Feature check | Working features | Pass/fail and any rollback |
Use genuine reports for these fields. Never compare lab TBT with field INP as though they were the same measurement. Field Core Web Vitals use a rolling 28-day dataset, so recent improvements may take time to appear. Save before-and-after screenshots and a short note explaining what changed.
What if Your Core Web Vitals Still Fail?
Sometimes image and plugin changes are not enough. The problem may come from:
- a heavy page builder;
- third-party scripts;
- slow hosting;
- theme rendering;
- complex JavaScript.
At this stage, review the evidence instead of trying random settings. If the audit also finds duplicate pages, our planned Fix Duplicate Content in WordPress guide covers that separate issue. A developer may need to inspect JavaScript tasks, network requests or page rendering. Do not replace your whole theme simply because PageSpeed Insights reports a low score.
A major rebuild can create new problems without fixing the original cause. For more complex issues, a technical SEO review can help identify which fixes need closer testing.
Frequently Asked Questions
What Is a Good Core Web Vitals Score for WordPress?
Google’s good Core Web Vitals targets are:
- LCP: 2.5 seconds or less;
- INP: 200 milliseconds or less;
- CLS: 0.1 or less.
Can a WordPress Speed Plugin Fix Core Web Vitals?
A plugin can help with caching, image loading and script delivery. However, some Core Web Vitals problems need changes to your theme, hosting or website code.
Can Speed Optimisation Break a WordPress Website?
Yes. Script and CSS changes can affect how a page works. Keep a backup and use staging for higher-risk fixes.
Why Does PageSpeed Insights Show Different Scores?
Lab tests use controlled conditions. Field data reflects real-user visits. Compare the same URL and device across repeated tests.
How Long Do Core Web Vitals Improvements Take to Appear?
Lab tests may show changes immediately. Google’s real-user Core Web Vitals data uses a rolling 28-day period, so field results take longer to reflect recent fixes.
Need Help Fixing Your WordPress Core Web Vitals?
Poor Core Web Vitals do not always require a complete website rebuild. The correct fix depends on what causes the loading delay, slow interaction or layout movement. Wixdek helps businesses identify WordPress performance problems and plan safer improvements. Explore our WordPress SEO services to discuss your website’s Core Web Vitals and the changes it needs.
Request an SEO Audit
By Wixdek
