How to get device memory using JavaScript?

By Gulshan Saini
Published in JavaScript
May 27, 2020
1 min read

Internet consumption from developing countries has already surpassed developed countries. However, this brings a challenge for web developers. We have developed the content targetting the high-end devices(or maybe, we haven’t thought about targetting at all). Serving the same content on low-end devices brings the following challenges

  • The page might take more than 30 seconds to load - ideally, the page should be ready under 3 seconds
  • Browser tab hangs and user close the window in frustration
  • The page might become unresponsive

Considering, all the above scenarios, it makes sense to load only critical features or components to give a smooth web experience. It would be great if we know the user’s device memory and load the lite version of our application.

So, how do we achieve this?

navigator.deviceMemory returns the approximate amount of device memory in gigabytes. The upper bound value returned by navigator.deviceMemory is 8GiB and the lower bound is 0.25GiB.

Below, is the formula that is used for calculation (source: MDN)

This value is an approximation given by rounding down to the nearest power of 2 and dividing that number by 1024.

This means you won’t get the exact details of device memory to protect user privacy however you will get nearby values to serve optimized content.

The following table illustrates some examples: (source: w3c)

navigator.deviceMemory examples
navigator.deviceMemory examples

A full list of possible values is as follows: 0.25, 0.5, 1, 2, 4, 8

After, detecting the deviceMemory we can load the components dynamically or even load lite version of the application as follows

 * 1. detect deviceMemory
 * 2. identify version to load
 * 3. load the correct version of component
const deviceMemory = navigator.deviceMemory
const componentVersion = deviceMemory > 1 ? 'full' : 'lite'
const component = await import(`path/to/component.${componentVersion}.js`)

Browser support

deviceMemory is an experimental feature and should be used with caution in production. Below is a screenshot from caniuse showing the browser support as of May 2020.

navigator.deviceMemory browser support
navigator.deviceMemory browser support

To be on the safe side, you can even use browser feature detection logic as follows

// default componentVersion to full
let componentVersion = 'full'

// check if deviceMemory property exist in navigator object
if ('deviceMemory' in navigator) {
  const deviceMemory = navigator.deviceMemory
  componentVersion = deviceMemory > 1 ? 'full' : 'lite'

// render right component
const component = await import(`path/to/component.${componentVersion}.js`)


Previous Article
How to get last modified date of a file using Node.js?

Related Posts

How to check if a string contains a substring in JavaScript?
January 05, 2021
1 min
Gulshan Saini

Gulshan Saini

Fullstack Developer



Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media