Day 131: Mobile Performance — Build Fast or Get Scrolled Past
What We’re Building Today
Here’s the agenda — sharp and focused:
Lazy Loading Engine — defer off-screen images and components until the viewport demands them
Image Optimization Pipeline — serve WebP/AVIF with responsive breakpoints via a Python FastAPI microservice
Mobile Cache Architecture — a multi-layer cache strategy (Memory → IndexedDB → Network) using Service Workers
Performance Monitoring Dashboard — real-time Core Web Vitals collection and visualization
By end of day, you’ll have a React PWA frontend talking to a Python backend with measurable, observable mobile performance — the same pattern Flipkart used when they rebuilt their mobile web as a PWA and saw 70% longer sessions.
Why Mobile Performance Is a Systems Problem, Not a Frontend Problem
Every 100ms of latency costs ~1% in conversions (Amazon, 2023 internal data). On a 3G connection — still 40% of Indian mobile traffic — that’s not hypothetical, it’s revenue bleeding per render.
Mobile performance breaks down across three layers that most tutorials conflate into one:
Network layer — bandwidth is scarce, latency spikes on cell handoff. You optimize here with compression, image format negotiation, and HTTP/2 push. Parse & execute layer — mobile CPUs are 4–6x slower than desktop. JavaScript bundle size and render-blocking resources kill TTI (Time to Interactive). Perceived performance layer — what users feel. Skeleton screens, optimistic UI, and progressive image reveals are the engineering levers here.
Our system targets all three.
Component Architecture
The architecture has three runtime zones:
Client Zone (React PWA): The PerformanceMonitor component wraps the entire app tree. It registers a PerformanceObserver watching largest-contentful-paint, first-input, and layout-shift entries — these are the Core Web Vitals. The LazyLoader HOC (Higher Order Component) uses IntersectionObserver to trigger render only when a component’s root element enters the viewport with a configurable root margin. The ImageOptimizer component negotiates format with the backend by reading navigator.connection.effectiveType and passing it as a query param.
Service Worker Zone: Sits between the network and the React app. Implements a Cache-First strategy for static assets, a Network-First strategy for API calls, and a Stale-While-Revalidate strategy for images. This means users on a flaky connection still get content — it’s served from cache while the SW silently refreshes in the background.
Backend Zone (FastAPI): The /api/images/optimize endpoint receives an image URL, target width, and connection hint. It uses Pillow to resize and convert to WebP/AVIF, caches the result in Redis with a content-hash key, and returns the optimized binary with proper Cache-Control: max-age=31536000, immutable headers.
