Measuring performance

Measuring performance is important: you need metrics to see how your app compares to your competitors and to see how the upcoming release compares to your current and past releases. However, there is no single number or metric that works for all sites and all business goals. The metrics you choose to measure should be relevant to your users, site and business goals, measurable in a consistent manner, and, preferably to ensure internal support for web performance efforts, understandable to non-developers. This article introduces objective web performance metrics available to web optimization that you can work with to measure and maintain your sites performance.

Prerequisites: Basic computer literacy, basic software installed, and basic knowledge of client-side web technologies.
Objective: To learn about the various web performance metrics available through a few web performance APIs and available tools which visually render them.

Performance APIs

The web platform comes with a set of APIs that allow you to create your own performance tools.

With the original Navigation Timing API we can measure client-side web performance including the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and so forth. We can use the API for metrics related to all of the navigation events below.

The various handlers that the navigation tiiming API can handle including Navigation timing API metrics Prompt for unload redirect unload App cache DNS TCP Request Response Processing onLoad navigationStart redirectStart redirectEnd fetchStart domainLookupEnd domainLookupStart connectStart (secureConnettionStart) connectEnd requestStart responseStart responseEnd unloadStart unloadEnd domLoading domInteractive domContentLoaded domComplete loadEventStart loadEventEnd

The Performance API, which provides access to performance-related information for the current page, includes the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API. These interfaces allows the accurate measure how long JavaScript tasks take to complete.

The PerformanceEntry object is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).

The PerformanceObserver API builds on this, observing performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.

We won't talk very much about these APIs in this module, as they are an advanced topic, but its worth knowing they exist. See also Navigation and resource timings for further examples of using such APIs.

These APIs allow you to create your own performance measurement tools. Fortunately, there are several tools already built that you can use, including tools already in your browser.

Tools and metrics

There are a number of different tools available to help you improve performance, and these can generally be classified into two categories:

  • Tools that help to indicate or measure performance, such as PageSpeed Insights or the Firefox Network Monitor and Performance Monitor. These tend to show you how fast or slow something is, or indicate things that could likely be improved upon to help your performance be better.
  • Tools that are used to update code so that it will perform better, for example bundling tools that pack your code into single files to reduce the number of HTTP requests, or minifiers that remove all whitespace from your code to make the files smaller.

We'll talk about both categories in this course. And as well as talking about performance metrics we will of course talk about the metrics that you'll use to measure whether your site's performance is improving.

General performance reporting tools

Tools like PageSpeed Insights can measure a website’s performance. You can enter a URL and get a performance report in seconds. The report contains scores about how your website is performing, both for mobile and desktop. This is a good start for getting an idea about what you are already doing well and what could be improved.

At the time of writing, MDN's performance report summary looked like this:

A screenshot of PageSpeed Insights report for the Mozilla homepage.

A performance report contains information about things like how long a user has to wait before anything can be seen on the page, how many bytes there needs to be downloaded to show a page, and many more. And more importantly, it lets you know if those values are good or bad.

webpagetest.org is another example of a tool that automatically tests your site and returns lots of useful metrics.

Try running your favorite website now, on both webpagetest.org and PageSpeed Insights, and see what the scores are!

Network tools

Most browsers have tools available that you can run against loaded pages to see how they are performing. For example, the Firefox Network Monitor can return detailed information on all the assets downloaded form the network, along with a time graph that shows how long each one took to download, and other information besides.

You can also use the Performance Monitor to measure the performance of a UI as you perform different actions, to indicate what might be slowing things down.

Conclusion

We hope our brief overview of the web performance metrics helped you to get an idea of what is measurable. Next up we'll look at perceived performance, and how you can use some clever techniques to make some unavoidable performance hits appear less severe to the user, or disguise them completely.

In this module