TL;DR attaining good performance is hard because there has been a drastic change on the dominant platform on which users access the web: the Mobile Web, and that change has been out of sync with the techniques and approaches we use to develop applications that run on that platform.
In the previous post, we discussed what is encompassed when we talk about mobile performance. In this post we discuss why is achieving good performance hard?
In a sense, the Mobile Era, took the underlying computing platform of the web “back in time” (sort of). Mobile devices are significantly more limited than their fellow desktops; or we can argue that today’s mobile devices are as powerful as desktops were several years ago. In a sense, we are trying to squeeze today’s software on yesterday’s computers.
The performance and functionality provided by mobile devices are not in sync with the need for resources of the applications that run on them; the access platform became more limited, but the approach used to develop applications to be run on such limited environments has not changed. One of the issues seems to be how to balance Developer eXperience (DX) and User eXperience (UX). Due to the limitations of mobile devices and the unrelenting demand of speed by users, the balance between these objectives should be drawn closer to the UX side of the picture, which means that websites and mobile web applications must be fast.
The challenges that make high performance hard to achieve on mobile devices and networks are two-fold: (1) Mobile-platform Specific; and (2) Website specific.
This Section captures the message in this Chrome Dev Summit talk in a nutshell; in that talk Alex Russell discusses the underlying reasons why mobile devices are challenging from three angles influencing performance: mobile-device CPU, memory and storage, and mobile networks. This article, referenced in the talk, is a useful read to gain more insights in this context.
Mobile device CPUs
CPUs on mobile devices are less powerful than desktop CPU; one of the main reasons for this difference is the constraints imposed by heat dissipation, which is an important factor playing a role in the way mobile devices are built. For example, mobile devices do have multiple cores, but the are not used as Symmetric Multiprocessing (SMP) machines; that is, they asymmetric with respect to their capabilities and use frequency: there are some infrequently used, “big” (high-power) cores, and some aggressively used, “little” (low power), cores. This construction in turn influences the way the software that runs on them operates.
The OS in mobile devices has what is called a Global Task Scheduler, which uses heuristics to control the way in which the asymmetric cores are used:
- Touch Boosting: the user touching of the screen signals the scheduler to power the big cores in anticipation of the starting an activity or some other kind of user-triggered task
- Application launching: the launching of an app signals the scheduler to power the big cores, bring up the app, and then send them back to sleep.
Things get tricky because the way in which mobile devices are designed does not correspond to the way the web works. A good “heuristic” in the web scenarios looks more like Link Clicking: when the user clicks on a link, wait until the associated resources are loaded from the network, and then let the user interacts with it. However, in a mobile device, if the big cores are started when the link is touched, the awakening on the big cores will be wasted while waiting for the data to arrive from the network.
Memory and Storage
Memory pressure and the need for smaller memory footprints on mobile devices do not allow for the trading of space for speed in the same way that can be done on desktops.
The physical limitations of mobile devices also influence the way Storage systems are designed and built. For example, due to space constraints, mobile flash storage is constructed using Multi-level Memory Cells (MLC) as opposed to Single-level Cells (SLC, which are faster, but also require more space and are more expensive.
There is a dichotomy between the web’s network infrastructure and the mobile infrastructure, which imposes a variety of challenges to mobile web app performance. A study by Radio Up reports: “[in mobile networks], last-mile delays add 400% to the total of Internet lag time. In other words, the mobile last mile is the major drag on for the mobile web”.
The web runs on top of TCP/IP protocol suite, which is essentially a control system with feedback loops optimized to operate under certain assumptions such as some level of stability on network conditions, and low error rates. Mobile (cellular) networks often violate such assumptions (i.e. high variability of RRR and error conditions). The result is often degraded performance, which implies that, as Ilya Grigorik points out, a 4G user is not actually a 4G user most of the time. The same type of network may mean different things for different user.
The bottom line is this: cellular networks impose a set of challenges on the performance of mobile web apps. This book is an excellent resource to gain more depth in the area of network (including mobile) performance
Website specific: Webpage bloating
The average size of content for a mobile website is 2.2MB; those who argue that there is a web obesity crisis have a point. This graph (from httparchive.org) shows the trend of the overall transfer size for the top sites in the web. And this graph following graph [httparchive.org] shows the trend of JS requests and transfer sizes for the top 1000 websites since 2011 till now. More details on the state of the art of page weight can be seen here. The reality is that page bloating contributes to loading delays with the consequent degradation of UX quality.
A variety of experimental evidence exists exposing the problem; for example, here are some stats from a Double Click study:
- The average mobile page makes 214 requests to servers
- Half of all server requests come from ad-related calls
- Average mobile page loading time is 19 seconds
- 77% of mobile sites take 10+ seconds to load
The takeaway from this post is this: the constraints of the mobile platform, and the prevalence of certain issues in the development of modern websites, are at the root of most of the performance problems being perceived by users. And the call for action is this: in order to make good, high-performant apps in today’s environment, a change is needed in our outlook, our tools, and our priorities. We (developers, platform, frameworks) must strive to develop lean websites.