It all started when my friend Salim—did I mention he's a fellow developer? Because he certainly won't let me forget it—visited my portfolio on his older Android phone. And he was right.
The Problem
My portfolio looked gorgeous on modern devices with its WebGL galaxy background, particle effects, and smooth animations. But on older phones? It was a slideshow. The frame rate would drop to 15–20 FPS, making the entire experience feel janky and unresponsive.
The Solution: Dynamic Performance Monitoring
Instead of creating a dumbed-down mobile version, I built a performance monitoring service that adapts in real time. Here's how it works:
- Initial device detection. On load, the service checks hardware capabilities, including CPU cores, available memory, GPU tier, and battery level. It also respects user preferences such as reduced motion.
- Real-time FPS monitoring. The service monitors frame rates with
requestAnimationFrameand maintains a rolling five-second average. If performance drops below its thresholds, quality is adjusted automatically. - Dynamic quality adjustment. The system can change galaxy density, effect particle counts, animation complexity, glow intensity, and WebGL shader calculations.
Secret Developer Tools
For testing and debugging, I built a hidden performance overlay that was only accessible through the browser console. It displayed real-time metrics and allowed manual control over performance levels.
Developers could use commands such as:
perf.show()to reveal the performance monitorperf.setLevel('low')to force a performance tierperf.help()to list the available commands
This approach kept the UI clean for regular visitors while giving developers useful debugging controls. The overlay showed current FPS, performance level, memory usage, and battery status—everything needed to diagnose issues across different devices.
Even Salim was impressed.