Web performance in India is a different problem than web performance in the US or Europe. When you’re optimizing for a user on a 4G connection in Bhopal on a mid-range Android phone, the numbers that matter and the fixes that help are not the same as optimizing for someone on fiber in San Francisco.<\/p>\n
This checklist is built specifically for Indian developers building for Indian users.<\/p>\n
Three factors make India a uniquely challenging performance environment:<\/p>\n
Network variability.<\/strong> Indian mobile networks are fast when they’re good (5G in metro areas can be excellent) and extremely slow when they’re not (rural 2G\/3G, peak hour congestion, elevator \/ basement dead zones). Your site needs to work on both \u2014 not just the good case.<\/p>\n Device diversity.<\/strong> The Indian smartphone market spans from flagship iPhones in corporate offices to \u20b98,000 Android phones in tier-3 cities. JavaScript-heavy sites that perform beautifully on a high-end device can be completely unusable on low-end hardware.<\/p>\n High latency to Western servers.<\/strong> If your server is in the US or Europe, Indian users are dealing with 150\u2013400ms base latency before your application even starts. This compounds every other performance problem.<\/p>\n Never optimize what you haven’t measured. Start here:<\/p>\n India baseline targets:<\/strong><\/p>\n \u2610 Use a server or CDN with an India edge node<\/strong><\/p>\n Cloudflare (free), AWS Mumbai (ap-south-1), DigitalOcean Bangalore, or Vercel \u2014 all have India-region infrastructure. Never serve Indian users from US-East if you can help it.<\/p>\n \u2610 Enable HTTP\/2 or HTTP\/3<\/strong><\/p>\n HTTP\/2 multiplexes multiple requests over one connection \u2014 critical for performance on high-latency connections. Check in Chrome DevTools \u2192 Network \u2192 Protocol column. Should show “h2” or “h3”.<\/p>\n \u2610 Set proper cache headers on static assets<\/strong><\/p>\n \u2610 Enable Gzip\/Brotli compression<\/strong><\/p>\n \u2610 Implement server-side caching<\/strong><\/p>\n For Laravel: Redis page caching via Laravel Cache or Nginx FastCGI cache. A page that takes 800ms to generate from the database should serve in 5ms from cache.<\/p>\n \u2610 Convert all images to WebP or AVIF<\/strong><\/p>\n WebP is 30\u201340% smaller than JPEG at the same quality. AVIF is another 20% smaller than WebP. Both are supported on all modern browsers.<\/p>\n \u2610 Serve correctly sized images<\/strong><\/p>\n A 2000px wide image displayed at 400px width wastes 80% of the bandwidth. Use responsive images:<\/p>\n \u2610 Lazy load all below-the-fold images<\/strong><\/p>\n \u2610 Set explicit width and height on all images<\/strong><\/p>\n This prevents layout shift (CLS) \u2014 one of the most common CWV failures:<\/p>\n \u2610 Compress images before upload<\/strong><\/p>\n Target: product images under 100KB, hero images under 200KB, thumbnails under 30KB. Tools: Squoosh (browser), ImageOptim (Mac), Cloudflare Images (automated).<\/p>\n \u2610 Audit your JavaScript bundle size<\/strong><\/p>\n \u2610 Remove unused JavaScript<\/strong><\/p>\n Every npm package you install adds to your bundle. Audit with:<\/p>\n \u2610 Code split at the route level<\/strong><\/p>\n Don’t load the entire application upfront. Load only the code for the current page:<\/p>\n \u2610 Defer non-critical JavaScript<\/strong><\/p>\n \u2610 Remove unused CSS<\/strong><\/p>\n Tailwind CSS already purges unused classes in production. For custom CSS, use PurgeCSS.<\/p>\n \u2610 Inline critical CSS<\/strong><\/p>\n The CSS needed to render above-the-fold content should be inlined in the HTML head \u2014 not loaded from a separate file:<\/p>\nThe Checklist<\/h2>\n
Section 1 \u2014 Measure First<\/h3>\n
\n\n
\n \nTool<\/th>\n What It Measures<\/th>\n India-Specific Tip<\/th>\n<\/tr>\n<\/thead>\n \n PageSpeed Insights<\/td>\n Core Web Vitals, opportunities<\/td>\n Check mobile score, not just desktop<\/td>\n<\/tr>\n \n WebPageTest<\/td>\n Waterfall, real device testing<\/td>\n Test from Mumbai location, on mobile<\/td>\n<\/tr>\n \n GTmetrix<\/td>\n Waterfall, filmstrip<\/td>\n Set test location to Mumbai<\/td>\n<\/tr>\n \n Chrome DevTools<\/td>\n Network throttling simulation<\/td>\n Test on “Slow 4G” and “3G” presets<\/td>\n<\/tr>\n \n Lighthouse<\/td>\n Full audit with recommendations<\/td>\n Run in incognito, check mobile<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \n
Section 2 \u2014 Server and Hosting<\/h3>\n
# Nginx \u2014 cache static assets for 1 year\r\nlocation ~* \\.(js|css|png|jpg|webp|woff2|ico)$ {\r\n expires 1y;\r\n add_header Cache-Control \"public, immutable\";\r\n}<\/code><\/pre>\n# Nginx \u2014 enable Brotli (better than Gzip)\r\nbrotli on;\r\nbrotli_comp_level 6;\r\nbrotli_types text\/plain text\/css application\/javascript application\/json image\/svg+xml;<\/code><\/pre>\nSection 3 \u2014 Images (Biggest Win for Most Indian Sites)<\/h3>\n
\/\/ In HTML \u2014 serve WebP with JPEG fallback\r\n<picture>\r\n <source srcset=\"hero.avif\" type=\"image\/avif\">\r\n <source srcset=\"hero.webp\" type=\"image\/webp\">\r\n <img src=\"hero.jpg\" alt=\"Hero image\" loading=\"lazy\">\r\n<\/picture><\/code><\/pre>\n\/\/ In Laravel \u2014 auto-convert on upload\r\nuse Intervention\\Image\\Laravel\\Facades\\Image;\r\n\r\n$image = Image::read($request->file('image'));\r\n$image->toWebp(80)->save(storage_path('app\/public\/images\/' . $filename . '.webp'));<\/code><\/pre>\n<img\r\n srcset=\"hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w\"\r\n sizes=\"(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px\"\r\n src=\"hero-800.webp\"\r\n alt=\"Hero\"\r\n loading=\"lazy\"\r\n><\/code><\/pre>\n<img src=\"product.webp\" loading=\"lazy\" alt=\"Product\"><\/code><\/pre>\n<img src=\"product.webp\" width=\"400\" height=\"300\" loading=\"lazy\" alt=\"Product\"><\/code><\/pre>\nSection 4 \u2014 JavaScript<\/h3>\n
# Vite \u2014 analyze bundle\r\nnpm run build -- --analyze\r\n\r\n# Or install the visualizer plugin\r\nnpm install --save-dev rollup-plugin-visualizer<\/code><\/pre>\nnpx depcheck # Find unused packages\r\nnpx bundlephobia # Check package sizes before installing<\/code><\/pre>\n\/\/ React \u2014 lazy load route components\r\nimport { lazy, Suspense } from 'react';\r\nconst Dashboard = lazy(() => import('.\/pages\/Dashboard'));\r\nconst Analytics = lazy(() => import('.\/pages\/Analytics'));\r\n\r\n\/\/ In router\r\n<Suspense fallback={<Loading \/>}>\r\n <Dashboard \/>\r\n<\/Suspense><\/code><\/pre>\n<!-- Load after HTML parsed -->\r\n<script src=\"analytics.js\" defer><\/script>\r\n\r\n<!-- Load when browser is idle -->\r\n<script>\r\n window.addEventListener('load', () => {\r\n import('.\/chat-widget.js');\r\n });\r\n<\/script><\/code><\/pre>\nSection 5 \u2014 CSS<\/h3>\n
<!-- Inline critical CSS -->\r\n<style>\r\n \/* Only the CSS needed for above-the-fold content *\/\r\n body { margin: 0; font-family: Inter, sans-serif; }\r\n .hero { ... }\r\n<\/style>\r\n\r\n<!-- Load the rest asynchronously -->\r\n<link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.rel='stylesheet'\"><\/code><\/pre>\nSection 6 \u2014 Fonts<\/h3>\n