Custom Timings are a very simple way to strengthen your performance tracking, by creating specific indicators that will best meet the challenges of your own pages (and without having to install any additional javascript on your pages, since it is a standard API).
Synthetic Monitoring automatically collects your custom indicators (you can create your own metrics to fit your specific needs). It can be set up on your pages very easily, thanks to a standard JavaScript interface, supported by all up-to-date browsers (no external library is required on your site).
Examples of Custom Timings:
- The moment your search input autocomplete is loaded and functional
- On a Product List, the moment users can start to interact with filters
- The moment the loading spinner appears and the moment it disappears to display the final content
- If your interface is made up of separate widgets, the moment the content of each widget is available
How to use Custom timings (User Timing API)
Synthetic Monitoring automatically collects the “marks” and “measures” declared in your web pages by your developers (using the User Timing API). It is important to have a clear naming policy for your marks and measures to make it easier for you to analyze your data.
For your developers, the implementation of a mark is as simple as a single line of code, at the right place of your JS code:
performance.mark("my-custom-timing");Set up your own custom timings for the most significant elements of your pages and Synthetic Monitoring will immediately start to collect them.
View Custom Timings
You can see your Custom Timings from two places in Synthetic Monitoring.
- The Waterfall
- In the metrics displayed in Monitorings, Scenarios and Reports.
Select Manage displayed metrics and scroll down to the Custom timings section. Only marks are available to be displayed in the line chart (measures are not).