Setting a Mobile-First Performance Budget
Learn how to define a performance budget optimized for mobile users on slow 3G connections. Covers total page weight, JavaScript limits, and timing targets for mobile-first web development.
Detailed Explanation
Mobile-First Performance Budgets
A mobile-first performance budget starts from the constraints of the slowest connections your users experience. On a typical slow 3G connection (0.4 Mbps), every kilobyte has a measurable impact on load time.
Calculating Your Mobile Budget
The formula for a weight-based budget is:
Total budget (KB) = Connection speed (Mbps) x Target load time (s) x 125
For slow 3G (0.4 Mbps) with a 5-second target: 0.4 x 5 x 125 = 250 KB total.
For fast 3G (1.6 Mbps) with a 3-second target: 1.6 x 3 x 125 = 600 KB total.
Recommended Mobile-First Limits
| Category | Budget |
|---|---|
| Total Page | 300 KB |
| JavaScript | 100 KB |
| CSS | 40 KB |
| Images | 100 KB |
| Fonts | 40 KB |
| Requests | 20 |
| TTFB | 600 ms |
| FCP | 1500 ms |
| LCP | 2000 ms |
Why JavaScript Gets the Strictest Limit
JavaScript has a unique cost beyond download size. Unlike images that only need to be decoded, JavaScript must be parsed, compiled, and executed. On a mid-range mobile phone, parsing 100 KB of JavaScript can take 300-500 ms — time that blocks interactivity.
Progressive Enhancement Strategy
With a mobile-first budget, you build the core experience within the tight constraints, then progressively enhance for faster connections:
- Core experience — HTML + critical CSS + minimal JS (fits mobile budget)
- Enhanced experience — Additional interactivity, non-critical CSS (fits desktop budget)
- Full experience — Rich animations, high-res images, web fonts (broadband only)
Monitoring and Enforcement
Set up automated checks using tools like Lighthouse CI or bundlewatch in your CI/CD pipeline. Export your budget from this tracker as JSON to use as configuration for these tools.
Use Case
Mobile-first budgets are essential for any site targeting a global audience. In emerging markets, most users access the web on mid-range Android devices over 3G or slow 4G connections. E-commerce sites that set and enforce mobile-first budgets often see 15-30% improvements in conversion rates on mobile devices.