PerformanceElementTiming
========================

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

The **`PerformanceElementTiming`** interface contains render timing information for image and text node elements the developer annotated with an `elementtiming` attribute for observation.

Description
-----------

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 the following elements:

* `<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.

`PerformanceElementTiming` inherits from `PerformanceEntry`.

PerformanceEntry

PerformanceElementTimingInstance properties
-------------------

This interface extends the following `PerformanceEntry` properties for event timing performance entry types by qualifying them as follows:

`PerformanceEntry.duration` Read only  
Experimental

Always returns `0` as `duration` does not apply to this interface.

`PerformanceEntry.entryType` Read only  
Experimental

Always returns `"element"`.

`PerformanceEntry.name` Read only  
Experimental

Returns `"image-paint"` for images and `"text-paint"` for text.

`PerformanceEntry.startTime` Read only  
Experimental

Returns the value of this entry's `renderTime` if it is not `0`, otherwise the value of this entry's `loadTime`.

This interface also supports the following properties:

`PerformanceElementTiming.element` Read only  
Experimental

An `Element` representing the element we are returning information about.

`PerformanceElementTiming.id` Read only  
Experimental

A string which is the `id` of the element.

`PerformanceElementTiming.identifier` Read only  
Experimental

A string which is the value of the `elementtiming` attribute on the element.

`PerformanceElementTiming.intersectionRect` Read only  
Experimental

A `DOMRectReadOnly` which is the rectangle of the element within the viewport.

`PerformanceElementTiming.loadTime` Read only  
Experimental

A `DOMHighResTimeStamp` with the loadTime of the element.

`PerformanceElementTiming.naturalHeight` Read only  
Experimental

An unsigned 32-bit integer (unsigned long) which is the intrinsic height of the image if this is applied to an image, 0 for text.

`PerformanceElementTiming.naturalWidth` Read only  
Experimental

An unsigned 32-bit integer (unsigned long) which is the intrinsic width of the image if this is applied to an image, 0 for text.

`PerformanceElementTiming.renderTime` Read only  
Experimental

A `DOMHighResTimeStamp` with the renderTime of the element.

`PerformanceElementTiming.url` Read only  
Experimental

A string which is the initial URL of the resources request for images, 0 for text.

Instance methods
----------------

`PerformanceElementTiming.toJSON()` 
Experimental

Returns a JSON representation of the `PerformanceElementTiming` object.

Examples
--------

### Observing render time of specific elements

In this example two elements are being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation.


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



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
observer.observe({ type: "element", buffered: true });
```


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

Specifications
--------------

| Specification |
| --- |
| Element Timing API # sec-performance-element-timing |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `elementtiming` HTML attribute