David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Sleepless Nights…

    February 2013
    S M T W T F S
  • Blog Stats

    • 1,029,897 hits

Archive for February 28th, 2013

Optimizing your mobile Web app

Posted by David Chandler on February 28, 2013

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.


  • 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.


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
  • PageSpeed Insights extension
  • http://jankfree.com

Performance tips


  • 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.

Posted in Android | 1 Comment »

%d bloggers like this: