Articles recently commented on:

1. The magic behind "Along for the Ride!"
2. Haiti aftermath: the consequences of stupidity
3. Stupid people in America
4. VCL: Herman Arms
5. The woes of advertising, part three
6. Traffic Shock: the good, the bad, and the ugly
7. Clean Traffic Exchanges

Rate My Blog

Excellent! Very Good Good Fair Poor

Follow Mar Matthias on Twitter

Follow Rev. Mother Theresa on Twitter

Website thumbnails generously provided by ShrinkTheWeb

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.

Top tags: page, load, newnum, script, blog, html, javascript, seconds, code, faster

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.

Comments from csh ^{76.102.154.152}

hmm, this seems to solve my experiment. thank you

Comments from Mar Matthias Darin

You're welcome.

PermaLink Home
Previous: Police State 2000: Total Enslavement
Next: In remembrance of September 11th, 2001

Related articles (based on tags) Along for The Ride! update Experimental blog advertising program, the return of the button! ObamaCare: Page 943, America's Affordable Health Choices Act of 2009 ObamaCare: Page 727, America's Affordable Health Choices Act of 2009 ObamaCare: Page 516, America's Affordable Health Choices Act of 2009 ObamaCare: Page 186, America's Affordable Health Choices Act of 2009 Along for the Ride! Update 4