Skip to main content

Web Performance / Field notes

How to Optimise Web Performance for India's Diverse Mobile Users

For Indian businesses, website speed isn't just an SEO metric—it's a critical factor for user retention and conversions, especially given the prevalence of budget Android phones and variable 4G networks. Learn how to address Core Web Vitals challenges unique to the Indian market.

In India, where over 95% of internet users access the web via mobile, and a significant portion rely on budget Android devices and variable 4G networks, web performance is not a luxury—it’s a business imperative. A slow website or app doesn't just annoy users; it directly impacts your bottom line, leading to higher bounce rates, abandoned carts, and reduced engagement. Google's Core Web Vitals (CWV) are no longer just 'nice-to-have' metrics; they are a critical ranking factor and a direct signal for user experience that affects everything from your D2C brand's sales during Diwali to a SaaS product's onboarding completion rates.

TL;DR: Optimising web performance for India means prioritising Core Web Vitals (LCP, INP, CLS) specifically for low-end Android devices and variable 4G networks. Focus on aggressive image/JS optimisation, strategic server-side rendering, and efficient third-party script management, using real-world CrUX data from India to guide your strategy and ensure a smooth experience for every Indian user.

Key takeaways

Long exposure of traffic with glowing light streaks in Kathmandu's modern cityscape at dusk.
Photo by Aadarsh Pandey on Pexels
  • Indian Mobile Context is Unique: Design and optimise for budget Android devices, variable 4G/3G networks, and data-saver modes prevalent across Tier-2 and Tier-3 cities.
  • CrUX Data is Your Reality Check: Rely on Google's Chrome User Experience (CrUX) Report for real-world performance metrics from Indian users, as lab data often doesn't reflect these conditions.
  • Prioritise LCP, INP, and CLS for Conversions: Poor CWV scores directly impact user retention and conversion rates, especially in competitive Indian e-commerce and D2C sectors.
  • Aggressive Optimisation is Key: Implement strategies like WebP images, critical CSS, selective hydration, and efficient third-party script loading to save bandwidth and CPU cycles.
  • Strategic Server-Side Rendering (SSR) or ISR: For content-heavy sites, SSR/ISR can significantly improve LCP on slow networks by delivering render-ready HTML.

Understanding Core Web Vitals in the Indian Context

A developer's hand interacting with code on a laptop screen in a workspace setting.
Photo by Lukas Blazek on Pexels

Core Web Vitals measure real-world user experience across three key dimensions: loading performance (Largest Contentful Paint - LCP), interactivity (Interaction to Next Paint - INP), and visual stability (Cumulative Layout Shift - CLS). For Indian businesses, these metrics take on added significance due to the unique characteristics of our user base:

  • Largest Contentful Paint (LCP): This measures how long it takes for the largest content element (like a hero image or headline text) to become visible within the viewport. On slow 4G networks or with high-latency connections common in India, a large unoptimised hero image or a render-blocking JavaScript bundle can easily push your LCP beyond the 'Good' threshold of 2.5 seconds.
  • Interaction to Next Paint (INP): This measures the latency of all user interactions with a page. On budget Android devices with limited processing power, heavy JavaScript execution can lead to long tasks, making your app feel sluggish and unresponsive. An INP score exceeding 200 milliseconds is considered 'Needs Improvement'.
  • Cumulative Layout Shift (CLS): This measures unexpected layout shifts of visual page content. While universally important, for Indian users on data-saver modes, dynamically loaded ads or content that doesn't reserve space can be particularly disruptive, leading to accidental clicks and frustration. A CLS score below 0.1 is 'Good'.

Google has been explicit about CWV's impact on search rankings and the Page Experience signal, which is crucial for visibility on google.co.in. Ignoring these can mean losing out to competitors who prioritise speed for the Indian market.

Measure Real Performance: CrUX Data for India

Many developers test their sites on fast Wi-Fi with high-end laptops, leading to misleading Lighthouse lab scores. For Indian users, the reality is often different. This is where Google's Chrome User Experience (CrUX) Report becomes invaluable. CrUX provides field data—real-user metrics collected from Chrome users—across various countries, including India.

Why CrUX Data is Critical for India

  • Reflects Actual User Conditions: CrUX data captures performance across diverse network conditions (2G, 3G, 4G, Wi-Fi), device types (budget Androids, feature phones), and geographical locations within India, offering a true picture of your site's performance for your target audience.
  • P75 Threshold: CWV scores are based on the 75th percentile (P75) of page loads. This means 75% of your users must experience 'Good' performance for your site to pass. For a large, diverse country like India, meeting this P75 threshold is a significant engineering challenge.

In a recent client engagement, a D2C brand selling traditional wear across India, our team measured a stark difference: their Lighthouse score from a Delhi server was excellent (LCP ~1.5s, INP ~50ms). However, their CrUX origin summary for India showed LCP at 4.2s and INP at 350ms, primarily due to users in Tier-2 and Tier-3 cities on slower networks and older devices. This discrepancy highlighted the need to optimise for the lowest common denominator, not just the ideal case.

You can check your site's CrUX data directly in PageSpeed Insights or use the CrUX Dashboard on Data Studio for a more granular view across different countries.

Common Root Causes and Step-by-Step Fixes

1. Largest Contentful Paint (LCP) Optimisation for Indian Networks

High LCP is often a result of slow server response times (TTFB), render-blocking resources, or unoptimised images/videos.

Fixes:

  1. Optimise Images & Media: This is paramount for India. Always use modern formats like WebP (and AVIF where supported) with aggressive compression. Implement responsive images using srcset and sizes to serve the correct image resolution for each device. Lazy-load images below the fold.
  2. Leverage CDNs with Indian PoPs: A Content Delivery Network (CDN) like Cloudflare, Akamai, or even local providers with Points of Presence (PoPs) in major Indian cities (Mumbai, Bengaluru, Chennai, Delhi) can drastically reduce TTFB by serving static assets closer to your users.
  3. Eliminate Render-Blocking Resources: Move non-critical CSS to the end of the <head> or inline critical CSS. Defer non-critical JavaScript using defer or async attributes. For Next.js applications, use the built-in <Image> and <Script> components for automatic optimisation.
  4. Preload Critical Assets: For your LCP element (e.g., hero image), use <link rel="preload" fetchpriority="high" as="image" href="/path/to/hero.webp"> to tell the browser to fetch it early.
  5. Server-Side Rendering (SSR) or Incremental Static Regeneration (ISR): For content-heavy pages, SSR or ISR (in frameworks like Next.js) can deliver fully rendered HTML to the browser, significantly reducing the client-side work required for the initial paint. This is a game-changer for slower devices and networks.

2. Interaction to Next Paint (INP) Optimisation for Budget Androids

Long tasks that block the main thread are the primary culprits for poor INP. These are often caused by heavy JavaScript execution or complex UI updates.

Fixes:

  1. Minimise JavaScript Bundle Size: Smaller bundles load faster and execute quicker on budget devices. Implement code splitting and dynamic imports to load only what's necessary for the current view.
  2. Debounce and Throttle User Input: For frequently triggered events like search input or scroll, use debouncing or throttling to limit the number of times the event handler fires.
  3. Break Up Long Tasks: If you have computationally intensive JavaScript, break it into smaller chunks using scheduler.yield() or React's useTransition/startTransition. This allows the browser to process other tasks and remain responsive.
  4. 
    import { useTransition } from 'react';
    
    function SearchInput() {
      const [isPending, startTransition] = useTransition();
      const [query, setQuery] = useState('');
    
      function handleChange(e) {
        startTransition(() => {
          setQuery(e.target.value);
        });
      }
    
      return (
        <input type="text" value={query} onChange={handleChange} disabled={isPending} />
      );
    }
    
  5. Leverage Web Workers: Offload heavy computations to a Web Worker, which runs in a separate thread, freeing up the main thread for UI updates and responsiveness. This is particularly effective for complex data processing or AI model inference on the client side.
  6. Optimise Third-Party Scripts: Ads, analytics (e.g., Google Analytics, Facebook Pixel), and payment gateway widgets (especially for UPI flows) can introduce significant INP issues. Lazy-load them, defer their execution, or use a tag manager to control their loading. Consider self-hosting critical scripts if feasible.

3. Cumulative Layout Shift (CLS) Prevention for Dynamic Content

Unexpected shifts are frustrating and can lead to users clicking the wrong elements, a common issue on content-rich Indian news portals or e-commerce sites with dynamic ads.

Fixes:

  1. Always Specify Image and Video Dimensions: Use width and height attributes or CSS aspect-ratio for images and videos to reserve space before they load.
  2. Reserve Space for Ads and Embeds: If you display ads (e.g., Google AdSense) or third-party embeds (e.g., YouTube, social media feeds), ensure you reserve sufficient space for them. If the ad slot is empty, collapse it or use a placeholder of the expected size.
  3. Font Optimisation: Use font-display: optional or font-display: swap (with preloading critical fonts) to prevent layout shifts caused by font loading. optional is preferred for minimal shift, but swap is acceptable if you preload the font to ensure it's available quickly.
  4. Avoid Inserting Content Above Existing Content: Unless it's a direct user interaction, avoid injecting content dynamically at the top of the page after initial render.

Performance Budgets and CI for Indian Teams

For Indian startups and enterprises, maintaining performance over time, especially with rapid feature development, is crucial. Integrating performance budgets into your Continuous Integration (CI) pipeline ensures that new code doesn't degrade your CWV scores.

Tools like Lighthouse CI can automate performance checks on every pull request. Set thresholds for LCP, INP, and CLS, and fail builds if these thresholds are breached. This proactive approach prevents performance regressions from reaching production, saving costly fixes later.

Our team, when building SaaS products for Indian clients, often sets aggressive performance budgets. For instance, an LCP budget of 2.0 seconds and an INP budget of 150 milliseconds for mobile views. This forces the team to consider performance from the outset, leading to more robust and user-friendly applications for the Indian market.

When NOT to Over-Optimise

While CWV are critical, there's a point of diminishing returns. Over-optimising for every edge case can lead to increased development complexity, slower feature delivery, and higher maintenance costs. For instance, aggressively stripping all non-critical JavaScript might break complex interactive components on a high-end device, or micro-optimising every single byte might not yield significant real-world gains if your primary bottleneck is a slow third-party API. Focus on the P75 CrUX data for your target audience. If 75% of your Indian users are having a 'Good' experience, you can allocate resources to other impactful features. Balance performance with user expectations and business goals.

Impact on Indian Businesses: Conversions and Compliance

Beyond SEO, strong CWV scores directly translate to better business outcomes for Indian organisations:

  • Increased Conversions: For D2C brands and e-commerce platforms, a fast, stable experience reduces cart abandonment. During mega-sales events like Flipkart's Big Billion Days or Amazon's Great Indian Festival, every second counts. A 1-second delay can mean a significant drop in conversions, especially when users are browsing on budget phones with fluctuating 4G signals.
  • Better User Engagement: SaaS products, especially those integrating with India Stack services like Aadhaar eKYC or UPI payments via the NPCI's UPI platform, require a smooth, responsive UI. Delays in loading or interacting with forms can lead to frustration and incomplete transactions.
  • Compliance & Data Localisation: While not a direct CWV factor, the Digital Personal Data Protection Act, 2023 (DPDP Act) and RBI's payment data localisation rules mean many Indian businesses must host data within India. This can sometimes lead to different server infrastructure choices, which must be factored into TTFB and overall performance strategies to ensure local hosting doesn't inadvertently degrade speed. (Please note: This is general information and not legal advice. Consult a legal expert for compliance specifics.)

FAQ

How do I check my website's Core Web Vitals for Indian users?

Use Google PageSpeed Insights (PSI) and look at the 'Field Data' section, which pulls from the Chrome User Experience (CrUX) Report. PSI will show you real-user data specifically for your site, including for users in India if you have sufficient traffic from the region.

What is the biggest CWV challenge for D2C brands in India?

For D2C brands, the biggest challenge is often LCP due to large product images and heavy JavaScript from third-party analytics/ad scripts, coupled with INP issues on low-end Android devices during high-traffic sales events. Optimising images, deferring scripts, and using efficient rendering strategies are key.

Does using a CDN specifically with Indian PoPs help improve CWV?

Absolutely. A CDN with Points of Presence (PoPs) in major Indian cities significantly reduces network latency (TTFB) for users across the country. This directly improves LCP by delivering critical assets faster, especially for users in Tier-2 and Tier-3 cities with less reliable connections.

Should I prioritise mobile-first design for CWV in India?

Yes, mobile-first design is non-negotiable for India. With the vast majority of users on mobile, designing for optimal performance on budget Android devices and variable networks from the outset will naturally lead to better CWV scores and a superior experience for your primary audience.

Partner with Krapton for Optimised Web Performance in India

Ensuring your website or application delivers a fast, fluid experience for every Indian user requires deep technical expertise and an understanding of the local market's unique challenges. At Krapton, our engineering team specialises in diagnosing and fixing Core Web Vitals issues, building high-performance web and mobile applications, and implementing robust performance strategies tailored for the Indian landscape. We help Indian founders, CTOs, and product leaders achieve top-tier performance that boosts SEO, conversions, and user satisfaction.

Ready to see how your site performs for Indian users? Try Krapton's free Core Web Vitals checker — analyze your site's LCP, INP, and CLS scores instantly at https://www.krapton.com/seo-analyzer.

About the author

Krapton Engineering is a team of principal-level software engineers with years of hands-on experience building and optimising high-performance web and mobile applications for Indian and international businesses, focusing on challenging environments like variable networks and budget devices.

  • core web vitals
  • web performance
  • india
  • mobile performance
  • LCP
  • INP
  • CLS
  • android optimisation
  • 4g networks
  • next.js
  • d2c website speed

Your next step

Building something in India? Let’s talk.

Tell Krapton what you want to build and get a clearly scoped plan, team and starting point.

Send a project brief