Adaptive Loading: Optimize for Device & Network
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
Adaptive loading tailors the user experience based on real device capabilities and network conditions. Detect fast/slow networks, high/low-end devices, and save-data mode to deliver optimized images, code bundles, and features — ensuring great performance for everyone.
Fast customers (4G + high-end device) get the full tasting menu with premium ingredients. Slow customers (3G or low-end device) get a lighter but still delicious version. Customers who asked for “save data” mode get the efficient set menu. Everyone leaves satisfied.
1Network Information API
Use navigator.connection to detect effectiveType (4g/3g/2g), downlink speed, RTT, and saveData preference.
const connection = navigator.connection; console.log(connection.effectiveType); // '4g' console.log(connection.saveData); // true/false
2Device Capabilities Detection
Use navigator.deviceMemory and navigator.hardwareConcurrency to classify devices as high/mid/low-end and adjust features accordingly.
3Adaptive Image & Code Loading
Serve lower quality images or lighter bundles on slow networks/low-end devices. Use dynamic imports for heavy features.
4Save Data Mode & Best Practices
Respect navigator.connection.saveData. Progressively enhance from baseline experience. Always provide graceful degradation.
- ✓Detect network with navigator.connection.effectiveType
- ✓Respect saveData preference for reduced data usage
- ✓Classify devices using deviceMemory and hardwareConcurrency
- ✓Serve appropriate image quality and code bundles
- ✓Progressively enhance from a solid baseline experience
- ✓Adaptive loading improves inclusivity and Core Web Vitals
- ✓Always test on real devices and throttled networks