4 ms·

Ask YC: A way to measure page render time?

5 points by tim2 19y ago

How do you measure the affect of different layouts on browsers' progressive rendering of pages?

davidw 19y ago
http://developer.yahoo.com/yslow/ http://developer.yahoo.com/yslow/ ?
- tim2 19y ago
  Render time. (see above)
prakash 19y ago
YSlow is good for measuring page render time, using your computer and internet connection and provider meaning it might not mirror where your end-users are coming from geographically and from a network perspective. There are companies you can use to measure performance of a webpage from various geographies, networks, and internet connections available from pingdom, Keynote, Gomez and other companies
- tim2 19y ago
  Unless I'm missing something, yslow just measures download size and latency. I want to measure how well the browser progressively renders the page. For example if I made a layout with tables nested 50 deep, the browser would do worse at progressive rendering and have a higher render time than if I used just css. Likewise, I'm not talking about network latency, eg pingdom, keynote(?). Or compatibility, eg gomez.
  - bmatheny 19y ago
    Keynote DOES measure the time it takes for a page to be rendered using IE, Firefox, Safari and Opera.
    - tim2 19y ago
      I looked over those products and only see download time and latency, not render time. If you could provide a link to where this feature is listed, that'd be very helpful. What I'd really like though would just be some kind of browser performance profiler (not js profiling.)
ken 19y ago
I ran across this the other day: http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html http://weblogs.mozillazine.org/roc/archives/2005/05/renderin... If there was an easy way to run mozilla headless, e.g., "time moz-render-to-file <foo.html >foo.png", that would probably give you an idea (even better if moz could report timings itself). No idea how hard that would be to do, though.
- tim2 19y ago
  Probably the best solution I've seen yet, although that has some big limitations. What surprises me is that, in looking at all the browser rendering benchmarks online, everyone just seems to do it by hand! There must be some pragmatic way that the browser developers are benchmarking the browser speed.
pg 19y ago
Gmail does it apparently.
axod 19y ago
surely just put some js at the top of the html, to remember the current time, then set some js to be executed onload, and calc the difference? Or are you not allowed to edit the code? :/
krishna2 19y ago
One more thing to do would be to add a start_time via js on the top of the page. Then, another at the tail end of the page - then use a javascript function to calculate the difference. This will give you the time for the server (or your web app). [You can also do some code to your controller or view - however you have it to generalize for all pages]. Now, this time is not the same as the time that firefox takes to display the page. For this, you will have to use the start time on head and then use a js function that will be called on body onload. This can now take the difference and show you the browser rendering time alone. I have often seen that some pages get generated in the server in under half a second, but takes more than a few seconds for firefox to render. [For example, table with lots of rows, with lots of divs and esp. if there is any dynamic modification of nodes]. Another technique I use is to also display the times for both server/browser, only when I am logged in - and also use color codes to show the severity of the situation. [Like Green for under half a second, red for over a second..etc].
krishna2 19y ago
I just noticed one thing. I added a comment directly. And was hoping that mine would probably go to the end of the list. But my response got inserted between posts by prakash and pg. Curious to see where this comment ends up.

5 points by tim2 19y ago

How do you measure the affect of different layouts on browsers' progressive rendering of pages?

davidw 19y ago

http://developer.yahoo.com/yslow/ http://developer.yahoo.com/yslow/ ?

tim2 19y ago
Render time. (see above)

prakash 19y ago

YSlow is good for measuring page render time, using your computer and internet connection and provider meaning it might not mirror where your end-users are coming from geographically and from a network perspective. There are companies you can use to measure performance of a webpage from various geographies, networks, and internet connections available from pingdom, Keynote, Gomez and other companies

tim2 19y ago
Unless I'm missing something, yslow just measures download size and latency. I want to measure how well the browser progressively renders the page. For example if I made a layout with tables nested 50 deep, the browser would do worse at progressive rendering and have a higher render time than if I used just css. Likewise, I'm not talking about network latency, eg pingdom, keynote(?). Or compatibility, eg gomez.
- bmatheny 19y ago
  Keynote DOES measure the time it takes for a page to be rendered using IE, Firefox, Safari and Opera.
  - tim2 19y ago
    I looked over those products and only see download time and latency, not render time. If you could provide a link to where this feature is listed, that'd be very helpful. What I'd really like though would just be some kind of browser performance profiler (not js profiling.)

ken 19y ago

I ran across this the other day: http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html http://weblogs.mozillazine.org/roc/archives/2005/05/renderin... If there was an easy way to run mozilla headless, e.g., "time moz-render-to-file <foo.html >foo.png", that would probably give you an idea (even better if moz could report timings itself). No idea how hard that would be to do, though.

tim2 19y ago
Probably the best solution I've seen yet, although that has some big limitations. What surprises me is that, in looking at all the browser rendering benchmarks online, everyone just seems to do it by hand! There must be some pragmatic way that the browser developers are benchmarking the browser speed.

pg 19y ago

Gmail does it apparently.

axod 19y ago

surely just put some js at the top of the html, to remember the current time, then set some js to be executed onload, and calc the difference? Or are you not allowed to edit the code? :/

krishna2 19y ago

One more thing to do would be to add a start_time via js on the top of the page. Then, another at the tail end of the page - then use a javascript function to calculate the difference. This will give you the time for the server (or your web app). [You can also do some code to your controller or view - however you have it to generalize for all pages]. Now, this time is not the same as the time that firefox takes to display the page. For this, you will have to use the start time on head and then use a js function that will be called on body onload. This can now take the difference and show you the browser rendering time alone. I have often seen that some pages get generated in the server in under half a second, but takes more than a few seconds for firefox to render. [For example, table with lots of rows, with lots of divs and esp. if there is any dynamic modification of nodes]. Another technique I use is to also display the times for both server/browser, only when I am logged in - and also use color codes to show the severity of the situation. [Like Green for under half a second, red for over a second..etc].

krishna2 19y ago

I just noticed one thing. I added a comment directly. And was hoping that mine would probably go to the end of the list. But my response got inserted between posts by prakash and pg. Curious to see where this comment ends up.