4

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);
});
Craig
  • 2,093
  • 3
  • 28
  • 43

2 Answers2

0

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

Nizar Zizoune
  • 473
  • 6
  • 17
0

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);
Juergen Riemer
  • 1,393
  • 2
  • 13
  • 29
  • Thank you, that worked. It seems to only run twice before giving the correct value. I ended up using setTimeout(function(){console.log(performance.getEntriesByType("navigation")[0].duration)}, 0); which only runs once and gives the value. – Craig Nov 26 '21 at 21:47