Calculating Real World Page Load Times

As you run through the site-speed optimization process, it is nice to keep track of the progress that you have been making. It's actually not that difficult to track the load time for all your visitors.

The system works like this - in the head section of your documents, include a small javascript snippet that sets a variable to the current time. When your page is completely loaded, grab the current time again. The difference between the two numbers is your page load time. At this point, you can send a request to your server that includes the information.

In your head section:

Sample Code

 1<br />
 2<script type="text/javascript">var start = (new Date()).getTime();</script><br />

Code ©SteveKallestad.com

If you have an init routine already in place that happens on page load, you ideally want to put your end time variable at the end of that. If you aren't currently referencing any stylesheets, you can put it just prior to your closing body tag:

Sample Code

 1<br />
 2<script type="text/javascript"><br />
 3 var end = (new Date()).getTime();<br />
 4 var total = (start - end)/ 1000;<br />
 5 (new Image()).src = '/clear.gif?p=' + self.location + '&t=' + encodeURIComponent(total);<br />
 6</script><br />

Code ©SteveKallestad.com

Simply ensure that clear.gif is a 1x1 pixel image and that it won't get cached. You can then parse your web server logs to gain an understanding of your load times. Alternatively, you could use a php or perl script to insert the page and time information directly into a database so you can immediately start trending.

You can take this concept further by inserting other timestamp references appropriately in your document to track things like "time to display information", etc. Further, if you have other javacript elements that you have happening, you may want to check those tasks for completion before setting your end time calculation. You can also check for cookies to see if the visitor is a first time visitor or a repeat visitor. As an alternative to pulling a new image down, you could use an xmlhttp request to post the information to a web service you set up to handle these requests.