Display load time in html page

Question

I want to display in the footer of my html page the time it takes to load(using javascript). But I noticed that the load time displayed on the page doesn't match the page load time shown in the browser.

Here is my javascript code:

(() => {
     const loadStart = new Date().getTime();

     window.addEventListener('load', () => {
         const timeStamp = document.querySelector('#timestamp');
         timeStamp.innerHTML += `Page load time: ${(new Date().getTime() - loadStart) / 1000} sec`;
     });
 })();

I connect the script in of the page and use the id of css-selector to display time.

The best solution I see is to use the JavaScript API but it's deprecated. I would like to use a more modern approach.

Answer 1

Try this

time.loadEventStart - time.navigationStart

from performance.timing