#3 The Performance Device Gap

As content consumption on the web is shifting from desktop to mobile, we’ll need to be aware of significant differences between those mobile devices. 

Typically, we assume that our web app roughly behaves the same way on different devices. But sadly, this is not true. And it’s not just about the browser or some ancient OS versions. It’s about the device itself. 

Vendors push low end devices on the market, designed to be affordable to a wide range of consumers. For developers like us, this means that processor power and therefore performance of our websites is varying a lot. 

Why does this matter? As the JavaScript we need to add interactivity to our website is mainly executed in a single thread (except for web workers and service workers) which is consuming CPU power. This thread is called the main thread and runs on a single core. The main thread is the thread from which all other threads will be spawned and workload will be distributed to other cores.

The problem is that the browser's renderer process is also run in the main thread. The main thread of the renderer process handles the code needed to render the page. It parses the HTML and assembles the DOM and it parses and applies the CSS to the DOM, and finally it parses, evaluates and executes the JavaScript. 

In conclusion, any time the main thread is busy doing something, the web site may not respond to interactions, which is finally delivering a bad user experience.

So, the main metric we have to look at is single core performance. This characteristic varies a lot between devices. There is a huge gap between the higher end and the lower end in the market.

Addy Osmani put together a chart which illustrates how bad that gap actually is.

What can we do to improve the situation for lower end mobile devices? We should carefully monitor the performance of our site and try to bring down the load of the main thread where ever possible. Besides compressing the assets served there are several strategies which can help out with this problem: 

• https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting
• https://developers.google.com/web/tools/chrome-devtools/coverage
• https://web.dev/apply-instant-loading-with-prpl/

Tomorrow follows: #4 Web Performance Basics.