User Timing Level 3: Set a value!

The Chrome team has snuck a fundamental change to how user timing marks work into Chrome 78. For many years now, our own Steve Souders has championed user timing, and he has always believed you should be able to set a value for a user timing mark or measure.

With User Timing Level 3, now you can! Level 3 lets you explicit set a startTime whereas previously you could only pass in the name of a mark.

performance.mark("name", {startTime: 1000})

User timing marks have alway been limited by an inability to control their actual value. You just fired a mark and it set a point in time relative to navigationStart.

Now we can set the startTime of a user timing mark, which gives you a lot more flexibility when instrumenting your pages and apps. In fact, you could store any numeric value you like as a user timing mark, which allows you to easily track any type of custom metric you like.

You could use JavaScript to calculate an interesting metric and then pass it to a user timing mark. For example, here we get the number of scripts on the page and pass it to a user timing mark:

let numScripts = document.querySelectorAll('script').length;
performance.mark("numScripts", {startTime: numScripts});

In this way, any numeric value can be stored as a user timing mark. The advantage of defining custom metrics this way is that many monitoring tools already have native support for user timing marks. SpeedCurve automatically collects all user timing marks and measures in both Synthetic and LUX, our real user monitoring service. Most tools will interpret the metric as time in milliseconds, which might be a bit odd for some values, but they will track it with very little effort on your part. This allows you to quickly experiment with new metrics and switch tools anytime you like without having to re-instrument your pages.

Here are a few ideas for what you could start tracking:

• Number of items in a cart
• How long it takes someone to interact with the page
• The duration of the slowest request
• Number of blocking CSS and JS requests
• DOM depth
• Local storage size

We actually track most of these in SpeedCurve already, but the point is, we had to write custom JS to do so. Now you can write your own custom metrics and use SpeedCurve and other tools that support user timing to easily track and trend any of your own experimental metrics.

Give it crack! Come up with an interesting performance metric, stuff it in a user timing mark, and then use a free trial of SpeedCurve to track it.  

Note: As of early 2020, only Chrome supports User Timing Level 3. In other browsers with support for older versions of user timing, you will continue to get a normal startTime for the mark, so you may want to only fire marks with custom values in Chrome.