How do you do page performance tests?

Question

I know everyone who reads the question will think "Firebug!" right away. Maybe some will think "YSlow!" and "Google Page Speed!"

While I really like these tools, I'm more concerned with how the quickly the page will render in IE 6/7/8. All of the above tools require Firefox. That's all fine and you can definitely test the underlying speed of getting the page to the browser but what about when it comes to actually rendering the page?

I haven't seen any really good answers on how to test optimization at the browser level. How do you write performance tests for HTML/JS across difference browsers?

Answer 1

I am not sure it is a useful endeavor to optimize for only one vendor:

• regarding HTML, most browsers are written to optimize for standard layout techniques (tables, table-less, etc.)
• the rendering engines are quite different between IE6 and IE8, so already that is like two different browsers
• most of the techniques for optimizing are standard across browsers (put javascript at bottom so you don't block page loads, move javascript to external file, use multiple hostnames for images etc. to take advantage of parallel loading, don't use tables for overall layout, make sure caching headers are correct, etc.)
• once you have a site optimized for Firefox, I would argue there is little more to be gained as far as tweaking it for IE; there is probably more you can do at the application level at this point (optimize queries, etc.), unless your site is largely static content, in which case you can investigate caching, HTTP compression, etc.
• if your concern is actually in optimizing Javascript code for IE, then there are many good cross-browser Javascript libraries that are in an arms-race for best execution times across browser platforms, so again, picking a cross-browser solution is the way to go
• the browser landscape is constantly evolving, and your customers are likely to move on to another platform at some point down the road; optimizing for several different browsers now will end up with more compatible code that is more likely to perform well when a platform change is made at some point in the future
• I would argue that writing cross-browser optimized code will result in a more maintainable code base with fewer magic IE hacks, whose reason for existence will soon be lost in the mists of time

Answer 2

I don't pretend to know the absolute answer. But one method would be:

• use tools like wget to measure time in which a page is fetched
• use tools like firebug to measure overall speed
• difference gives you time taken by the browser

While this may not be a completely satisfactory answer, I will observe that this is the easiest.

By the way, what do you think are the performance aspects that you can highlight using a "browser level test" that you can't with a "firebug level test"?

Cheers,

jrh

Answer 3

Put a script block at the beginning of the document, at its end and set window.onload. Grab the current timestamp via Number(new Date) at each of these 'sequence points' and you can get a first impression of how long the page needs to render in a browser-agnostic way.

Answer 4

You can use the IE high performance tester.

Answer 5

You can get Firebug for IE (and Opera and Safari):

http://getfirebug.com/lite.html

Answer 6

I really like AOL's PageTest tool, it combines a lot of the utility found in Firebug, YSlow, and PageTest and wraps it up in a nice web interface with a few nice features. First, it can be run on IE7 or IE8 (no 6, sorry) from the US or international locations to give you a better idea of performance there. It provides waterfall charts like those in the Firebug net panel which are useful for determining where time is spent. It also provides recommendations for what to fix which are similar to those in YSlow. Finally, it allows you to run multiple trials on the same site so that you can get more accurate results while minimizing the external factors.

For the most part I would agree with OrbMan in that it is important to optimize for all browsers. Since those optimizations are cross-browser you will get the most bang for you buck in terms of performance. Only then is it time to start considering browser-specific improvements.

There are a bunch of Google Tech Talks online which talk about improving web performance. This blog post contains a list of the talks which are most relevant to this topic.

Answer 7

WebWait works in any browser.

It's yet another tool to have in your web performance utility belt.