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.|
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 PerformanceEntry object is part of the performance timeline. A performance entry can be directly created by making a performance
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).
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 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!
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.
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
- The "why" of web performance
- What is web performance?
- How do users perceive performance?
- Measuring performance
- Multimedia: images
- Multimedia: video
- HTML performance features
- CSS performance features
- Fonts and performance
- Mobile performance
- Focusing on performance