Discussion on: How to measure page loading time with Performance API

Referring to developer.mozilla.org,

the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

It may be interesting to watch the performance for the DOM loading only. This can be done in a most basic version this way:

let startTime = performance.now()
window.addEventListener("load", () => {
  console.log("Total LoadTime "+((performance.now()-startTime)).toFixed(1)+"ms")
});

document.addEventListener("DOMContentLoaded", () => {
  console.log("DomLoadTime "+((performance.now()-startTime)).toFixed(1)+"ms")
});

But the main question: what do we measure here?

Maybe you should have a look at the Chrome developer tools, which have a nice performance tool. This gives you a VERY detailed analysis of page performance:

You can even drill down to see, how long HTML parsing took.

In my case, tis gives a different picture. DomLoadTime was indicated to be 3.0 ms, the total load time was 4.7 ms referring to the event results.

The chrome tools tell me, that page loading and HTML parsing took about 45 ms, After that, the dom is loaded. Javascript ist executed after HTML is parsed.

Painting starts about 80 ms after the start of the page load, and it seems the whole process is finished after 250ms.

So, the dom events seem to give us only a small fraction of the page load time.