To improve website speed and Core Web Vitals, fix things in this order: measure with real-user data, then fix your largest content element (usually a hero image or heading), then cut and delay heavy JavaScript, then stop layout shifts, then improve hosting and caching. Google's three Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). They measure how fast the main content appears, how quickly the page responds to taps and clicks, and how stable the layout is while loading.
Core Web Vitals are part of how Google assesses page experience, but relevant, helpful content still matters far more for rankings. The bigger reason to fix speed is that slow pages lose visitors and enquiries, especially on mobile networks.
The three metrics and their targets
| Metric | What it measures | Good | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | When the main content becomes visible | 2.5 seconds or less | Over 4 seconds |
| INP (Interaction to Next Paint) | How quickly the page responds to interactions | 200 ms or less | Over 500 ms |
| CLS (Cumulative Layout Shift) | How much the layout jumps around | 0.1 or less | Over 0.25 |
Google assesses these at the 75th percentile of real visits, so most of your visitors need a good experience, not just those on fast phones. INP replaced the older First Input Delay metric in 2024. Thresholds and tools are updated from time to time, so check Google's documentation for the latest details.
Step 1: Measure with real-user data first
There are two kinds of data:
- Field data comes from real Chrome users visiting your site (the Chrome UX Report). This is what Google uses. You see it in the Core Web Vitals report in Search Console and at the top of PageSpeed Insights.
- Lab data comes from a single simulated test, such as Lighthouse. It is useful for debugging, but the score can differ from what real users experience.
Start in Search Console. Group the problem URLs by template (home page, category pages, product pages, blog posts). Fixing a template fixes every page that uses it. Small sites may not have enough traffic for field data; in that case, use lab tests and test on a real mid-range phone.
Step 2: Fix LCP — make the main content appear faster
LCP is the metric most sites fail. The LCP element is usually the hero image, a banner slider or a large heading.
- Find the LCP element in PageSpeed Insights or Chrome DevTools.
- Compress and resize images. Serve modern formats such as WebP or AVIF, at the size they are actually displayed. A 3,000-pixel photo shown at 800 pixels wastes bandwidth.
- Do not lazy-load the hero image. Lazy-load images further down, but load the main image straight away. You can also give it a high fetch priority.
- Replace sliders on the home page with a single strong image or heading. Sliders often delay LCP and few visitors see past the first slide.
- Reduce server response time. Slow hosting, uncached pages or heavy database queries delay everything. Page caching and a content delivery network (CDN) help a lot.
- Remove render-blocking resources. Inline the critical CSS, defer the rest, and avoid loading large stylesheets the page does not use.
Step 3: Fix INP — make the page respond quickly
INP problems come from too much JavaScript running on the main thread, so the browser cannot respond when someone taps a button or opens a menu.
- Audit third-party scripts. Chat widgets, multiple analytics tags, heatmaps, ad scripts and social embeds add up. Remove what you do not use and delay the rest until after the page loads or the user interacts.
- Remove unused plugins. On WordPress and similar platforms, every plugin can add scripts to every page.
- Break up long tasks. Developers can split heavy JavaScript work into smaller pieces so the browser can respond between them.
- Keep the page simpler. Very large pages with thousands of elements are slower to update after every interaction.
Step 4: Fix CLS — stop the layout jumping
- Set width and height (or an aspect ratio) on every image, video and iframe so the browser reserves space.
- Reserve space for ads, banners, cookie notices and embeds.
- Do not insert content above existing content after the page loads, unless it responds to a user action.
- Load web fonts sensibly: preload the main font, limit the number of font files, and use a font-display setting that avoids large text reflows.
Step 5: Hosting, caching and delivery
- Use hosting with enough resources for your traffic. Cheap shared hosting is often the hidden cause of slow LCP.
- Enable page caching and browser caching.
- Use a CDN, especially if visitors come from different countries, such as India and Australia.
- Keep your platform, PHP version and plugins up to date.
- Enable compression (Brotli or Gzip) and HTTP/2 or HTTP/3.
What to fix first: a quick priority list
- Oversized hero images and sliders.
- Unused or unnecessary third-party scripts.
- Missing image dimensions causing layout shifts.
- Slow server response and missing caching.
- Render-blocking CSS and fonts.
- Heavy page builders or themes that load everything everywhere.
Sometimes the honest answer is that the site's theme or builder is the problem. If every fix is fighting the platform, a lighter rebuild may cost less over time than endless patching.
Key takeaways
- Measure with real-user data in Search Console before changing anything.
- Fix by template, starting with the pages that bring the most traffic and enquiries.
- LCP fixes are usually about images, hosting and render-blocking files.
- INP fixes are usually about cutting and delaying JavaScript, especially third-party scripts.
- CLS fixes are about reserving space for images, ads, embeds and fonts.
Speed is part of every SEO plan we run and every site our web development team builds. If you are not sure where your site stands, request a free SEO audit and we will include Core Web Vitals in the review.
Frequently asked questions
Will passing Core Web Vitals improve my rankings?
It can help a little, especially where competing pages are similar in quality. Google is clear that relevant, helpful content matters more. The bigger benefit is usually more visitors staying and enquiring.
Why is my PageSpeed score different every time I test?
Lab scores vary with network conditions, server load and test location. Focus on the field data from real users, which is more stable and is what Google actually uses.
Do I need a 100 score in PageSpeed Insights?
No. The score is a lab summary. What matters is that your real-user LCP, INP and CLS are in the good range for most visitors.
Is my website builder the problem?
Sometimes. Heavy themes, page builders and many plugins add code to every page. Try the fixes above first; if results stay poor, a lighter theme or rebuild may be the better option.
