Show Page Loading Time Using JavaScript

Introduction

In this article, I explain how to show page load time using JavaScript.

Use the following procedure.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Web Site...". A window is opened. In this window, click "Empty Web Site" under Visual C#.

application-name.jpg

Give the name of your application as "Page_load_Time" and then click "Ok". Then add "HTML page" and write the following code.

Program Coding

PageLoad.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

 <script type="text/javascript">

     var before_loadtime = new Date().getTime();

     window.onload = Pageloadtime;

     function Pageloadtime() {

         var aftr_loadtime = new Date().getTime();

         // Time calculating in seconds

         pgloadtime = (aftr_loadtime - before_loadtime) / 1000

         document.getElementById("loadtime").innerHTML = "Pgae load time is <font color='red'><b>" + pgloadtime + "</b></font> Seconds";

     }

</script>

</head>

<body>

<h3 style="font-weight: bold; font-style: italic; font-size: large; color: #3333CC">Page load time in JavaScript</h3>

<div>

<span id="loadtime"></span>

</div>

</body>

</html>

  

Output



fig11.jpg


Refresh or Reload the page; you will see that the page load time has changed.


fig12.jpg


Again refresh or reload the page.


fig13.jpg


For more information, download the attached sample application.

Up Next
    Ebook Download
    View all
    Learn
    View all