How to measure the webpage loading time on mobile device?

android, google-chrome

Solution

There's a thing called "Navigation Timing API" which is available on Chrome for Android (and Desktop Chrome, Internet Explorer and Firefox).

Hook up your Android device to your computer and enable "remote debugging mode" by following instructions described in this document.

Open Chrome on your computer and access localhost:9222 to access Chrome for Android's DevTools.

In Console, type following.

> performance.timing

You'll find something look like this (collapse if folded)

connectEnd: 1364275296017
connectStart: 1364275296017
domComplete: 1364275296699
domContentLoadedEventEnd: 1364275296517
domContentLoadedEventStart: 1364275296458
domInteractive: 1364275296458
domLoading: 1364275296304
domainLookupEnd: 1364275296017
domainLookupStart: 1364275296017
fetchStart: 1364275296017
loadEventEnd: 1364275296705
loadEventStart: 1364275296700
navigationStart: 1364275295553
redirectEnd: 1364275296017
redirectStart: 1364275295553
requestStart: 1364275296025
responseEnd: 1364275296273
responseStart: 1364275296264
secureConnectionStart: 0
unloadEventEnd: 1364275296275
unloadEventStart: 1364275296275

You can find more details about Navigation Timing API on HTML5Rocks' article "Measuring Page Load Speed with Navigation Timing".

Problem

I would like to programatically determine the time it takes for a page to load similar to how some extensions (e.g. Speed Tracer) do it. For instance I would like to know when certain key events are triggered such as network connections, DOM Load events and SSL network timings. Because extensions are not supported on Chrome for Android is there a way to do it in code?

Original source