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#.

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">

<head>

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>

</div>

</body>

</html>

Output

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

Again refresh or reload the page.

For more information, download the attached sample application.