Element Timing API

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.



Reports timing information about one associated element.


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((entry) => {
observer.observe({ entryTypes: ["element"] });


Element Timing API
# sec-performance-element-timing

Browser compatibility

BCD tables only load in the browser

See also