Element Timing API

The Element Timing API provides features for monitoring the loading performance of large image elements and text nodes as they appear on screen.

Concepts and Usage

The aim of the Element Timing API is to give web developers or analytics tools the ability to measure rendering timestamps of critical elements on a page.

The API supports timing information on <img> elements, <image> elements inside an <svg>, poster images of <video> elements, elements which have a background-image, and groups of text nodes, such as a <p>.

The author flags an element for observation by adding the elementtiming attribute on the element.

Interfaces

PerformanceElementTiming

Reports timing information about one associated element.

Examples

In this example we have two elements which are being observed. We use the PerformanceObserver interface to create a list of performance measurement events, in our case observing the PerformanceEntry.entrytype element in order to use the PerformanceElementTiming interface from the Element Timing API.

Two entries will be output to the console, the first containing details of the image, the second with details of the text node.

<img src="image.jpg" elementtiming="big-image">
<p elementtiming="text" id="text-id">text here</p>

const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });

Specifications

Specification Status Comment
Element Timing Editor's Draft Initial definition.

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Element_timing_API
77
79
No
No
64
No
77
77
No
55
No
12.0
element
77
79
No
No
64
No
77
77
No
55
No
12.0
id
77
79
No
No
64
No
77
77
No
55
No
12.0
identifier
77
79
No
No
64
No
77
77
No
55
No
12.0
intersectionRect
77
79
No
No
64
No
77
77
No
55
No
12.0
loadTime
77
79
No
No
64
No
77
77
No
55
No
12.0
naturalHeight
77
79
No
No
64
No
77
77
No
55
No
12.0
naturalWidth
77
79
No
No
64
No
77
77
No
55
No
12.0
renderTime
77
79
No
No
64
No
77
77
No
55
No
12.0
toJSON
77
79
No
No
64
No
77
77
No
55
No
12.0
url
77
79
No
No
64
No
77
77
No
55
No
12.0

BCD tables only load in the browser

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element_timing_API