Key takeaways
- Core Web Vitals are three metrics: LCP for loading speed of the main content, INP for responsiveness to interactions, and CLS for visual stability.
- The “good” thresholds are LCP ≤ 2.5 seconds, INP ≤ 200 milliseconds and CLS ≤ 0.1, assessed at the 75th percentile of real-user visits.
- INP replaced First Input Delay (FID) as a Core Web Vital in March 2024 because it measures responsiveness across all interactions, not just the first.
- Measure with real-user field data in PageSpeed Insights and Search Console, and use Lighthouse lab data to diagnose issues.
- The highest-impact fixes are modern image formats such as WebP and AVIF, less JavaScript and fewer third-party scripts, optimised Arabic font loading, caching and a CDN, and server-side rendering.
Core Web Vitals are three Google metrics that measure real-user experience on a web page: Largest Contentful Paint (LCP) for loading speed, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. A page passes when at least 75% of visits achieve LCP ≤ 2.5 seconds, INP ≤ 200 milliseconds and CLS ≤ 0.1. They are part of Google’s page experience signals, and, just as importantly, fast and stable pages make visitors more likely to stay, trust you and get in touch.
What do LCP, INP and CLS actually measure?
| Metric | What it measures | Good | Poor |
|---|---|---|---|
| LCP | Time until the main content appears | ≤ 2.5 s | > 4 s |
| INP | Delay between a tap or click and the visual response | ≤ 200 ms | > 500 ms |
| CLS | How much the layout jumps while loading | ≤ 0.1 | > 0.25 |
Values between "good" and "poor" are rated "needs improvement".
Largest Contentful Paint (LCP)
LCP marks when the largest visible element in the first screen, usually a hero image, banner or headline block, finishes rendering. Slow servers, heavy images, render-blocking CSS and JavaScript, and web fonts are the typical culprits.
Interaction to Next Paint (INP)
INP measures how quickly the page responds visually to user interactions across the whole visit, reporting one of the slowest. It replaced First Input Delay (FID) as a Core Web Vital in March 2024, because FID only measured the delay of the first interaction. Poor INP usually comes from heavy JavaScript keeping the browser’s main thread busy.
Cumulative Layout Shift (CLS)
CLS captures unexpected movement: a button that jumps just as you tap it, or text pushed down by a late-loading banner. Images without dimensions, injected ads or cookie bars, and font swaps are the usual causes.
Why does website speed matter for SEO and business?
Google uses page experience signals, including Core Web Vitals, within its ranking systems. They are not a magic lever: relevant, high-quality content still matters most, and a fast page with weak content will not outrank a slower page that better answers the query. But when competing pages are similarly relevant, experience can make the difference, and a slow site makes every other SEO investment work harder.
The business case is more direct. Visitors on mobile networks will not wait for a heavy page, and layout jumps cause mis-taps and frustration. A slow, unstable site quietly reduces enquiries, bookings and sales, and you never see the visitors who left. Speed also supports visibility in AI-driven search; our guide to SEO and AEO explains how the two fit together.
How do you measure Core Web Vitals?
Field data vs lab data
- Field data comes from real Chrome users visiting your site, collected in the Chrome User Experience Report (CrUX). This is what Google uses for assessment.
- Lab data is a simulated test on a fixed device and network, such as a Lighthouse run. It is excellent for debugging but may differ from what real users experience.
Tools to use
- PageSpeed Insights: enter a URL to see field data, if your site has enough traffic, and a Lighthouse lab report with specific recommendations.
- Google Search Console: the Core Web Vitals report groups your URLs into good, needs improvement and poor, for mobile and desktop.
- Chrome DevTools and Lighthouse: for developers to profile and fix issues locally.
- Real-user monitoring: adding a small script such as Google’s open-source web-vitals library to your analytics gives you continuous field data per page.
Always check mobile results first. Google predominantly uses the mobile version of your site for indexing, and most visitors in the Gulf browse on their phones.
How can you improve LCP?
- Optimise images: serve modern formats such as WebP or AVIF, compress them, and deliver responsive sizes so phones don’t download desktop images.
- Prioritise the hero image: never lazy-load the main above-the-fold image. Mark it as high priority, preload it if needed, and use lazy loading only for images further down the page.
- Speed up the server: use caching, a content delivery network (CDN) with nodes close to your users in the Gulf, and efficient hosting.
- Use server-side rendering (SSR) or static generation: frameworks such as Nuxt and Next.js send ready HTML, so content appears without waiting for JavaScript.
- Trim render-blocking resources: inline critical CSS and defer non-essential scripts.
How can you improve INP?
- Reduce JavaScript: remove unused libraries, split code by page, and load features only when needed.
- Audit third-party scripts: chat widgets, tag managers, heatmaps, social embeds and ad pixels are frequent offenders. Keep only what earns its place and load it after the main content.
- Break up long tasks so the browser can respond to taps between chunks of work.
- Keep the page lean: very large DOMs and complex animations slow down every interaction.
How can you improve CLS?
- Set width and height, or an aspect ratio, on every image, video and embed so space is reserved.
- Reserve space for banners, cookie notices and dynamic content instead of pushing content down.
- Control font loading: web fonts that swap in late can reflow text.
What about Arabic web fonts?
Arabic fonts are often much larger than Latin ones because they contain many glyphs and contextual letter forms. On bilingual sites they can hurt both LCP and CLS. Practical steps:
- Use the WOFF2 format and subset fonts to the characters and weights you actually use.
- Limit the number of font families and weights; two or three weights are usually enough.
- Choose a sensible font-display strategy and preload the main font file.
- Pick fallback system fonts with similar metrics to reduce layout shift during the swap.
Speed is not a one-time project. Every new plugin, tracking script or oversized banner chips away at performance, so set a budget for page weight and check your Core Web Vitals after each release.
The bottom line
To pass Core Web Vitals, aim for LCP ≤ 2.5 s, INP ≤ 200 ms and CLS ≤ 0.1 on mobile, measured with real-user field data in PageSpeed Insights and Search Console. Most wins come from optimised images, less JavaScript, careful Arabic font loading, caching, a CDN and server-side rendering. We build these practices into every project in our web application development work.
Is your website slow or failing Core Web Vitals? Ask the TaahadSoft team for a free performance review, and we will show you the fixes that will make the biggest difference.
Frequently asked questions
What are Core Web Vitals?
Core Web Vitals are three Google metrics for real-user experience: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. They are measured from real Chrome users’ visits and form part of Google’s page experience signals.
Does website speed affect Google rankings?
Yes. Google uses page experience signals, including Core Web Vitals, within its ranking systems, but they are not the most important factor. Relevant, high-quality content still comes first, and speed can make the difference when competing pages are similarly relevant. Speed also directly affects whether visitors stay and convert.
How do I check my website’s Core Web Vitals?
Use PageSpeed Insights to see real-user field data and a Lighthouse lab report with specific recommendations, and the Core Web Vitals report in Google Search Console to track all your pages. Start with mobile results, rely on field data for assessment and use lab data for debugging.
Why do Arabic web fonts slow down websites?
Arabic fonts are often much larger because they contain many glyphs and contextual letter forms, which can delay content and cause text to jump when fonts swap. Use the WOFF2 format, subset to the characters and weights you use, limit the number of weights, and preload the main font with well-matched fallbacks.
What is the difference between INP and FID?
FID only measured the input delay of the first interaction on a page, while INP measures how quickly the page visually responds to interactions throughout the visit. INP officially replaced FID as a Core Web Vital in March 2024, and a good INP is 200 milliseconds or less.
