4 ms·

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

3 points by pierrefar 17y ago

Hi, Is there a way to automatically generate waterfall type images for web page loading? An example is this one from Google Page Speed: http://code.google.com/speed/page-speed/images/activity2.png If you know of a way to generate automatically this kind of stats but not this exact type of visualization, I'm also interested. 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. Thanks!

jaddison 17y ago
Clickable link: http://code.google.com/speed/page-speed/images/activity2.png http://code.google.com/speed/page-speed/images/activity2.png
jacquesm 17y ago
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 17y ago
  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 17y ago
    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/ http://webpagetest.org/ I like their display a lot better than the google one.
    - pierrefar 17y ago
      I noticed that wget doesn't do ms resolution. Might have to script it after all. Thanks for your help!
      - jacquesm 17y ago
        You're welcome, if you need a hand or get stuck let me know, email is in the sig.
thwarted 17y ago
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/ 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.

3 points by pierrefar 17y ago

jaddison 17y ago

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

jacquesm 17y ago

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 17y ago
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 17y ago
  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/ http://webpagetest.org/ I like their display a lot better than the google one.
  - pierrefar 17y ago
    I noticed that wget doesn't do ms resolution. Might have to script it after all. Thanks for your help!
    - jacquesm 17y ago
      You're welcome, if you need a hand or get stuck let me know, email is in the sig.

thwarted 17y ago

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