Core Web Vitals are Google's standardised performance metrics that measure real user experience on your website. Since 2021, they have been a direct Google ranking factor. In 2024, Google replaced FID (First Input Delay) with INP (Interaction to Next Paint), raising the technical bar further. For Indian websites, where a significant portion of traffic comes from 4G mobile connections in tier-2 and tier-3 cities, Core Web Vitals are often failing — creating a direct ranking disadvantage for businesses that have not optimised for performance. This guide covers every metric, how to measure it, and the specific fixes that move scores from "Poor" to "Good".
LCP: Largest Contentful Paint (Target: Under 2.5 Seconds)
LCP measures the time it takes for the largest visible element on the page to fully load — typically a hero image, background image, or large text block. It represents how quickly the page's main content appears to the user. The LCP threshold: "Good" is under 2.5 seconds, "Needs Improvement" is 2.5–4 seconds, "Poor" is over 4 seconds. The most common LCP elements on Indian business websites are hero images (very often the LCP culprit), large above-the-fold background images, and H1 text blocks. Most LCP failures stem from three root causes: unoptimised image size and format, server response time (TTFB), and render-blocking resources (CSS and JavaScript that delay page rendering).
- →Convert hero images to WebP or AVIF format — 30–50% smaller than JPEG with same quality
- →Use the fetchpriority="high" attribute on your LCP image to tell the browser to prioritise it
- →Preconnect to image CDN origin: <link rel="preconnect" href="https://your-cdn.com">
- →Eliminate render-blocking CSS by inlining critical CSS and deferring non-critical stylesheets
- →Improve server response time by using a CDN — Cloudflare free tier alone often reduces TTFB by 40%
INP: Interaction to Next Paint (Target: Under 200ms)
INP (Interaction to Next Paint) replaced FID in March 2024 and is the most complex Core Web Vital to fix. It measures the delay between a user interaction (tap, click, keyboard input) and the browser visually updating the page in response. Where FID measured only the first interaction, INP measures all interactions throughout the page session and reports the worst-performing one. "Good" is under 200ms. "Needs Improvement" is 200–500ms. "Poor" is over 500ms. The primary cause of poor INP is JavaScript main-thread blocking — large JavaScript bundles, third-party scripts (analytics, chatbots, ad tags), and heavy React/Next.js component re-renders all cause the browser's main thread to be busy when a user taps a button. Indian users on lower-end Android devices (the majority of India's smartphone market) are disproportionately affected.
CLS: Cumulative Layout Shift (Target: Under 0.1)
CLS measures unexpected layout shifts — content moving around after it has initially rendered, causing users to misclick or lose their reading position. "Good" CLS is under 0.1. The most common CLS causes are: images without explicit width and height attributes (the browser does not reserve space and images shift content when they load), ads and embeds without reserved dimensions, dynamically injected content (cookie banners, chat widgets, promotional bars appearing after initial render), and web fonts causing text to reflow (FOIT/FOUT). CLS is often the easiest Core Web Vital to fix. Adding explicit dimensions to all images and iframes, and using font-display: optional for web fonts, resolves the majority of CLS issues on most Indian business websites.
- →Always set explicit width and height attributes on all <img> tags
- →Reserve space for ads and embeds with CSS aspect-ratio or min-height
- →Use font-display: swap or optional for web fonts to prevent layout shift during font loading
- →Avoid inserting content above existing content dynamically after page load
- →Test CLS with Chrome DevTools Layout Shift Regions (available in Performance panel)
Measuring Core Web Vitals: Field Data vs. Lab Data
Core Web Vitals can be measured in two ways: Lab data (simulated performance in a controlled environment, used by PageSpeed Insights and Lighthouse) and Field data (real user data collected by Chrome browsers, reported in Google Search Console and CrUX — Chrome User Experience Report). Google uses field data — not lab data — for ranking. This means the scores you see in PageSpeed Insights are directionally correct but not the same numbers Google actually uses. Check your Core Web Vitals field data in Google Search Console under Experience → Core Web Vitals. If your pages show "Needs Improvement" or "Poor" in Search Console, those are the scores affecting your rankings. AddMads' technical SEO service includes full Core Web Vitals diagnosis and remediation.
Core Web Vitals for Next.js and React Websites
Next.js websites — increasingly common for Indian businesses — have specific Core Web Vitals considerations. Next.js's built-in optimisations (Image component with automatic WebP conversion and lazy loading, Script component with loading strategies, font optimization with next/font) dramatically simplify achieving good Core Web Vitals scores. However, excessive client-side JavaScript, large third-party scripts (analytics, heatmaps, chatbots), and unoptimised fonts remain common issues even in Next.js projects. Key Next.js-specific optimisations: use next/image for all images (automatic WebP, lazy loading, and size optimisation), use next/font for web fonts (eliminates CLS from font loading), use Script strategy="lazyOnload" for non-critical third-party scripts, and avoid hydration mismatches that cause layout shifts during React hydration.
Key Takeaway
Core Web Vitals are a direct Google ranking signal and a direct measure of user experience. Indian websites that fail Core Web Vitals — especially on mobile — are ranking lower than they should and losing users who bounce before the page fully loads. The fixes are technical but achievable: image optimisation, JavaScript audit, explicit element dimensions, and CDN implementation resolve the majority of Core Web Vitals failures. AddMads provides technical SEO audits and Core Web Vitals remediation for websites built on any platform.
