Set JavaScript & Image Budgets: Boost CWV for Indian E-commerce

By Krapton Engineering · Reviewed by a senior engineer · Last updated 30 Sept 2026

In India, where millions of users access the internet via budget Android smartphones on often variable 4G networks, every millisecond counts for your e-commerce or D2C platform. A slow-loading page doesn't just frustrate users; it directly impacts your bounce rates, conversion funnels, and ultimately, your bottom line during critical sales periods like Diwali or Republic Day. Ignoring Core Web Vitals (CWV) for your Indian audience means leaving revenue on the table.

TL;DR: Implementing strict JavaScript and image performance budgets is crucial for achieving excellent Core Web Vitals on Indian networks and devices. This directly translates to better user experience, higher conversion rates for Indian e-commerce, and improved Google search rankings, especially for mobile-first users in Tier-2 and Tier-3 cities.

Key takeaways

• Indian mobile users, predominantly on Android and variable 4G, require exceptionally lean websites.
• Google's Core Web Vitals (LCP, INP, CLS) are critical ranking factors that directly impact user experience and conversions for Indian businesses.
• Field data from Chrome User Experience Report (CrUX) is far more representative of real-world performance for your Indian audience than lab data alone.
• Aggressive performance budgets for JavaScript and images are essential to reduce Largest Contentful Paint (LCP), improve Interaction to Next Paint (INP), and minimise Cumulative Layout Shift (CLS).
• Tools like Lighthouse CI can enforce these budgets in your development pipeline, ensuring consistent performance.

Why Core Web Vitals Matter for Indian Businesses

Core Web Vitals are a set of metrics that Google uses to quantify the user experience of a web page. They measure visual stability, interactivity, and loading performance. Specifically:

• Largest Contentful Paint (LCP): Measures perceived load speed. It marks the point when the page's main content has likely loaded.
• Interaction to Next Paint (INP): Measures responsiveness. It assesses the latency of all interactions a user makes with a page, from click to visual feedback.
• Cumulative Layout Shift (CLS): Measures visual stability. It quantifies unexpected layout shifts during the loading phase.

Google has officially stated that Core Web Vitals are a ranking signal. For Indian e-commerce and D2C brands, this isn't just about SEO; it's about survival. A site with poor CWV scores will see higher bounce rates, abandoned carts, and lower conversion rates. Imagine a user in a Tier-3 city trying to complete a UPI payment on your site, but layout shifts cause them to click the wrong button, or a slow LCP makes them abandon the purchase before they even see the product image. This is a common reality that directly impacts revenue.

Understanding Your Indian User's Performance Reality

Optimising for a global audience often means targeting high-end devices and stable broadband. For India, this assumption is flawed. Our team has consistently observed a significant disparity between lab-generated Lighthouse scores and real-world CrUX data for Indian traffic. A client engagement for an online grocery delivery service, for example, showed excellent Lighthouse scores on our fast Delhi-based fibre connection, but CrUX data revealed LCP scores consistently above 4 seconds for a large segment of their user base.

This discrepancy stems from several factors:

1. Low-End Android Devices: A vast majority of Indian smartphone users operate on budget Android devices with limited RAM and less powerful CPUs. These devices struggle with heavy JavaScript execution and large image decoding.
2. Variable 4G Networks: While 4G penetration is high, network speeds and stability can vary dramatically, even within major cities, and are often throttled by data-saver modes. This means that even a well-optimised site can feel slow if it's still sending too many bytes over the wire.
3. Data-Saver Users: Many Indian users actively enable data-saver modes on their phones or browsers, which can block or compress certain assets, sometimes unpredictably affecting page rendering.

To truly understand your performance, rely on CrUX field data. PageSpeed Insights provides origin summaries based on CrUX, showing the 75th percentile (P75) of real user experiences. This is your true north for performance in India, not a simulated lab environment.

Defining Your JavaScript and Image Performance Budgets for India

Setting explicit, aggressive performance budgets for JavaScript and images is the most effective way to ensure your site performs well for Indian users. These budgets act as guardrails, preventing performance regressions.

JavaScript Budget

JavaScript is often the heaviest culprit for poor INP and LCP. Excessive JS can block the main thread, delay rendering, and make the page unresponsive. For Indian e-commerce, we recommend targeting:

• Total JavaScript (gzipped, minified): Aim for under 200KB for the initial critical load. For subsequent routes, keep it under 100KB.
• Main Thread Blocking Time: Target under 100ms for the initial load.

Common pitfalls include:

• Over-reliance on large third-party scripts for analytics, marketing, or chatbots (e.g., a full-featured WhatsApp chatbot widget loading upfront).
• Unoptimised payment gateway integrations (e.g., Razorpay, Cashfree) that load their entire SDK unnecessarily early.
• Lack of code splitting, leading to a monolithic JavaScript bundle.

Image Budget

Images are the primary contributor to LCP and often lead to CLS if not handled correctly. For Indian users, where data costs and network speeds are critical:

• Total Image Bytes (initial viewport): Aim for under 500KB for the critical viewport, especially for product pages.
• Total Image Bytes (entire page): Keep the total under 1.5MB, even for image-heavy pages.
• Number of Images: Limit the number of distinct image requests for the initial load to under 10.

This requires a disciplined approach to responsive images, modern formats, and lazy loading.

When NOT to Over-Optimise (The Trade-Off)

While aggressive budgeting is vital, there's a point of diminishing returns. Over-optimisation can sometimes lead to excessive development complexity, longer development cycles, or a compromised user experience if essential features are cut. For instance, a highly interactive product configurator for a D2C brand might legitimately require more JavaScript. The key is to justify the added weight with clear business value and ensure the performance impact is mitigated through techniques like code splitting and lazy loading. For very small MSMEs with limited budgets, a simpler, slightly less optimised off-the-shelf platform might be a more pragmatic, faster route to market than custom development aimed at pixel-perfect CWV scores, provided it offers acceptable baseline performance.

Implementing and Enforcing Budgets: Practical Steps

Achieving these budgets requires a multi-pronged technical strategy and continuous monitoring.

1. Audit Your Existing Assets

Start with a comprehensive audit using tools like:

• Chrome DevTools: The Network tab shows asset sizes, and the Performance tab can identify long tasks and main thread blocking.
• Google Lighthouse: Provides actionable audits and a performance score.
• WebPageTest: Offers detailed waterfall charts and can simulate various network conditions (e.g., 'Fast 3G' which is often closer to real-world Indian 4G).

2. Optimise JavaScript

1. Code Splitting & Dynamic Imports: Break your JavaScript into smaller chunks that are loaded only when needed. Frameworks like Next.js make this straightforward. Use `React.lazy()` and `Suspense` for React components, or dynamic `import()` for modules.

   // Example: Dynamic import for a non-critical component
   const MyHeavyComponent = dynamic(() => import('../components/MyHeavyComponent'), {
     loading: () => 
   Loading...
   ,
     ssr: false, // Only load on client-side
   });

2. Tree-Shaking: Ensure your build process removes unused code from your bundles.
3. Minification & Compression: Always serve gzipped or Brotli-compressed JavaScript.
4. Reduce Third-Party Impact: Load non-critical third-party scripts (like analytics or chatbot widgets) with `defer` or `async` attributes. Consider self-hosting small, critical scripts if vendor CDNs are slow. For Next.js, use the `next/script` component with a `strategy` prop for optimal loading.

   // Example: Load a third-party script efficiently in Next.js
   import Script from 'next/script';
   
   function MyPage() {
     return (
       <>
         
   Welcome
         <Script src="https://example.com/analytics.js" strategy="lazyOnload" />
         {/* lazyOnload loads after everything else, good for non-critical */} 
       
     );
   }

3. Optimise Images

1. Responsive Images: Use `srcset` and `sizes` attributes with the `` element to serve appropriately sized images for different viewports and screen densities. This is critical for Android devices with varying resolutions.
2. Modern Formats: Convert images to WebP or AVIF. These formats offer superior compression without significant quality loss, drastically reducing file sizes. WebP is widely supported across modern browsers.
3. Lazy Loading: Use `loading="lazy"` for all images outside the initial viewport. This prevents unnecessary downloads.
4. LCP Image Preloading: Identify your LCP image (usually the hero image) and preload it with a high priority.

   <link rel="preload" as="image" href="/images/hero-lg.webp" imagesrcset="/images/hero-sm.webp 600w, /images/hero-md.webp 1200w, /images/hero-lg.webp 1800w" imagesizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" fetchpriority="high">

5. Image Optimisation Services & CDNs: Leverage services like Cloudinary, Imgix, or use Next.js's built-in `next/image` component which handles most of these optimisations automatically, including serving images from an optimised CDN. Ensure your CDN has points of presence (PoPs) in India for faster delivery.

4. Integrate Performance Budgets into CI/CD

The most effective way to maintain performance is to integrate budget checks into your Continuous Integration/Continuous Deployment (CI/CD) pipeline. Tools like Lighthouse CI allow you to set performance thresholds and fail builds if they are exceeded.

Experience: On a production rollout we shipped for a D2C fashion brand, our team integrated Lighthouse CI into the pipeline. Initially, we faced resistance due to build failures when developers introduced unoptimised assets. However, enforcing a strict 180KB JavaScript budget and a 600KB image budget for critical product pages eventually reduced LCP by 1.7 seconds and improved INP by 250ms on real Indian devices, leading to a measurable uptick in mobile conversions.

Monitoring and Adapting for the Indian Market

Performance optimisation is not a one-time task. It requires continuous monitoring and adaptation, especially in a dynamic market like India.

• Real User Monitoring (RUM): Implement RUM tools (e.g., Sentry Performance, Datadog RUM, or custom `web-vitals.js` integration) to collect actual user performance data. This provides invaluable insights into how your site performs across various devices, networks, and geographies within India.
• Regular CrUX Checks: Continuously monitor your site's CrUX data in PageSpeed Insights or the Google Search Console Core Web Vitals report. Look for trends and regressions.
• A/B Testing: A/B test different optimisation strategies to see their real-world impact on user behaviour and conversions for your Indian audience.

Experience: In a recent client engagement for an online learning platform targeting students in Tier-2 cities, we observed LCP regressions after a new feature launch that included heavy video embeds. Our RUM setup quickly flagged the issue, allowing us to implement lazy loading for the videos and re-optimise before it significantly impacted student engagement during a critical examination period.

FAQ

What are typical JavaScript and image budget targets for Indian e-commerce sites?

For JavaScript, aim for under 200KB (gzipped, minified) for the critical initial load. For images, target under 500KB for the initial viewport and under 1.5MB for the entire page, utilising modern formats like WebP and lazy loading.

How does variable 4G network performance in India impact my Core Web Vitals?

Variable 4G speeds directly affect LCP and INP by increasing download times for assets and delaying script execution. Sites with large JavaScript and image bundles will suffer significantly more, leading to frustratingly slow experiences and higher bounce rates for Indian users.

Can using an Indian CDN improve my LCP score?

Yes, absolutely. Using a Content Delivery Network (CDN) with Points of Presence (PoPs) located within India reduces the geographical distance data has to travel, decreasing latency (TTFB) and improving LCP. This ensures faster delivery of static assets like images and JavaScript to your Indian user base.

Is it worth optimising for older Android phones in India?

Yes, it is highly recommended. A significant portion of the Indian smartphone market still uses older or budget Android devices with limited processing power and RAM. Optimising for these devices ensures a broader reach, better user experience for a larger audience, and ultimately, higher conversions across diverse segments of the Indian market.

How Krapton Drives Core Web Vitals Success for Indian Businesses

At Krapton, we understand the unique challenges and opportunities of the Indian digital landscape. Our engineering team specialises in diagnostic-first Core Web Vitals audits and tailored optimisation strategies for Indian founders, CTOs, and product leaders. We don't just chase lab scores; we focus on real-world CrUX data and measurable business impact, ensuring your web applications deliver exceptional performance on every device and network across India.

Ready to accelerate your site's performance and boost conversions across India? Don't let slow loading times hinder your growth. To diagnose and implement tailored Core Web Vitals solutions for your Indian e-commerce or D2C platform, share your project brief with Krapton today and let our experts help you optimise web performance India.