Loading Time Script

This javascript shows the elapsed time in seconds which the browser took to load the page. Useful in determining which browser really loads the fastest or whether some visitors will leave because your paged loaded too slowly.

UPDATED Dec. 2007 - Simplified to avoid problems with the "onLoad" function for those who do not have access to the <BODY> tag.

Script is fully cross-browser compatible:

Demo:

The Code:

Step 1 of 3. Place this in the HEAD element of your page:

<HEAD>
<script type="text/javascript">
var d = new Date();
var starttime = d.getTime();  //Get the start time
</script>

Step 2 of 3. Copy this line to where ever you want the loading time to appear.

<p id="loadtime" >Loading...</p>

Step 3 of 3. Paste this code into your page, just before the closing BODY tag:

<script type="text/javascript">
 var d2 = new Date();
 var endtime = d2.getTime(); //Get the end time
  //Find the difference between the start and end times
 var totaltime = (endtime - starttime)/1000;
  //Round 2 decimal places
 var result = Math.round(totaltime*100)/100;
  //Output results to a "P" element
 document.getElementById("loadtime").innerHTML = "Loading time: "+ result +" sec(s)";
</script>
</BODY>

That's all there is to it. If you have any questions, feel free to email me at .


	Loading Time Script This javascript shows the elapsed time in seconds which the browser took to load the page. Useful in determining which browser really loads the fastest or whether some visitors will leave because your paged loaded too slowly. UPDATED Dec. 2007 - Simplified to avoid problems with the "onLoad" function for those who do not have access to the <BODY> tag. Script is fully cross-browser compatible: Demo: Loading... The Code: Step 1 of 3. Place this in the HEAD element of your page: <HEAD> <script type="text/javascript"> var d = new Date(); var starttime = d.getTime(); //Get the start time </script> Step 2 of 3. Copy this line to where ever you want the loading time to appear. <p id="loadtime" >Loading...</p> Step 3 of 3. Paste this code into your page, just before the closing BODY tag: <script type="text/javascript"> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a "P" element document.getElementById("loadtime").innerHTML = "Loading time: "+ result +" sec(s)"; </script> </BODY> That's all there is to it. If you have any questions, feel free to email me at .

Copyright (c) 2012 Steven Nichols \| Valid HTML \| Valid CSS