Google's Core Web Vitals have been a ranking signal since 2021, but most Indian websites still score poorly — particularly on mobile, where the majority of Indian internet traffic originates. The three metrics are LCP (Largest Contentful Paint — loading speed), INP (Interaction to Next Paint — interactivity, which replaced FID in March 2024), and CLS (Cumulative Layout Shift — visual stability). Each has a specific threshold, specific causes, and specific fixes. This guide covers all three with practical steps for WordPress, Shopify, and custom-built sites.
Understanding the Three Metrics
LCP measures how long it takes for the largest visible element — usually a hero image or the H1 heading — to render on screen. Good: under 2.5 seconds. Needs Improvement: 2.5 to 4 seconds. Poor: above 4 seconds.
INP measures the delay between a user interaction — a tap, click, or keypress — and the next visual update on screen. Good: under 200ms. Needs Improvement: 200 to 500ms. Poor: above 500ms. Because INP replaced FID in March 2024, sites that optimised for FID may still fail INP, which measures all interactions throughout the page lifecycle, not just the first.
CLS measures how much the page layout shifts unexpectedly during and after loading. Good: under 0.1. Needs Improvement: 0.1 to 0.25. Poor: above 0.25.
Measurement tools you need: Google Search Console surfaces real-world CrUX data collected from Chrome users visiting your site. PageSpeed Insights provides both lab data (simulated, immediate) and field data (real-world, if your site has sufficient traffic). The Web Vitals Chrome extension gives real-time per-page measurement as you browse.
Indian website benchmark: mobile LCP is the most commonly failed metric because of large image files and render-blocking resources combined with the variable 4G connection speeds that most Indian mobile users experience. A page that loads within 2.5 seconds on a stable connection can easily exceed 4 seconds on a variable network.
Fixing LCP — The Most Impactful Metric
The LCP element is almost always the hero image or the above-the-fold heading. Here are the fixes in priority order:
1. Compress and convert your hero image to WebP. A 2MB JPEG hero image is the single most common LCP killer on Indian business websites. Target under 150KB at 1,200px width. Use Squoosh (free, browser-based) or ShortPixel (approximately ₹1,200/year as a WordPress plugin). WebP delivers comparable visual quality at 25–35% smaller file sizes than JPEG.
2. Add fetchpriority="high" and loading="eager" to the hero image. This signals to the browser that this resource should be prioritised above all others in the loading queue, preventing it from being delayed by other resource requests.
3. Eliminate render-blocking CSS. CSS files that load in the <head> and block rendering are a significant LCP contributor. Move non-critical styles to load after initial render. Critical CSS extraction tools (CriticalCSS.com, or WP Rocket's built-in critical CSS generation) identify and inline only the styles needed for above-the-fold content.
4. Use a CDN. Cloudflare's free tier or BunnyCDN (₹500–800 per month) serves your assets from edge nodes geographically close to your visitors. For a Thiruvananthapuram-hosted site serving users in Mumbai or Delhi, a CDN reduces TTFB (Time to First Byte) substantially by eliminating the full round-trip to the origin server.
5. Upgrade your hosting. Standard shared hosting in India — the ₹100–300 per month range — typically delivers TTFB above 600ms. Managed WordPress hosting such as Cloudways on DigitalOcean (approximately ₹1,500 per month) or Kinsta (approximately ₹2,500 per month) consistently delivers TTFB under 200ms, which is a prerequisite for achieving good LCP on mobile.
Fixing INP — The Interactivity Metric
INP is harder to optimise than LCP because it measures all interactions during the entire page lifecycle, not just the first one. A page can have excellent LCP and terrible INP if JavaScript running after page load blocks user interaction responses.
Common INP causes on Indian business websites: heavy JavaScript bundles from Bootstrap, jQuery plugins, and Google Tag Manager containers with many active tags; long-running tasks on the main thread that delay interaction processing; and unoptimised event listeners that execute synchronously on scroll and resize events.
1. Audit your GTM container. Every marketing pixel — Facebook Pixel, Google Ads conversion tracking, Hotjar session recording, live chat widgets — adds JavaScript that executes during or after page load. Each can create tasks that block the main thread. Open GTM and remove tags for platforms you no longer actively use. A container with 15 tags can easily add 300–500ms of main-thread blocking time on mid-range Android devices.
2. Defer non-critical JavaScript. Add defer or async attributes to script tags that do not need to execute synchronously. Scripts loaded with defer execute after HTML parsing, keeping the main thread free during the critical loading window.
3. Break up long tasks. JavaScript functions that run continuously for more than 50ms block the main thread and prevent the browser from responding to user interactions. Use setTimeout with a delay of zero, or the newer scheduler.yield() API, to split long tasks into smaller chunks that allow the browser to handle interactions between each chunk.
4. Use passive event listeners for scroll and touch events. Adding {passive: true} to scroll and touchstart addEventListener calls tells the browser that the handler will never call preventDefault(), allowing it to handle scrolling without waiting for the JavaScript to complete. This prevents touch handlers from delaying scroll responsiveness.
Fixing CLS — Layout Shift Causes and Cures
CLS measures unexpected movement of visible content while the page is loading or after it has loaded. Each shift is scored based on how much content moved and how far it moved. The most common culprits on Indian websites:
Images without explicit dimensions are the leading CLS cause. When an <img> tag has no width and height attributes, the browser cannot reserve space for it. When the image eventually loads, it pushes surrounding content down — shifting the layout and accumulating CLS score.
Web fonts cause FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text). When a Google Font loads and replaces the fallback system font, the new font's different dimensions cause text to reflow, shifting surrounding elements.
Cookie consent banners and notification bars that appear at the top of the page after initial render push all page content downward, creating a significant layout shift.
Fixes:
1. Add explicit width and height attributes to every <img> tag matching the image's natural dimensions. Modern browsers use these values to calculate and reserve the correct aspect-ratio space before the image loads.
2. Use font-display: swap in your @font-face declarations and preload critical fonts with a <link rel="preload"> tag in the <head>. This reduces the FOUT window and prevents the font from shifting text after the page appears stable.
3. Reserve space for ad slots using a min-height CSS rule on the container before the ad script loads. An ad iframe that appears without reserved space is one of the highest-scoring CLS causes on monetised sites.
4. Place cookie consent banners below the fold or use fixed positioning that does not affect document flow. Banners injected above content are among the most impactful CLS contributors on Indian e-commerce and service sites.
WordPress-Specific Optimisation
WordPress has a mature plugin ecosystem for Core Web Vitals. The most effective stack for a typical Indian WordPress business site:
WP Rocket (approximately ₹3,500 per year) handles CSS and JavaScript minification, lazy loading configuration, critical CSS generation, and CDN integration. It is the most comprehensive single-plugin solution and typically moves a poorly performing WordPress site from red to green in one configuration session.
ShortPixel or Smush for automatic image compression and WebP conversion on upload. ShortPixel's API-based approach processes images server-side and works regardless of server configuration.
Cloudflare (free plan) as CDN and TTFB reducer. Cloudflare's free tier includes DDoS protection, SSL, and global CDN — meaningful TTFB improvements for Indian sites with international or pan-India visitors.
If budget is a constraint, a fully free stack: LiteSpeed Cache (if your host uses LiteSpeed, which includes SiteGround) + Smush free tier + Cloudflare free. This combination can achieve comparable results for simple sites.
Theme selection has a larger impact than most site owners realise. Astra and Kadence are built with performance as a core requirement. Divi and Avada generate heavier HTML and load significantly more JavaScript out of the box, requiring substantially more effort to optimise.
Shopify-Specific Optimisation
Shopify's infrastructure manages server-side performance — TTFB and hosting speed are Shopify's responsibility. But theme JavaScript and installed apps are the merchant's responsibility, and these are where Shopify CWV problems originate.
1. Audit installed apps. Each Shopify app that is installed and active injects script tags into your storefront, even if you rarely use the app's features. Open Chrome DevTools, go to Network, filter by JS, and reload your homepage. Identify which scripts belong to apps you do not actively use, and remove those apps from your store. It is common for a Shopify store with 20 installed apps to have 15–20 third-party scripts loading on every page.
2. Switch to Dawn or another performance-optimised theme. Shopify's official Dawn theme is built to modern performance standards. Legacy themes such as Debut and Brooklyn were built before CWV became a ranking signal and carry render-blocking JavaScript that is difficult to remove without theme modification.
3. Compress product images before uploading. Shopify automatically resizes images for different breakpoints but does not compress them. Upload images that are already compressed using Squoosh or Kraken. A product image uploaded at 3MB will be resized to fit the display area but retain its original compression — target under 200KB for primary product images.
4. Remove unused font weights. Many Shopify themes load complete Google Fonts families including weights that are never used in the theme design. Identify which font weights are actually applied in the CSS and remove the rest from the font loading declaration.
Measuring After Fixes
After implementing optimisations, measurement needs to be systematic to understand actual impact.
Run PageSpeed Insights on mobile for three to five key pages: your homepage, your top product or service page, and your top-traffic blog post. These are the pages most likely to contribute to your site's CrUX data pool in Google Search Console.
Wait 28 days for Google Search Console's Core Web Vitals report to update with fresh field data. CrUX data is a 28-day rolling average. Changes you make today show up immediately in PageSpeed Insights lab data but take several weeks to appear in GSC field data. Do not judge your optimisation results on GSC data before the 28-day window.
Track the "Good URLs" percentage trend in the GSC Core Web Vitals report rather than individual page scores. The practical progression: moving URLs from "Poor" to "Needs Improvement" is the first goal; moving them from "Needs Improvement" to "Good" is the second. Both stages have ranking implications.
Priority order: always fix mobile before desktop (Indian traffic is majority mobile), and fix your highest-traffic URLs before lower-priority pages. A 10% improvement on a page that receives 5,000 monthly visitors has more business impact than a 50% improvement on a page that receives 200.
The India-Specific Context
Indian users connect primarily on 4G networks with an average download speed of approximately 25 Mbps — but with high variability depending on network congestion, location, and carrier. The typical device is a mid-range Android: Redmi Note series, Realme, Samsung Galaxy M-series. These devices have significantly less CPU performance than the high-end devices used for development and testing.
Network conditions amplify LCP problems. An image that loads in 0.8 seconds on a 100 Mbps fibre connection may take 2.2 seconds on variable 4G. Always optimise for the worst reasonable scenario in your target market, not the average.
CPU constraints affect INP. JavaScript-heavy pages that perform smoothly on a MacBook — or even on a flagship Android phone — may exceed 500ms INP on a Redmi Note. When testing INP, use real mid-range devices rather than Chrome DevTools mobile emulation. DevTools throttling approximates network conditions but does not fully replicate the CPU constraints of actual mid-range hardware.
The gap between lab scores and field scores is typically larger for Indian sites than for sites targeting Western markets. PageSpeed Insights lab scores are measured on a simulated device with consistent conditions. Real Indian users bring enormous device and connection diversity. For decision-making purposes, always trust the field data from Google Search Console over the lab data from PageSpeed Insights.
Frequently Asked Questions
Will improving Core Web Vitals directly improve my Google rankings?
Core Web Vitals are a confirmed Google ranking signal but described as a "tiebreaker" — a page with excellent content and poor CWV will generally rank above a page with weak content and excellent CWV. The practical impact: for queries where content quality between competing pages is comparable, CWV can be the deciding factor. More measurably: improving CWV improves user experience, which reduces bounce rate and increases session duration — these behavioural signals influence rankings indirectly. The clearest business case for CWV improvements is often conversion rate, not just ranking: a page that loads 1 second faster on mobile converts 10–15% more visitors.
My PageSpeed Insights score is 95 on desktop but 45 on mobile — which should I prioritise?
Mobile — always. Google uses mobile-first indexing, meaning it primarily crawls and evaluates your site's mobile version. Your desktop score of 95 has no SEO advantage over the mobile score of 45 from Google's perspective. The gap between desktop and mobile scores is common on Indian sites because desktop performance benefits from faster CPU and stable connections that mask JavaScript and image issues. Focus your optimisation efforts entirely on mobile: compress images to mobile-appropriate sizes, remove render-blocking JavaScript, and test with a real mid-range Android device rather than Chrome's desktop mobile emulation.
Does Core Web Vitals performance affect Google Ads Quality Score?
Yes — Google Ads Landing Page Experience score factors include page load speed and mobile-friendliness, which correlate strongly with Core Web Vitals. A slow landing page increases your cost-per-click (CPC) because Google penalises poor landing page experience with a lower Quality Score, which raises your bid requirement for the same ad position. Specifically: landing pages with poor LCP on mobile receive lower expected CTR adjustments in the Quality Score calculation. Fixing Core Web Vitals on your Google Ads landing pages can reduce CPC by 15–30% for the same position — making CWV optimisation directly cost-recoverable through ad spend efficiency.