Mobile Performance Optimization — 4-Phase Plan

[mholzi]

Overview

Performance audit identified CSS bundle as primary bottleneck (123KB, 54% over target). This 4-phase optimization plan targets -40% FCP, -29% LCP, -30% TTI improvements on mobile.

Current State

Asset	Size	Gzipped	Status
player.min.js	69.9KB	19.6KB	✅ On target
admin.min.js	32.3KB	8.6KB	✅ On target
styles.min.css	123.3KB	19.3KB	⚠️ 54% over target

Phase 1: CSS Optimization (HIGH PRIORITY)

Target: 123KB → <80KB

• Run PurgeCSS audit to identify unused styles
• Extract critical CSS for above-the-fold content
• Split CSS: player vs admin bundles
• Remove verbose utility classes

Phase 2: JS Parsing Optimization

• Code splitting: Join flow vs gameplay logic
• Defer non-critical initialization (i18n preloading)
• Lazy-load confetti.js on first use
• Evaluate smaller QR code library alternative

Phase 3: Network Latency Improvements

• Self-host Google Fonts with font-display: swap
• Bundle confetti.js locally
• Progressive WebSocket: Show UI first, connect in background
• Connection state feedback for perceived latency

Phase 4: Runtime Performance

• Verify 60fps during animations on low-end devices
• Memory usage: <5MB heap growth per round
• Animation queue effectiveness under stress

Target Metrics

Metric	Current	Target	Improvement
FCP	~2.5s	<1.5s	-40%
LCP	~3.5s	<2.5s	-29%
TTI	~5.0s	<3.5s	-30%

Test Devices

• Low-end: Moto G9 Plus (4GB RAM, SD662)
• Mid-range: iPhone 12, Samsung Galaxy A53
• High-end: iPhone 15 Pro, Samsung Galaxy S24

Test Scenarios

1. Cold start (first visit, no cache)
2. Warm start (service worker active)
3. Join game flow (3 rounds)
4. Heavy lobby (20 players)
5. Animation stress test

---

Generated from Agentforce Task 003