Core Web Vitals: How to Fix LCP, CLS and INP for Your Indian Website

India is a mobile-first internet market. More than 70% of web traffic in India comes from smartphones — and many users are on 4G connections that, while fast in ideal conditions, can be inconsistent. Indian websites that are built for desktop-first experiences, hosted on servers in the US or Europe, and loaded with unoptimised images will consistently fail Core Web Vitals assessments.

The good news is that most Core Web Vitals issues have clear, fixable causes. You don't need to rebuild your entire site. Targeted fixes to the right areas can move you from "Poor" to "Good" in a few weeks.

What are Core Web Vitals?

Google uses three Core Web Vitals metrics as part of its page experience ranking signals:

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page (usually a hero image or large heading) to load. Google's thresholds:

• Good: 2.5 seconds or less
• Needs Improvement: 2.5 – 4 seconds
• Poor: More than 4 seconds

CLS — Cumulative Layout Shift

CLS measures visual instability — how much elements on the page shift unexpectedly as the page loads. If a button moves after an ad loads, or text jumps when a font loads, that increases CLS. Google's thresholds:

• Good: 0.1 or less
• Needs Improvement: 0.1 – 0.25
• Poor: More than 0.25

INP — Interaction to Next Paint

INP (which replaced FID in 2024) measures how quickly your page responds to user interactions — tapping a button, clicking a link, opening a menu. Google's thresholds:

• Good: 200 milliseconds or less
• Needs Improvement: 200 – 500 milliseconds
• Poor: More than 500 milliseconds

Why Indian websites consistently struggle with Core Web Vitals

Several patterns are specific to the Indian web development ecosystem:

• Shared hosting on budget plans: Hundreds of Indian businesses are on ₹99/month shared hosting with server response times over 1 second. This single issue causes LCP failures that can't be fixed by any other optimisation.
• Servers based in the US or Europe: Many popular hosting providers (including some Indian brands) run their servers overseas. This adds 150–400ms of latency for Indian users before a single byte of content is delivered.
• Heavy, unoptimised images: Many Indian websites use full-resolution DSLR photos, screenshots, or images exported from Canva without compression. A 3MB hero image isn't unusual — and it destroys LCP.
• Heavy WordPress themes with builder plugins: Themes like Divi, Avada, or WPBakery generate enormous amounts of CSS and JavaScript. Combined with a page builder, a simple page can load 50+ scripts and stylesheets.
• No lazy loading or size attributes on images: Images without width and height attributes cause layout shifts when they load. This directly causes CLS failures.
• Chat widgets, popup plugins, and social media embeds: Many business websites load live chat scripts, WhatsApp floating buttons, and third-party widgets that block the main thread and worsen INP scores.

Fixing LCP: Largest Contentful Paint

LCP is usually the most impactful metric to fix because it directly measures the perceived loading experience.

1. Identify your LCP element

Open Chrome DevTools, run a Lighthouse audit, and look for the "LCP Element" in the report. It will show you exactly which element is taking the longest. Typically it is:

• A large hero or banner image
• A background image set via CSS
• A large text block (H1 heading)

2. Optimise the LCP image

• Convert to WebP format — WebP files are 25–35% smaller than JPEGs at equivalent quality. Use tools like Squoosh.app or TinyPNG for batch conversion.
• Serve the correct size — don't serve a 2000px wide image for a 400px container on mobile. Use responsive images with srcset.
• Add fetchpriority="high" to your LCP image tag. This tells the browser to prioritise loading this image above everything else.
• Avoid lazy loading the LCP image — the loading="lazy" attribute shouldn't be on your above-the-fold hero image.

3. Improve server response time (TTFB)

LCP can't be fast if your server takes 1–2 seconds just to respond. Fixes:

• Switch to hosting with servers in India or Singapore (closest AWS/GCP region to Delhi).
• Enable server-side caching (WP Super Cache, WP Rocket for WordPress).
• Use a CDN to serve static assets from edge locations close to your visitors.

4. Eliminate render-blocking resources

Scripts and stylesheets that load in the head of your HTML delay everything. Fix this by:

• Adding defer or async to non-critical JavaScript tags.
• Moving non-critical CSS to load asynchronously.
• Inlining critical CSS (the styles needed for above-the-fold content) directly in the HTML head.

Fixing CLS: Cumulative Layout Shift

Layout shifts are frustrating for users and common on Indian websites that use dynamic content, ads, and heavy themes.

1. Always specify image dimensions

Every img tag should have explicit width and height attributes. This lets the browser reserve the correct space before the image loads, preventing layout shifts.

<img src="banner.webp" width="900" height="400" alt="Banner">

2. Reserve space for ads and embeds

Google Ads, Facebook pixels loading widgets, and other third-party embeds often cause large layout shifts. Reserve fixed dimensions for these elements using CSS:

• Set a minimum height on ad containers before ads load.
• Use aspect-ratio in CSS for video embeds instead of waiting for content to determine size.

3. Avoid inserting content above existing content

Banners, cookie notices, and chat widgets that appear above the page content after load cause massive CLS. Load these off-canvas or below the fold, or include them in the initial HTML so the browser accounts for them from the start.

4. Use font-display: swap for web fonts

If you use custom fonts, text may shift when the custom font loads (replacing the fallback font). Add font-display: swap to your @font-face declarations, and use font size and line-height that closely match your fallback font to reduce the visual shift.

5. Avoid animations that change layout properties

CSS animations that change width, height, top, left, or margin contribute to CLS. Use transform and opacity instead — these can be hardware-accelerated without triggering layout recalculations.

Fixing INP: Interaction to Next Paint

INP measures responsiveness — how quickly your page responds after a user tap or click. High INP is usually caused by JavaScript blocking the browser's main thread.

1. Reduce and defer JavaScript

• Audit your plugins and third-party scripts. Many WordPress sites load 20–40 separate JS files. Each one competes for the main thread.
• Use defer on all non-critical scripts.
• Remove plugins you don't actually use — even deactivated plugins sometimes enqueue scripts.

2. Break up long JavaScript tasks

Tasks that take more than 50ms block user interactions. Break up long tasks using setTimeout or the Scheduler API to yield to the browser between chunks of work. This is more relevant for custom-coded applications than standard WordPress sites.

3. Optimise event handlers

Avoid attaching expensive event handlers to frequently-fired events like scroll or mousemove. Use passive event listeners and debounce/throttle where needed.

4. Minimise third-party script impact

Chat widgets (Intercom, Freshchat, Tidio), marketing automation scripts, and social media pixels often have poor INP impact. Load them after the page is interactive using techniques like:

• Loading chat widgets only after user interaction (click a button to open chat rather than auto-loading the full script)
• Using Google Tag Manager with triggers based on user scroll or interaction rather than page load

Hosting and server improvements for Indian websites

Your hosting is the foundation. No amount of image optimisation or script deferral will fix a fundamentally slow server.

Recommended hosting options for Indian websites

• Cloudways (DigitalOcean Mumbai or Vultr Mumbai): Managed cloud hosting with Indian data centres. Excellent performance at ₹700–₹2,000/month. Best for WordPress and WooCommerce.
• Hostinger Business/Cloud: Indian servers available. Good value at ₹250–₹600/month for small to medium sites.
• AWS / Google Cloud Platform (Mumbai region): Best performance for high-traffic or complex applications. More technical setup required. Costs from ₹1,500/month.
• Rocket.net: Managed WordPress hosting with global CDN. Excellent performance but costs more — ~₹2,500/month. Good for sites where performance is business-critical.

Avoid server locations in the US for Indian audiences. The additional latency alone can add 200–400ms to your TTFB and make Core Web Vitals targets very difficult to hit.

CDN recommendations for Indian websites

A CDN (Content Delivery Network) stores copies of your static files (images, CSS, JS) in servers close to your users, reducing the distance data needs to travel.

• Cloudflare (free tier): Has data centres in Mumbai, Chennai, Delhi, Hyderabad, and Kolkata. The free plan provides basic CDN, SSL, and some caching. The best starting point for any Indian website.
• BunnyCDN: Affordable CDN with Indian PoPs. Excellent performance at very low cost — approximately ₹0.07 per GB of transfer. Great for image-heavy sites.
• AWS CloudFront: Has Mumbai edge locations. Best if you are already on AWS infrastructure.
• jsDelivr: Free CDN specifically for open-source libraries and npm packages. If you are loading jQuery, Bootstrap, or other libraries, serving them from jsDelivr rather than your server can improve load times.

Image optimisation for Indian websites

Images are the single largest cause of slow page loads on Indian business websites. Here is a complete image optimisation checklist:

• Use WebP format: Convert all JPEGs and PNGs to WebP. Serve WebP with a JPEG fallback using the HTML picture element for older browsers.
• Compress properly: Aim for 80–85% quality for photos, 90% for graphics with text. Use Squoosh, TinyPNG, or ShortPixel for batch compression.
• Serve correct dimensions: A 1920px wide image in a 400px container wastes bandwidth. Use srcset to serve different sizes at different viewport widths.
• Lazy load below-the-fold images: Add loading="lazy" to all images that aren't visible immediately on page load.
• Do not lazy load the LCP image: Your hero/banner image should load immediately without lazy loading.
• Use fetchpriority="high" on the LCP image: This signals the browser to prioritise this resource.
• Avoid base64-encoded images in CSS: These block CSS parsing and slow down rendering.

WordPress-specific Core Web Vitals fixes

WordPress powers a large proportion of Indian business websites, and it has specific performance patterns to address:

• Use a lightweight theme: Themes like Astra, GeneratePress, or Kadence are built for performance. Avoid feature-bloated themes like Avada or The7 unless you need their specific features.
• Limit page builder usage: Every page builder (Elementor, Divi, WPBakery) adds significant CSS and JS overhead. Consider using Gutenberg blocks instead for simpler pages.
• Install a caching plugin: WP Rocket (paid, ₹3,000/year) is the best all-in-one option. WP Super Cache and W3 Total Cache are free alternatives. Enable page caching, browser caching, and GZIP compression.
• Minify CSS and JavaScript: Most caching plugins include this feature. Enable it to reduce file sizes.
• Remove unused plugins: Every plugin you install has the potential to load scripts and styles. Audit your plugins quarterly — remove anything not in active use.
• Use a local font or preload Google Fonts: Loading fonts from Google's servers adds a connection request. Either self-host your fonts or use the rel="preconnect" and preload technique.

Tools to measure and monitor Core Web Vitals

Use these tools to measure your current scores and track improvements:

• Google PageSpeed Insights: Free. Shows both lab data and real-world (CrUX) data for your URL. The most important tool to benchmark against.
• Google Search Console: The Core Web Vitals report shows you which pages are Poor, Need Improvement, or Good based on real user data. Check this monthly.
• Chrome DevTools Lighthouse: Run audits locally to test before publishing changes. Useful for testing on staging environments.
• WebPageTest.org: More detailed waterfall analysis. Choose a test location in Mumbai for the most representative Indian user experience.
• GTmetrix: Good for identifying specific resources causing slowdowns. Use the Vancouver or Singapore test location for closest to India.

For ongoing monitoring, our SEO services include regular Core Web Vitals audits as part of technical SEO. See all our website services for more.