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
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.
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)
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
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.
To be on the safe side, you can even use browser feature detection logic as follows