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 the "HTML page" and write the following code.

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.