High Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps

Book Preface

The first question you ask yourself before getting this book into your hands is: why are we talking about performance on the mobile web as a topic? isn’t the mobile web the same web as the one we already know?

The answer is not so simple. Yes, it’s the same web; but it’s being accessed from a very different context, including browsers, devices, screens and networks. Those differences have a big role in performance -or in the lack of it- and that’s why we need to pay special attention to the web on mobile devices.

Fortunately, following the idea originally stated by Luke Wroblewski of Mobile First, if you first apply performance techniques for mobile devices, your website will also perform well and faster on other kind of devices including desktop browsers and TVs.

Mobile Performance First

If you have a multi-device web solution, starting to optimize the performance of the mobile web will also help other devices, such as
desktop browsers. While most techniques over this book can be applied on both classic and mobile web, some of them are specific to mobile device’s problems and therefore easier if we start with them. Don’t get me wrong, I’m not pushing the idea of having a separate web. At the end, we are still talking about the same content and the same services but from a different devices. In this chapter we’ll cover the differences from the desktop web, which we will call from now on the classic web, that is the web from the main browsers on typically desktop-based OSs, such as Windows, Mac OS X or Linux.

Therefore we’ll define the Mobile Web, as web content being accessed from a feature phone, smart phone, tablet or wearable device. I know there are some hybrid devices that can fit into the classic web definition, but I think we all know where the line is. Before getting into the performance side of the mobile web, we need to approach some definitions and clarifications in relation with the differences between classic web platforms -such as on desktop- and web platforms running on mobile devices.

Form factors
Several form factors are available on the market, but if we focus just on mobile devices with web platforms we can divide them into:
• TV-based devices, including: Smart TVs, Game consoles (such as Xbox or Play‐ Station) and Set top boxes (such as Chromecast, Amazon Fire TV or Roku Player)
• Desktop devices, including laptops using OSs such as Windows, Mac OS X, Linux or Chrome OS
• Tablets
• Phablets, phones with screens bigger than 5.5”
• Smartphones, phones using a big OS such as Android, iOS, Windows or BlackBerry
• Social devices, cheap phones with web access using operating systems as Firefox OS, Nokia Asha or feature phones
• Smartwatches

In this book we’ll focus on smartphones, phablets, social phones and tablets but some techniques and tools might be useful also for other form factors.

Mobile Hardware

In the future it might be a point when mobile devices will be more powerful than desktop and laptops (mostly because the technology is going in that direction), but we are not there yet. Mobile devices have less RAM available and less powerful CPUs.
I know you might think this is not true, in an age of quad-core mobile devices but the reality is that the average mobile device out there is not the most expensive device.
If you are reading this book, you probably don’t have an average phone in terms of hardware and network access. When thinking about performance, always think about average users and test on those devices.
There are dozens of differences between mobile devices and classic desktop devices, such as screen resolutions, screen densities and hardware sensors but the ones that might affect web content’s performance are:

CPU, where the parsing, rendering and execution happens
• Memory, where the DOM tree, image buffers and decompression data are stored
• GPU, where -when available- some rendering happens (usually known as hardware accelerated)
• GPU memory, where -when GPU available, some image buffers and layers are stored
We can roughly say that in terms of CPU, average mobile devices are 5 times slower than an average desktop device acquired at the same time. In terms of RAM memory, the difference is around 3 times smaller.