Before you can optimize the speed of your web pages you must determine how fast they load in their current state. The means by which you do so depends on the way in which your website is deployed. If your site is not yet hosted on a server, you are limited to using offline tools. By their very nature, these tools tend to provide rather rough estimates of download speed, but they are better than nothing.

You can gain a quick estimate of how long a page will take to load by looking at its total size:

• With the Web Developer Toolbar in Firefox: use Information / Show Document Size from the toolbar. The total size shown – images, styles, JavaScript files – is the complete size of the page. You want this number to be as low as possible: under 100K, if possible.
• In DreamWeaver: switch to Design Mode for the page and look in the bottom right hand corner of the window. DreamWeaver will provide the total size of the page and an estimated download time (over DSL, by default: this can be changed in the application’s Preferences panel). Again, you are looking for a page size under 100K, and a load time of less than five seconds; ideally, less than two seconds.

There is a major drawback with this technique: both tools add together all the content on the page and express it as the total file size. That is, they present the speed of the page in terms of downloading every last byte of code and content. In reality, you can hide a great deal from the browser using CSS, PHP or JavaScript, and stream it as the page loads: for example, showing one central portfolio image and hiding the others, which may be equally large, until the visitor clicks on a link. The hidden images will have the opportunity to load “behind the scenes” while the user chooses their next action… but neither DreamWeaver or the Web Developer toolbar recognize this technique, especially when CSS is used.

Under those conditions, creating an accurate estimate means falling back to adding up the file size of the visible content yourself. An easy way to do this in Firefox is to hit CMD/CTRL + I for information about the page: on the screen that appears, the General “size” refers to the file size of the code and text of the page, whereas the elements listed under “Media” are the size of the images and other content.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.