

Ask HN: Creating web page load "waterfall" images automatically - pierrefar

Hi,<p>Is there a way to automatically generate waterfall type images for web page loading? An example is this one from Google Page Speed:<p>http://code.google.com/speed/page-speed/images/activity2.png<p>If you know of a way to generate automatically this kind of stats but not this exact type of visualization, I'm also interested.<p>By "automatically" I mean running scripts/programs on a server that retrieve a URL specified via some control mechanism. If it's all command line, even better.<p>Thanks!
======
jacquesm
That's two problems in one, I think you want a script that logs the exact load
times of a bunch of files, then a secondary stage to convert that data in to a
graph.

For the first bit you'll need a script that loads a url and all it's
dependencies, starts a fairly precise timer at the moment the connection to
the server is initiated for each of the elements, uses persistent connections
if possible and logs a secondary marker whenever an item has completely loaded
and how many bytes got transferred.

So, this then outputs a series of data items, four fields per item:

resource, start time, end time, amount transferred

You then sort that by start time and generate a graph.

Are you a programmer ?

~~~
pierrefar
Thanks. Yes I'm a programmer, and yes I agree with your breakdown.

I'm looking at various scripting options like using a headless Firefox, wget,
and the like. Nothing seems straightforward and so I asked to see if anyone
knows of a solution that does everything.

~~~
jacquesm
I wouldn't bother making it that complicated, just write a script that makes
socket connections to the servers.

Keep it simple! (and reliable, headless firefox, and wget would carry a lot of
overhead and when you're benchmarking something at the millisecond level that
overhead can get in the way quickly).

I posted this site the other day:

<http://webpagetest.org/>

I like their display a lot better than the google one.

~~~
pierrefar
I noticed that wget doesn't do ms resolution. Might have to script it after
all.

Thanks for your help!

~~~
jacquesm
You're welcome, if you need a hand or get stuck let me know, email is in the
sig.

------
thwarted
I was going to implement something like this a few years ago, then Firebug got
its network stats page, and safari/chrome/webkit have it too. I was using
bootchart ( <http://www.bootchart.org/> ) for inspiration, but found out _I_
didn't actually need an image of the loading once I could get what I needed
from the browser's developer extensions, and I never ended up scratching that
itch.

------
jaddison
Clickable link: <http://code.google.com/speed/page-speed/images/activity2.png>

