W3cubDocs

/Web APIs

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:

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

PerformanceElementTiming inherits from PerformanceEntry.

PerformanceEntry PerformanceElementTiming

Instance 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

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
PerformanceElementTiming 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

See also

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