v147 · Web APIs · demo

Adaptive Loading Demo

A practical tiered loading strategy using the updated navigator.deviceMemory values. Chrome 147's new 16 GB and 32 GB buckets enable a distinct high-end tier that wasn't possible before.

Simulate device memory:
— Select a memory value above
Low-end
navigator.deviceMemory ≤ 2 GB
  • ✓ Static images (JPEG, WebP)
  • ✓ CSS-only animations
  • ✗ Video autoplay
  • ✗ WebGL / WebGPU
  • ✗ Heavy JS bundles
  • ✗ Service Worker pre-cache
Mid-range
4–8 GB
  • ✓ Static images (AVIF)
  • ✓ CSS + JS animations
  • ✓ Video autoplay
  • ✓ WebGL (moderate)
  • ✗ Heavy JS bundles
  • ✗ Service Worker pre-cache
High-end
≥ 16 GB (new in Chrome 147)
  • ✓ Static images (AVIF)
  • ✓ CSS + JS animations
  • ✓ Video autoplay (4K)
  • ✓ WebGPU compute
  • ✓ Full JS bundle
  • ✓ Service Worker pre-cache
Old vs new value mapping
Pre-Chrome 147 possible values:0.25, 0.5, 1, 2, 4, 8 GB
Chrome 147+ · Android:2, 4, 8 GB
Chrome 147+ · Desktop / other:2, 4, 8, 16, 32 GB
Impact on low-tier check (≤ 2 GB):now catches all Android low-end correctly
High-end tier (≥ 16 GB):newly detectable in Chrome 147+
// Chrome 147+ — the high-end tier is now reachable
const mem = navigator.deviceMemory ?? 4; // default to mid if unavailable

let tier;
if      (mem >= 16) tier = 'high';  // NEW: possible in Chrome 147+
else if (mem >= 4)  tier = 'mid';
else                tier = 'low';

switch (tier) {
  case 'high':
    import('./high-fidelity-bundle.js');
    preloadInServiceWorker(FULL_ASSET_LIST);
    break;
  case 'mid':
    import('./standard-bundle.js');
    break;
  case 'low':
    loadMinimalCSS();
    break;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗