Adapt to Device and Network Capabilities
SHOULD: Branch on `navigator.deviceMemory`, `navigator.hardwareConcurrency` and `navigator.connection.effectiveType`/`.saveData` to drop blurs, autoplay and heavy assets on weak devices. Treat them as hints: always ship a working default when undefined, and never fingerprint with them.
Detect the device's hardware and network at runtime and serve a lighter experience when it is constrained
const lite = navigator.connection?.saveData || (navigator.deviceMemory ?? 8) < 4;Bad
Good
Why it matters
The browser will tell you what it can afford: navigator.deviceMemory (GB of RAM), navigator.hardwareConcurrency (CPU cores), and navigator.connection.effectiveType / .saveData (measured connection quality and the user's explicit data-saver preference). Branch on them — drop animated blurs and backdrop filters, skip autoplaying video, serve smaller images, render fewer particles — so a 2-core phone on 3G gets a version it can actually run at 60fps instead of a desktop hero that melts it.
This is runtime adaptation, not a testing checklist: treat the signals as hints, always ship a working default when they are undefined, and never use them to fingerprint.