Mobile Web Apps Are Slow

Drew Crawford recently published an extensive piece analyzing the performance of web apps on mobile platforms. It’s really worth the read if you’re considering building a mobile web app as it includes plenty of supporting data that may help to guide future projects.

In the article Drew concludes that mobile platforms are far behind the desktop in terms of CPU performance and available memory, which results in suboptimal performance. Drew’s results match my own findings from an enterprise app that I recently built. Our team established cross-platform compatibility as a design goal at the onset of the project and we built a prototype application using jQuery Mobile, Knockout.js, and PhoneGap. Our prototype application had a few simple views and performed well on multiple platforms so we continued to use these tools as we began development.

Development progressed quickly and we were able to rapidly iterate the app and build in new functionality. However, as we neared the launch date the app had grown into several different data views including composite displays with multiple data sets. This doesn’t sound like a lot but we began to run into significant performance issues. The user interface began to lag noticeably and it really degraded the user experience in the app.

Upon further analysis, I found that our app was limited by the amount of memory rather than being CPU bound. As a web app, each element within a view was loaded into the DOM within a browser instance. Because jQuery Mobile uses a single page view model, this meant that all displays within our app were being loaded at once and the app began paging out of memory. As the user interacted with the app more data was loaded into the DOM and the responsiveness continued to degrade.

In order to address this issue we implemented several modifications designed to reduce the memory footprint:

Replace built-in jQuery Mobile UI elements with custom css:
jQuery Mobile’s UI framework inserts a bunch of additional elements into the browser DOM. For example, a simple unordered HTML list item will get converted into several div elements with custom CSS. This looks great but really adds to the apps’ memory footprint.

To remedy this I built several custom CSS classes that mimicked the jQuery Mobile elements visually but eliminated the addition of extra DOM elements from the display.

Implement lazy data loading:
Each view in our app contained a default data set to be displayed. However, for any given session within the app the user may only use a couple of views. In order to save memory, I implemented a lazy data scheme that would only populate a view when the user had actually selected the appropriate tab.

Remove view transitions:
Initially, we used jQuery mobile’s screen transitions when users moved from one screen to another. When we ran into performance problems we decided to remove these since they never looked “native” to begin with and really started to appear to lag as the application grew.

With these and other performance tweaks implemented, the app’s performance moved back into an acceptable range. However, in subsequent apps that we’ve built for the same client we moved back to native UIs to avoid these performance problems.

I think a mobile web app can be made to perform within an acceptable range for simple applications that don’t involve complex data displays or UIs. Anything more complex should really be built using native application tools in order to provide the best user experience and to give designers and developers maximum flexibility to implement innovative mobile apps.