The Matthias Chronicles

Monday, September 8, 2008, 2:26 PM

Page Load Timer: A small, but useful JavaScript

by Mar Matthias Darin

Update: I'm introducing a new color into this blog, PURPLE so I can hilight a few changes to the script below that make it more optimized and faster. Thanks to Thlayli for the tweaks. The tweaks now cause the timer to update only when the page has finished loading. This makes the script faster and more accurate.

Everyone in the blog world is always looking for that edge or pizzazz that will separate them out from the masses or in some way give the visitor a little something to want to come back. These often range from the author's writing ability to fancy scripts that push the envelope in some way.

My blog is no different in that regard. My writing style, page layout and special features all play a role in the visitor's experience. Today, I'm going to give you some JavaScript that will tell your visitors how long it took to load your complete page.

Why would that be useful, one might ask? The answer to this really depends on your visitor. My experience has bee that my visitors like to have the page load fast. The faster the better. I get more comments on faster loading posts then the slower ones for example. There are some exceptions to that, but not many. A very good article (rare for me), or my EntreCard DropList are examples of my exceptions.

On the left side, above the fold (no scrolling when the page loads) is a little item that reads This page took seconds to load. This tells the visitor (you) how long this page took to load on your connection and is very easy to install; however; you do need to know a little HTML and how to modify your blog template or web page. From here on I will refer to either of the above as HTML page for simplicity.

Now for the code. Before the </head>, you'll need to copy and paste the following JavaScript code:

<script type="text/javascript">
<!--
var startTime=new Date();

function FixPrecision(num)
  {
    var stringNum = String(num);

    if (stringNum.indexOf('.')==-1)
      return stringNum+'.00';

    var newNum = stringNum.split('.');

    newNum[1]=(newNum[1].length>2)?newNum[1].subString(0,2):newNum[1];

    if (newNum[1].length==1)
      newNum[1]+="0"

    return newNum[0]+'.'+newNum[1];
  }

function StopTime()
  {
    var a=FixPrecision((new Date()-startTime)/1000);

    document.getElementById("endTime").innerHTML=a;
  }

window.onload = StopTime;

-->
</script>

This code handles the timer and outputting the seconds in hundredths of a second. Below is the code that actually displays the seconds the HTML page took to load and should be placed where you want the time to be seen on your HTML page:

<script type="text/javascript">
<!--
  document.write('This page took <span id="endTime">0.0</span> seconds to load.');
-->
</script>

Thats all of it. Now save your HTML page and upload it (if needed). If everything went well, you should see a timer on your site like I have. For best results, it should be above the fold. For a quick and easy reference, here is an example page.

Show off your page load time, leave me a comment with your URL. Also, if you would like to write an article for installing this script in a particular blog software (like WordPress or TypePad), feel free to let me know and I'll be glad to put it up as a guest post.

Comments from Mizé

Hi. Thanks for sharing this trick.

My blogs that have more widgets take more time to load, but I like to have them. I´m not sure how long they´re taking to load so this feature may help me find out.

I will try it. Cheers.

Comments from brillie

wow.. that was very useful article. Thank you matt..

Comments from Abhishek

Thanks for explaining the Code.

What i get "This page took 0.0 seconds to load." Seems i have a Great speed or your Blog loads very fast to count those Millisecond.

Regards

Comments from gre

used to be i use fasterfox for my own purpose. but this script then make the page actively give us the information.

thanks.

Comments from Mar Matthias Darin

To everyone that replied, You're welcome.

Abhishek: Look in the left panel before the fold. The green example doesn't show the time, its just for reference of what to look for on the left.