Device Memory API

A device's capabilities depend on a few things, like the network, the CPU core count, and the amount of memory available. The Device Memory API provides insight into the memory available by providing the read-only property deviceMemory on the Navigator interface. The property returns an approximate amount of device memory in gigabytes as a floating point number.

The value returned is imprecise, protecting the user's privacy. It's calculated by rounding down to the nearest power of 2, then dividing that number by 1,024. The number is also clamped within an upper and lower bound. So you can expect the numbers: 0.25, 0.5, 1, 2, 4, and 8 (gigabytes).

The Device Memory API is only available on modern versions of Chrome and Edge.

Device Memory Example

import { useEffect, useState } from "react";

export default function DeviceMemory() {
  const [memory, setMemory] = useState(0);
  const [canAccessMemory, setCanAccessMemory] = useState(false);

  useEffect(() => {
    if ("deviceMemory" in navigator) {
      setMemory(navigator.deviceMemory as number);
      setCanAccessMemory(true);
    }
  });

  return (
    <>
      {canAccessMemory ? (
        <p>Your device has {memory} GiB of RAM!</p>
      ) : (
        <p>
          Your device doesn't support <code>navigator.deviceMemory</code>
        </p>
      )}
    </>
  );
}

Usage

The Device Memory API was not measured in 2021. In 2022, its first year of tracking, the API was used on 6.27% of desktop pages and 5.76% of mobile pages, making it the fifth most used capability on desktop and mobile.

For the release of Facebook's 2019 redesign, FB5, they actively integrated adaptive loading into this new version. They did this by adapting based on users' actual hardware, changing what loaded and what ran based on what users were using. For example, on the desktop, Facebook defined buckets of users based on CPU cores (navigator.hardwareConcurrency) and device memory (navigator.deviceMemory) available.

Check out this video from Chrome Dev Summit 2019, starting at 24:03, where Nate Schloss shares how Facebook handles adaptive loading using features such as the Device Memory API.