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
- 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
- Avoid unnecessary image resizing. Serving multiple devices is a challenge.
- 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.