Optimizing your mobile Web app

I frequently meet with mobile app developers using WebView who are looking for guidance on performance optimization. Besides going native, which typically provides the very best user experience, here is an assortment of tips and tools you can use to build better mobile Web pages. These are very rough notes from recent meetings with third party developers and folks on the Chrome and Android teams; nevertheless, I hope there are some helpful nuggets here.

Because most Web developer tooling is for mobile browsers, not WebView per se, the best approach is to optimize your Web site running in Android Browser or Chrome for Android. Most improvements you make should carry over to WebView  as it’s also WebKit-based.

Debugging

• Chrome Remote Debugging with Chrome for Android
• WEb INspector REmote targeting the Android Browser. This 3rd party tool works with WebKit-based browsers and has an elements panel and console similar to Chrome Developer Tools.

Profiling

Chrome Developer Tools has several features which can be used to measure performance.

• Inspect Element -> Timelines -> Frames -> Record to see how long it takes to construct and render a frame. To avoid dropping frames, keep your render time under 30ms.
• Hit h on any DOM element to hide it so doesn’t contribute to layout
• Uncheck any CSS styles to see which ones are expensive (like border-radius + box-shadow)
• Use timeline to see where slowness is occurring; i.e., don’t jump straight into JS performance as it might be paint time, layout, etc.
• Inspect Element -> Settings (bottom right corner)
  • Can show frame rates and memory usage in real time. Good for seeing how much certain effects cost on your rendering and how the cost of multiple effects multiplies up.
  • Show FPS frames per second on pages with animation / loops
  • Show paint rectangles to see if you are doing large repaints when not necessary
  • Continuous page refresh setting available to help profile (available in Chrome dev channel)
• http://dev.chromium.org/developers/how-tos/trace-event-profiling-tool
• Web Tracing Framework
  • slide deck
  • https://github.com/google/tracing-framework
  • works on WebView
• PageSpeed Insights extension
• http://jankfree.com

Performance tips

• Be careful about requesting info from the DOM like element heights. Bundle these up as much as possible as they require separate calculation.
• http://kellegous.com/j/2013/01/26/layout-performance/
• https://gist.github.com/desandro/4657744
• Google I/O 2012 Chome Sessions
  • Building Performant Web Apps
  • Building High Performance Mobile Web Apps
• https://developers.google.com/speed/docs/best-practices/rules_intro
• http://www.html5rocks.com/en/mobile/optimization-and-performance/
• http://www.html5rocks.com/en/tutorials/speed/scrolling/

Android

• Chrome for Android Tracing explains the mobile tracing tool and how to understand the tracing results. See how much time spent in V8 to represent JS processing, layouts, etc.
  • Avoid unnecessary image resizing. Serving multiple devices is a challenge.
    • Image decode, resize ~50 ms each on Galaxy Nexus
  • Chrome for Android & Android Browser with fixed viewport doesn’t need fastclick
  • Swiping between pages: ViewPager + multiple WebViews faster than CSS
• Hardware accelerated transitions
  • Many devs report issues with views flickering when HW acceleration turned on.  Workaround is to have ‘next’ view peek in 1px so that it renders earlier so doesn’t flash
  • Many devs report inconsistent glitches with acceleration turned on (especially when using JS scrolling vs. native)
• ViewPager
  • Issues with bezel swipe… HW accelerated swipe doesn’t complete (bounces) because first WebView has to render before the next View will handle the swipe event (because the JS is busy doing something else). Only an issue when swiping from the edge.
• WebView JS interface
  • Single thread used for all JS can be a bottleneck.; e.g., have three WebViews in a ViewPager, each trying to do DOM manipulation. This can cause slowdowns.
• WebView performance talk from I/O ‘12
• Best Practices for Web Apps from developer.android.com (see especially links at end)
• Hybrid approach popular: download content outside the WebView and inject it in, mainly for offline support

If you know of any additional resources that have been helpful to you, please feel free to add them in the comments.

Enable multi-user support in the Android emulator

Android 4.2 (API 17) offers multi-user support for tablet sharing. To add a user on a physical tablet running 4.2 or later, go to Settings | Users. You can also do this in an emulator, but you first have to set an emulator property as follows:

1. Create a new AVD based on a tablet (say, the Nexus 7 device definition in the latest ADT) with API 17.
2. Start the emulator
3. Run these adb commands:

> adb shell setprop fw.max_users 4
> adb shell stop
> adb shell start

You can now add a user in the emulator. To see the new user bubble on the lock screen, press F7. You may have to press it twice for the slide lock to become active.