DEV Community

Cover image for How to measure page loading time with Performance API
Silvestar Bistrović
Silvestar Bistrović

Posted on • Updated on • Originally published at silvestar.codes

How to measure page loading time with Performance API

#webdev #javascript #beginners #programming

A while ago, I stumbled across a blog post by Tim Kadlec. Although the blog post was intriguing, something else caught my attention. In Tim’s footer, there’s a text saying how much time did it take to load the page. Naturally, I wanted to incorporate this feature into my website, so I “borrowed” Tim’s code (Mr. Kadlec is aware of this, by the way). However, while adjusting the code for my site, I noticed numerous deprecation warnings popping up. Needless to say, it bothered me so much that I had to find a way to eliminate these warnings.

Screenshot of VS Code showing deprecation warning for the performance.timing.

The new way

MDN recommends using the Performance API to gauge the performance of websites and web applications. Unfortunately, while the documentation is comprehensive, it doesn’t provide many examples. So I had to experiment with several approaches, but the results didn’t match the results from the “original” script. Not until I noticed that you could save the performance.mark() as a variable and read its properties.

Check out the GIF below, demonstrating how the “old” and “new” versions produce almost identical outcomes.

Page reloading multiple times showing different results for the “old” and “new” way of calculating page load time.

Here’s the final code for getting the page load time:

const perf = () => {
  const $perf = document.querySelector('.js-perf')

  if ($perf) {
    // Wait for the page to finish loading
    window.addEventListener('load', () => {
      const pageEnd = performance.mark('pageEnd')
      const loadTime = pageEnd.startTime / 1000

      $perf.innerHTML += `Page loaded in ${loadTime}s.`
    })
  }
}

perf()
Enter fullscreen mode Exit fullscreen mode

Once the load event is complete, I store the performance.mark(‘pageEnd’) into a variable. The variable contains several properties, but we only need startTime. To get the final result in seconds, I divided startTime by 1000 and displayed it in my placeholder.

NPM package

To save you some time, I’ve created an NPM package named page-loaded-in.

Place the following code into your <head> and include the .js-page-loaded-in element to see how fast your page loads.

<head>
  <script src="https://unpkg.com/page-loaded-in@0.0.3/dist/index.js"></script>
</head>
<body>
  <p class="js-page-loaded-in"></p>
</body>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Prioritizing performance when developing web-based projects is crucial to provide users with a seamless and efficient experience. Measuring page loading time using the Performance API is one way to demonstrate that a page is performing well.

Top comments (1)

Collapse
 
efpage profile image
Eckehard •

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")
});
Enter fullscreen mode Exit fullscreen mode

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:

Image description

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.

Read next

hirelaraveldevelopers profile image

Why Magento is the #1 Choice of eCommerce Startups?

Hire Laravel Developers -

akpevwe11 profile image

Demystify google search

Akpevwe11 -

renancferro profile image

🥷 Tip of The Day: NTL - Node Task List

Renan Ferro -

hashirdev profile image

Choosing Your Path: Specializations in Web Development

Hashir Afzal -