How to get page load duration using JavaScript

Question

I am trying to get the time it takes to load a page and I am not sure of the correct way to run this script.

I thought I could do this:

window.addEventListener("load", function(){
    console.log(performance.getEntriesByType("navigation")[0].duration);
});

However it always returns 0;

If I run it in the console after, it works fine. Is there another event I can use that runs after the window load event? What is the correct usage of this function?

EDIT: It seems using setTimeout adds it as the first thing that runs after the page has completely loaded. Working code is:

window.addEventListener("load", function(){    
    setTimeout(function(){
        console.log(performance.getEntriesByType("navigation")[0].duration);
    }, 0);
});

Answer 1

You can also poll for the value being set:

const perf = () => {
  const duration = performance.getEntriesByType("navigation")[0].duration;
  if (!duration) setTimeout(perf, 0);
  else console.log({ duration });
}
window.addEventListener('DOMContentLoaded', perf);

Answer 2

You can get load time using the performance API given by your browser

 let loadTime = window.performace.timing.loadEventEnd - window.performance.timing.navigationStart;

Checkout https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API for more