Blogspot Tutorial: Page load timer script: show your page loading time

Steps to follow:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template
<head>

And immediately after it, paste this code:

<!-- page load timer -->
<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime();  //Get the start time
</script>

STEP #2

Now find (CTRL+F) this code in the template:

</body>

And immediately before it, paste this code:

<!-- page load timer start -->
<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 &quot;P&quot; element
document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;;
</script>
<!-- page load timer end -->

Now click Save Template

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<!-- Widget portion -->





<p id="loadtime">Write your custom message here</p>

Page load timer script: show your page loading time

5 comments: