demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Site Speed Optimization: Estimating Page Load Time Offline

tools / compressors

Estimated reading time: 2 minutes, 6 seconds

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 , or , 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.