The Mobile Performance Problem

Mobile devices continue to improve, but they remain significantly less powerful than desktop machines. Loading network resources takes longer, unpacking images takes longer, painting the page takes longer, and executing scripts takes longer. A reasonable assumption is that your page runs 5 to 10 times slower on a mobile device.

Battery life is another concern. Sub-optimal sites drain batteries faster than necessary. Fetching a resource powers on the WiFi or cell radio; painting an element spikes CPU and GPU usage. Both activities consume battery power. Minimizing network traffic and reducing paints directly reduces battery drain.

Performance also drives engagement. Facebook reported that in an A/B test, slowing scrolling from 60fps down to 30fps collapsed engagement. Mobile users expect to get in and out quickly, and the fastest site will get the most engagement.

Remote Debugging Setup

Chrome DevTools for Android provides the same functionality as the desktop version. The Android device is only responsible for the page, while the desktop runs DevTools. Under the hood, the same data is collected and the same features are available. Your existing desktop workflow carries over directly.

To get started with remote debugging:

  1. Install the Android SDK. It includes adb (Android Debug Bridge), which Chrome uses to communicate with your device.
  2. Enable USB debugging on your device in Android Settings.
  3. Connect your device to your desktop via USB. You may see a prompt asking to allow USB debugging from your computer; if you debug frequently, check "Always allow from this computer."
  4. Verify the connection by running adb devices in your command prompt. Your device should appear in the list.
  5. In Chrome on your device, open Settings > Advanced > DevTools and enable Enable USB Web debugging.
  6. Run adb forward tcp:9222 localabstract:ChromeDevTools to create a bridge between your desktop and the device via adb.
  7. Open Chrome on your desktop and navigate to http://localhost:9222. You should see a list of inspectable pages from your device.

Inspecting Elements and Network Traffic

With a page open on your Android device, pick it from the list of inspectable pages in http://localhost:9222. The familiar DevTools toolbar appears on your desktop. Hovering over a div in the Elements tool highlights the element visually on your Android device, just as it does on a desktop page. You can also toggle styles on and off to experiment with page appearance.

The Network tool lets you record network activity and examine the requests your site makes. Look for ways to minimize requests. If your site polls the server, avoid polling when the user is idle. The tool also shows raw HTTP headers, which is useful if mobile networks alter them.

Measuring and Reducing Paint Times

Painting is often the biggest bottleneck in mobile browsers. When one element is expensive to paint, it slows down painting of the whole page. Chrome caches previously painted elements in an offscreen buffer, but mobile devices have limited GPU RAM, so fewer elements can be cached. The result is more paints, and each paint is slower than on desktop. Responsive scrolling requires minimizing paint times.

Chrome 25 includes continuous page repaint mode, which never caches painted elements and instead paints all elements each frame. This mode enables A/B testing of paint times by toggling elements and styles on and off. The process is manual but invaluable for finding expensive elements.

When you enable continuous page repaint mode, a graph appears in the upper right corner of your Android device. The x-axis is time, divided into frames; the y-axis measures paint time in milliseconds. The display also shows minimum and maximum paint times along with GPU memory usage. In one example, a page took 14 milliseconds to paint. Setting the style on a selected element to display: none dropped paint times to around 4 milliseconds per frame, revealing that the element cost approximately 10 milliseconds per frame.

By toggling elements and styles on and off, you can isolate the expensive parts of your page. Faster paint times means less jank, longer battery life, and more engagement.

Advanced Tracing

Advanced developer features available in desktop Chrome are also available in Android Chrome, including about:gpu-internals, about:appcache-internals, and about:net-internals. For deeper investigations, you can capture about:tracing data from Android Chrome:

  1. Download adb_trace.py from GitHub.
  2. Run adb_trace.py from the command line.
  3. Use Chrome on Android.
  4. Press enter on the command line to stop the script.

The script produces a JSON file that you can load in desktop Chrome's about:tracing tool.

Mobile users are often in a hurry and need quick access to information. Your page must load quickly and perform well on mobile, or engagement will drop. Facebook isn't invincible to performance problems, and your site isn't either. Performant sites get more user engagement.