Mobile Web Performance: Optimization and Best Practices

Why Mobile Performance is Different

Mobile devices have lower CPU and memory capacity. JavaScript parse and compile time is longer.

Network conditions: 3G/4G/5G, WiFi. Variable bandwidth and latency. Mobile users may be on slower connections.

Battery: Heavy JavaScript and animations consume battery. Performance = battery life.

Screen size: Optimized images and layout for small screens. Mobile-first instead of desktop-first.

Mobile-First Design

Mobile-first CSS: Mobile styles first, then override with media query for desktop. @media (min-width: 768px) for large screens.

Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Correct scaling on mobile.

Touch targets: Buttons and links at least 48x48px. Easily tappable with finger. 8px spacing between close elements.

Font size: Minimum 16px. iOS zooms on inputs smaller than 16px. This breaks UX.

Navigation: Hamburger menu, bottom navigation, tab bar. Accessible navigation on mobile.

Image Optimization

Responsive images: Right size with srcset and sizes. Don't load large images on mobile.

Image compression: WebP/AVIF format. Quality 75-80 sufficient for mobile. Compress with TinyPNG, Squoosh.

Lazy loading: Lazy load images below the fold. loading="lazy" attribute.

Placeholder: Blur-up or skeleton placeholder. Show placeholder while image loads.

CDN: Closest CDN node for mobile users. Global CDNs like Cloudflare, Fastly.

JavaScript Optimization

Bundle size: Smaller bundle on mobile. Load only necessary code with code splitting.

Tree shaking: Remove unused code. Use ES modules.

Lazy loading: Lazy load heavy modules (chart, editor, map). With dynamic import().

Polyfill: Remove unnecessary polyfills. Use native APIs instead of core-js (modern browsers support them).

Web Workers: Separate heavy computations from main thread. Don't block UI thread on mobile.

Network Optimization

HTTP/2 or HTTP/3: Parallel processing of multiple requests. Reduces latency on mobile.

Compression: Compress text-based resources with Gzip/Brotli. 60-80% savings.

Caching: Offline cache with Service Worker. Fast loading on repeat visits with cache-first strategy.

Prefetch/Preconnect: Preload critical resources. Establish DNS and TCP connection in advance.

Resource hints: Preload critical CSS and fonts with <link rel="preload">.

Testing and Monitoring

Real device testing: Test on real mobile devices. Chrome DevTools device emulation is not sufficient.

Lighthouse mobile: Mobile performance audit. Test with throttling (CPU 4x slowdown, slow 4G).

WebPageTest: Test with mobile device and connection profile. Filmstrip and waterfall analysis.

RUM: Real mobile user data. Device type, connection speed segmentation.

Core Web Vitals: Separate metrics for mobile and desktop. Mobile report in Google Search Console.