Displaying Page Load Time On Webpage

Question

I want to display the loading time of a webpage on site. I can get this working by writing to console.log but writing the information to a page is beyond me.

In my head I have

<!-- Loading Time -->
<script type="text/javascript">
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; 
</script>

Then I have this to write to the console log

<script type="text/javascript">
window.onload = function () {
var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
console.log('Page load time is '+ loadTime / 1000);
}
</script>

This works perfectly but I really want to display the loading time on a webpage. How do I achieve this? My page is a simple html / css site.

How do you want to display it? Where do you want do display it? What is the problem, I don't see you trying it anywhere but console log that you say it is working? Include your HTML and CSS, make [mre] using snipet of your attempt. — ikiK, Feb 06 '21 at 14:56
I'd suggest you start here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents — Teemu, Feb 06 '21 at 15:00

score 5 · Answer 1 · edited Feb 06 '21 at 15:28

5

Three possible methods are:

Just writing to the document directly (should not be used because of the reasons described here):

document.write(loadTime);
Adding an HTML element and setting its inner text to loadTime:

function displayLoadtime(loadtime){
  document.getElementById("loading-time").innerText = loadtime;
}

<p id='loading-time'>Loading...</p>

Creating the element in Javascript and displaying the loadTime using it:

function displayLoadingtime(loadtime){
  let p = document.createElement("p");
  p.innerText = loadtime;
  document.getElementById("loading-time-container").appendChild(p);
}

<div id='loading-time-container'></div>

I know what I answered is some beginners' stuff and you probably know it, but I will edit the answer in case you give more details, because I don't see any problems in displaying it if you already have the loadTime.

edited Feb 06 '21 at 15:28

Programmer

4,028
3
5
29

answered Feb 06 '21 at 15:00

PhyDev

63
10

By the way, I haven't added the part of passing the actual loading time to the functions, because I assume you know how to pass parameters to functions and all this very basic stuff, I just illustrated the methods for dynamically showing content in webpage. – PhyDev Feb 06 '21 at 15:11
`document.write` [should not be used](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) – Programmer Feb 06 '21 at 15:14
@Programmer you're right, but I just added it to let him know it exists. – PhyDev Feb 06 '21 at 15:17

Programmer · Accepted Answer · 2021-02-06T15:13:13.427

You can write the time you calculated into an element of the webpage using the innerText property of a Node.

window.onload = function() {
    var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
    console.log('Page load time is ' + loadTime / 1000);
    performanceDisplay = document.getElementById("performance-display") // get a reference to the paragraph
    performanceDisplay.innerText = loadTime / 1000 // put the value of the variable loadTime into the paragraph
}

<body>
  <p id="performance-display"></p>
</body>

Or, if you do not want to put the paragraph manually into the HTML, you can create it in the JavaScript using document.createElement:

window.onload = function() {
    var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
    console.log('Page load time is ' + loadTime / 1000);

    performanceDisplay = document.createElement("p") // create a new paragraph element
    performanceDisplay.innerText = loadTime / 1000 // put the value of the variable loadTime into the paragraph
    document.body.appendChild(performanceDisplay) // add the paragraph element to the body of the document
}

Thank you for everyone's answers It's much easier to understand for me seeing a working example. I dressed this up in some CSS and it works perfectly. — Rylad, Feb 06 '21 at 19:15

Erling T · Answer 3 · 2021-02-06T20:47:46.997

0

Welcome to StackOverflow, Rylad!

You can easily put it into your webpage by referencing an HTML element.

Ie. add an element with the id timeContainer to your page and set its innerHTML to your variable, loadTime. Here's an example:

<body>
  <span id="timeContainer">
    The load time will be displayed here when the page is finished loading
  </span>

  <script type="text/javascript">
    window.onload = function() {
      var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
      console.log(loadTime)
      
      document.getElementById("timeContainer").innerText = loadTime;
    }
  </script>
</body>

edited Feb 06 '21 at 20:47

answered Feb 06 '21 at 15:06

Erling T

54
6

This gives you a really crazy output. In my console log, the time is 0.709 but on the page, your script gives the output as -1612638473152 – Rylad Feb 06 '21 at 19:09
Ah, sorry about that, @Rylad! I forgot to wrap the function in an `onload` event. I just copied the first of your code snippets. I updated the code, and it should now run properly. You can also divide it by 1000 to get seconds, as you did ;) – Erling T Feb 06 '21 at 20:52

Displaying Page Load Time On Webpage

3 Answers3