Web Performance API

Published on March 30, 2021

← Back to tips

Did you know that Web had a Performance API?

It provides you with various metrics to measure how your website/webapp performs. 🚀

Here are 3 quick methods you can use now…

1/ Resource Timings

Fetch the list of resources loaded in the page, identify the ones that consume more time, and even track them to improve your app’s experience

Why? Because real world measures vary. Having performance budgets are not enough.

Demo: https://codesandbox.io/s/performance-api-resource-entries-bh5e1

2/ PerformanceMark

Want to measure how your custom code performs?

Mark API lets you label specific points in your code execution. You can then view them in your DevTools Performance Tab.

Helps make informed decisions to improve perf

Try: https://jsbin.com/zimosef/edit?js

3/ now()

http://performance.now() allows you to quickly measure time taken taken between executions. Useful to measure performance of workers too.

Try: https://jsbin.com/polecok/1/edit?js,console

🎉 Interested in Frontend or Indie-hacking?

I talk about the latest in frontend, along with my experience in building various (Indie) side-projects