Mobile Web Performance

Also Known As

TL;DR

Explanation

Mobile constraints differ from desktop: CPU is 4-5x slower (script execution is the bottleneck), RAM is limited (50-300MB browser budget), connection is high-latency even on 4G (100-200ms RTT vs 5ms wired), and battery drains on JS execution. Optimisation priorities: minimise main-thread JS (defer, lazy load, web workers), reduce layout thrashing (batch DOM reads and writes), use CSS animations over JS (GPU composited), compress images aggressively (AVIF, WebP), preconnect to third-party origins, and keep Time to Interactive under 5 seconds on a mid-range device.

Common Misconception

Why It Matters

Common Mistakes

• Testing only on desktop or flagship phones — use Chrome DevTools throttling or real mid-range devices.
• Large JavaScript bundles — 500KB of JS takes 5+ seconds to parse and execute on mid-range mobile.
• No image compression — images are 50-80% of mobile page weight.
• Hover-dependent interactions — mobile has no hover state; use touch events or tap targets.

Code Examples

// Bundle served to all devices — 2MB JS:
// webpack output: bundle.js 2.1MB
// Mobile mid-range (Moto G5): 12 seconds to parse
// Battery drain: high
// Result: 40% bounce rate on mobile

// Code splitting + lazy loading:
// Critical bundle: 80KB (loads immediately)
import('./checkout').then(m => m.init()); // 150KB loaded only on checkout
import('./admin').then(m => m.init());    // Never loaded for regular users

// Defer non-critical JS:
<script defer src="analytics.js">

// Respect user's data-saver preference:
if (!navigator.connection?.saveData) {
    loadHeroVideo();
}

// Test with throttling:
// Chrome DevTools: Network > Slow 4G, CPU > 4x slowdown

References

• ↗ https://web.dev/articles/performance-get-started

Tags

Related Terms