Javascript: Make Your Own Page Loading Testing Tool

Posted by | 12 comments
Page Loading Testing Tool
After a long time, I have come with any tool. This is because many of the tools are already flooded on everywhere on the internet. But this time, I have amazing tool to test your site loading speed on your blog. You don't have to go any other place to know in how much time your blog is fully loaded. Without losing a second I am going to give you the tutorial.

Features

  • This tool will tell you the page loading speed on your blog. You will not have to go anywhere.
  • Want Exact Time. Make sure you are using fast internet service and place the script on the top of blog.

Javascript

<script type="text/javascript">
//<![CDATA[
var startTime = new Date();
function currentTime() {
var a = Math.floor((new Date() - startTime) / 100) / 10;
if (a % 1 == 0) a += ".0";
document.getElementById("endTime").innerHTML = a;
}
window.onload = function() {
clearTimeout(loopTime);
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
document.write('This page took <span id="endTime">0.0</span> seconds to load.');
var loopTime = setInterval("currentTime()", 100);
//]]>
</script>

How To Add In Blogger.

1. Go to Blogger and click on your selected blog.
2. Now, Go to Page Layout.
3. Click on "Add Gadget" link.
4. Choose "HTML/Javascript"
5. Paste the above javascript.

Customizing

Definitely, you will not want to see a text without any decoration. So, here is the best customization from my side. And if you don't want the below look, change it.
<div style="background:#ffffff; padding: 5px; border:2px dashed #777777; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;">
<center>
<b>Page Loading</b>
</center>
<center>
<script type="text/javascript">
//<![CDATA[
var startTime = new Date();
function currentTime() {
var a = Math.floor((new Date() - startTime) / 100) / 10;
if (a % 1 == 0) a += ".0";
document.getElementById("endTime").innerHTML = a;
}
window.onload = function() {
clearTimeout(loopTime);
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
document.write('This page took <span id="endTime">0.0</span> seconds to load.');
var loopTime = setInterval("currentTime()", 100);
//]]>
</script>
</center>
</div>
Now, give it a extra feature. When a new visitor will come and see this. He will surely eager to see it in action again. So, giving a reload button below it will let them to reload your page from there. The new code will be..
<div style="background:#ffffff; padding: 5px; border:2px dashed #777777; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;">
<center>
<b>Page Loading</b>
</center>
<center>
<script type="text/javascript">
//<![CDATA[
var startTime = new Date();
function currentTime() {
var a = Math.floor((new Date() - startTime) / 100) / 10;
if (a % 1 == 0) a += ".0";
document.getElementById("endTime").innerHTML = a;
}
window.onload = function() {
clearTimeout(loopTime);
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
document.write('This page took <span id="endTime">0.0</span> seconds to load.');
var loopTime = setInterval("currentTime()", 100);
//]]>
</script>
<input classs=reload-button onclick="window.location.reload()" type="button" value="Test Again"/>
</center>
</div>
<style>
.reload-button {
    display: inline-block;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: rgb(83, 143, 190);
    padding: 3px 5px;
    font-size: 12px;
    border: 1px solid rgb(45, 104, 152);
    background-image: -moz-linear-gradient(center bottom , rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
    border-radius: 3px 3px 3px 3px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 6px 0px rgb(43, 99, 143), 0px 3px 15px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 0px 3px rgba(255, 255, 255, 0.5) inset;
    margin: 5px 0 10px;
}
.reload-button:hover {
    background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -webkit-gradient(
        linear,
    left bottom,
    left top,
    color-stop(0, rgb(79,142,191)),
    color-stop(1, rgb(102,166,214))
    );
   cursor:pointer;
}
.reload-button:active {
    box-shadow: 0px 2px 0px rgb(43, 99, 143), 0px 1px 6px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 0px 3px rgba(255, 255, 255, 0.5) inset;
    background-image: -moz-linear-gradient(center bottom , rgb(88, 154, 204) 0%, rgb(90, 150, 199) 100%);
    transform: translate(0px, 4px);
}
</style>
Here, I have finished the coding. Now you want to see it in action. Let's see the demo, Click here.

At Last Of Post

Now, the tutorial have finished go and try it on your blog. Make sure your blog start to appear in 2-3 seconds and completely loaded in less than 10 seconds. Taking too much time in loading site may loose your readers. Want any help, comment below. I will be there to help you. And most important, please share your thought with me.

12 comments:

  1. Nice tool it will help you to show off to your visitors that how much fast your blog is.

    ReplyDelete
    Replies
    1. Yes Deep and you can judge your blog loading speed on your blog.

      Thanks for commenting, expecting more comments in future. Happy Blogging!

      Delete
  2. very cool tool nice work keep it up bro

    ReplyDelete
    Replies
    1. Thanks Gulab for commenting, keep visiting. Cheers!

      Delete
  3. Nice and worth using widget for all bloggers to analyse their blog .....

    Keep it up Raj

    ReplyDelete
    Replies
    1. Thanks Ammar for commenting here, come again. Expecting more comments in future. Happy Blogging!

      Delete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. Its Really Good & Helpful Tool Thank you For Sharing

    ReplyDelete
    Replies
    1. Thanks for commenting bro, keep visiting. Happy Blogging!

      Delete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. Replies
    1. Thanks Shakil for stopping by, keep visiting.

      Delete

Alexa Rank!

Recent Comments

Contact Form

Name

Email *

Message *