Setting a Performance Budget for Mobile 3G
Calculate a realistic performance budget for users on 3G mobile connections. Learn how to allocate 600 KB across HTML, CSS, JS, images, and fonts for a 3-second load time target.
Detailed Explanation
Performance Budget for Mobile 3G
Mobile 3G networks typically deliver around 1.6 Mbps download speed with 300-400ms latency. These conditions represent a large portion of global internet users, particularly in emerging markets. Designing for 3G is not an edge case — it is a baseline.
The 600 KB Budget
At 1.6 Mbps with a 3-second target load time:
1.6 Mbps × 3 seconds × 125 = 600 KB
This 600 KB must cover everything the browser downloads to render the page: HTML, CSS, JavaScript, images, fonts, favicons, analytics scripts, and any third-party resources.
Recommended Allocation for 3G
| Category | Budget | Rationale |
|---|---|---|
| HTML | 30 KB | Minified markup, server-compressed |
| CSS | 40 KB | Critical CSS inlined, rest deferred |
| JavaScript | 150 KB | Framework + app code, tree-shaken |
| Images | 280 KB | Responsive images, WebP/AVIF format |
| Fonts | 60 KB | 1-2 font files, subset to used chars |
| Other | 40 KB | Analytics, favicons, manifest |
Why JavaScript Hurts Most on 3G
JavaScript has a uniquely high cost on slow connections and low-end devices:
- Download time — 150 KB takes about 0.75 seconds on 3G
- Parse time — Mobile CPUs are 3-5x slower than desktop CPUs for parsing JS
- Execution time — Hydration, event listeners, and initialization add more delay
- Blocking — Render-blocking scripts halt all other processing
The total time cost of 150 KB of JavaScript on a mid-range phone on 3G can be 2-4 seconds — far more than 150 KB of images, which simply decode and display.
Optimization Strategies for 3G
- Inline critical CSS — Avoid an extra round-trip for above-the-fold styles
- Defer non-critical JS — Use
asyncanddeferattributes; code-split aggressively - Use modern image formats — WebP saves 25-35% over JPEG; AVIF saves 40-50%
- Subset fonts — Use
unicode-rangeand tools likeglyphangerto include only needed characters - Enable compression — Brotli reduces text assets by 15-20% more than gzip
- Set cache headers — Returning users should download almost nothing on subsequent visits
Use Case
Planning a mobile 3G budget is essential for teams targeting global audiences, especially in regions like South Asia, Southeast Asia, Africa, and Latin America where 3G remains dominant. E-commerce companies expanding internationally must ensure their product pages load in under 3 seconds on 3G to avoid losing potential customers. Progressive web apps (PWAs) particularly benefit from strict 3G budgets since they target mobile-first experiences.