Calculating Page Load Time in JavaScript

Calculating Page Load Time In JavaScript

Don't ever use the setInterval or setTimeout functions for time measuring! They are unreliable, and it is very likely that the JS execution scheduling during a documents parsing and displaying is delayed.

Instead, use the Date object to create a timestamp when you page began loading, and calculate the difference to the time when the page has been fully loaded:

<doctype html>
<html>
    <head>
        <script type="text/javascript">
            var timerStart = Date.now();
        </script>
        <!-- do all the stuff you need to do -->
    </head>
    <body>
        <!-- put everything you need in here -->

        <script type="text/javascript">
             $(document).ready(function() {
                 console.log("Time until DOMready: ", Date.now()-timerStart);
             });
             $(window).load(function() {
                 console.log("Time until everything loaded: ", Date.now()-timerStart);
             });
        </script>
    </body>
</html>

How to calculate page load time in mobile?

You can try using the Performance timing API, as it is supposed to measure relative to the performance.fetchstart (when the page started to load). Time 0 is measured when the page starts being fetched (performance.fetchstart), and the calls to performance.now fetch the time in milliseconds relative to fetchstart.

I don't think you need to put the script in the head as I did below since the time measurement relative to the page fetch will be done only when the page "load" event fires and triggers the callback.

<!doctype>
<html>
  <head>
    <!-- HEAD content stuff -->
    <script>
      document.addEventListener("load", function(event) {
        var t1 = performance.now();
        console.log("PageLoad duration: " + t1 + " milliseconds.")
      });
    </script>
  </head>
  <body>
    <!-- Page structure/content stuff, etc ... -->
  </body>
</html>

See the JSFiddle

More on these APIs:
When milliseconds are not enough: performance.now

Performance.now (MDN)

Calculate Page Load Times using Javascript's window.performance.timing

Why is finished not equal domComplete - requestStart?

DOMContentLoaded means all the DOM content is loaded, but javascript and images are still loading.

Load means all the content including javascript and images are loaded. If you start lazy loading images and javascript before this event has been fired, it will delay this event and slow down your page load event. This will have a negative effect on your google lighthouse score.

Finished in chrome dev tools include asynchronously loading assets, which may continue downloading way after the onload event has been fired. As soon as one of your scripts start loading more content via ajax, the finished time will increase. This number should generally help you to see how long it takes to load all the content, including lazy loaded images, scripts ect. which can and should be loaded after the load event to improve your page for SEO.

How to calculate the time between typing a url into a web browser and page being loaded?

The real important event, which search engines look at, is the load event. So you do not really care about the finish time. You want to move all content, which is not needed for the first interaction with your app, to be lazy loaded after this event has been fired.

Furthermore you are looking for navigationStart rather than requestStart. There will be some time between user pressing enter (navigationStart) and the request actually being executed (requestStart).

W3C spec:

navigationStart

This attribute must return the time immediately after the user agent
finishes prompting to unload the previous document. If there is no
previous document, this attribute must return the time the current
document is created.

MDN quote

performance.timing.navigationStart + performance.now() will be
approximately equal to Date.now()

Firing performance.now() onload tells you how long it took to get there.
However it is not supported by IE9 and some browsers round the results. Using Date.now() - window.performance.timing.navigationStart gives more consistent results and is supported by IE9.

JS for logging the time of load event.

window.addEventListener('load', (event) => {
    console.log('All assets are loaded')
    console.log(Date.now() - window.performance.timing.navigationStart);
});

Why window.performance values never change after the initial load?

This is related to SPA pages. Once the DOM and initial assets are loaded, everything else is loaded async. Routing for SPAs is handled in the frontend and does not trigger a new page load in chrome dev tools. Even when manually reloading the page, you have to disable the 'preserve log' option in the network tab to get fresh performance values.

Page load time with JavaScript

It is pretty much the only way in legacy browsers to measure times. But for the rescue, most browsers do implement the window.performance object which offers a very, very accurate way of getting times.

A typical window.performance.timing output:

connectEnd 1351036536696

connectStart 1351036536696

domComplete 1351036538277

domContentLoadedEventEnd 1351036538146

domContentLoadedEventStart 1351036538119

domInteractive 1351036538042

domLoading 1351036537552

domainLookupEnd 1351036536694

domainLookupStart 1351036536694

fetchStart 1351036536696

loadEventEnd 1351036538295

loadEventStart 1351036538277

navigationStart 1351036536696

..which is not even the full list.

How to get page load duration using JavaScript

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);

Calculating Page Load Time in JavaScript