Like most people involved in web performance I spend hours looking at page load waterfalls, each one tells it's own story and the patterns hint at where the issues are.
With tools like Mobitest, WebPageTest, remote debugging in Chrome and Safari I can get a good level of detail for modern mobile browsers but I often want to test on older devices where the dev tools support isn't as good or more commonly non-existent.
A proxy like Charles is one way of generating HARs from old devices but using a proxy can alter the waterfall so I prefer to generate waterwalls from a TCP packet capture.
There are a couple of ways to generate the waterfall but first we need to capture the traffic.
Capturing the traffic
I'm on OSX but you should be able to achieve a similar setup on other platforms. I've also been playing with a travel router running OpenWRT, as I want to see if I can get traffic shaping working on it.
- Connect to a wired network
I'm going to use the OSX to share the wired network via wireless so first we need an actual physical network connection.
- Create an adhoc wireless network
Click on the WiFi icon in the OSX menu bar and choose "Create Network"
In this example I've not secured the network but you may want to.
- Share the connection
Pick Sharing in System Preferences and share the internet over WiFi.
- Connect to mobile device the adhoc network
On the mobile device connect to the adhoc WiFi network you created above.
- Capture the traffic
From a terminal window, start the packet capture: