Core Web Vitals Explained: How to Make Your Website Load in Under 2 Seconds
Core Web Vitals explained: LCP, INP and CLS, Google's thresholds, how to measure them and practical fixes to load your website in under 2 seconds.
Key takeaways
- Core Web Vitals measure loading (LCP), responsiveness (INP) and visual stability (CLS).
- Google evaluates the 75th percentile of real user visits, not one lab test.
- Images, fonts and third-party scripts cause most speed problems.
- A fast site improves conversions as well as rankings.
- Use PageSpeed Insights for diagnosis and Search Console for real-world trends.
What are Core Web Vitals?
Core Web Vitals are Google's metrics for real-world page experience. There are three:
| Metric | Measures | Good |
|---|---|---|
| LCP (Largest Contentful Paint) | How fast the main content appears | 2.5 seconds or less |
| INP (Interaction to Next Paint) | How quickly the page responds to taps, clicks and typing | 200 ms or less |
| CLS (Cumulative Layout Shift) | How much the layout jumps while loading | 0.1 or less |
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. Google assesses each metric at the 75th percentile of real visits, so most of your visitors need a good experience.
Lab data vs field data
- Field data comes from real Chrome users (the Chrome UX Report) and appears in Search Console and the top of PageSpeed Insights. This is what Google uses.
- Lab data (Lighthouse) is a simulated test. Great for debugging, but it isn't your ranking signal.
How to improve LCP
The LCP element is usually a hero image or headline.
- Optimise the hero image: compress it, size it correctly, serve WebP or AVIF, and add
fetchpriority="high". - Don't lazy-load the above-the-fold image.
- Inline critical CSS so the page can render without waiting for stylesheets.
- Reduce server response time with caching, good hosting and a CDN.
- Preconnect to required third-party origins such as font providers.
How to improve INP
INP suffers when JavaScript blocks the main thread.
- Remove unused scripts and plugins. Every chat widget, tracker and slider adds up.
- Defer non-critical JavaScript and load third-party tags after interaction where possible.
- Break up long tasks in custom code.
- Avoid heavy page builders for performance-critical pages.
How to improve CLS
- Set width and height on images, videos and iframes.
- Reserve space for ads, embeds and banners.
- Use
font-display: swapwith a size-matched fallback font to minimise text shifts. - Avoid inserting content above existing content after load.
A practical speed budget for business sites
| Resource | Target |
|---|---|
| Total page weight | Under 1 MB |
| JavaScript | Under 150 KB compressed |
| Web fonts | 1 to 2 families, limited weights |
| Hero image | Under 150 KB |
| Third-party scripts | Only what you genuinely need |
Staying within this budget makes sub-two-second loads realistic on mobile.
WordPress-specific tips
- Use a lightweight theme and limit plugins.
- Add a caching plugin and image optimisation.
- Disable unused features (emojis, embeds, unused block styles).
- Be cautious with heavy page builders on key landing pages.
For the full list of technical checks, see our technical SEO checklist.
Frequently asked questions
Are Core Web Vitals a ranking factor?
Yes, as part of Google's page experience signals. They're not the strongest factor, but they can make a difference between similar pages, and they strongly affect conversions.
What is a good PageSpeed Insights score?
Aim for 90 or above on mobile, but prioritise passing Core Web Vitals field data, which is what Google uses.
Why is my mobile score lower than desktop?
Mobile tests simulate slower devices and networks, so heavy images and scripts have a bigger impact.
What replaced FID?
Interaction to Next Paint (INP) replaced First Input Delay as a Core Web Vital in March 2024.
How long until Core Web Vitals improvements show in Search Console?
Field data uses a rolling 28-day window, so improvements appear gradually over about a month.
Conclusion
Fast sites rank better, convert better and feel more trustworthy. Focus on the hero image for LCP, trim JavaScript for INP and reserve space for CLS. Keep within a sensible speed budget and you'll pass Core Web Vitals comfortably. Want a site built fast from day one? See our website development service.
