[Supported in SpeedCurve RUM and Synthetic]

What is Element Timing?

The Element Timing API enables monitoring of when a specified DOM element is rendered. It is implemented using the elementtiming attribute of an html element.

Example:
<img src=”/images/logo.png” elementtiming="logo-shown" />

📘

Element Timing: One true metric to rule them all?

Read this post by Andy Davies for more information on how Element Timing can be used to understand and measure user experience.

https://www.speedcurve.com/blog/element-timing-one-true-metric/

Adding custom timing metrics with Element Timing

You can add a timing metric to SpeedCurve using Element Timing.

Step 1

To get started, after clicking on 'Add Metric', select 'Timing Metric' type and click 'Next'.

Step 2

Select Element Timing API and click 'Next'.

Step 3

• Add the name of the metric you'd like to see in your charts and dashboards
• Add the name of the element timing entry you want to collect

Step 4

Once complete, you will see your metric listed on the custom data page.