PerformanceElementTiming

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

ThePerformanceElementTiming interface contains render timing information for image and text node elements the developer annotated with anelementtiming 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 contentfulbackground-image property with a URL value for a resource that is actually available, and
groups of text nodes, such as a<p>.

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

PerformanceElementTiming inherits fromPerformanceEntry.

Instance properties

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

PerformanceEntry.durationRead onlyExperimental: Always returns0 asduration does not apply to this interface.
PerformanceEntry.entryTypeRead onlyExperimental: Always returns"element".
PerformanceEntry.nameRead onlyExperimental: Returns"image-paint" for images and"text-paint" for text.
PerformanceEntry.startTimeRead onlyExperimental: Returns the value of this entry's renderTime if it is not0, otherwise the value of this entry'sloadTime.

This interface also supports the following properties:

PerformanceElementTiming.elementRead onlyExperimental: An Element representing the element we are returning information about.
PerformanceElementTiming.idRead onlyExperimental: A string which is the id of the element.
PerformanceElementTiming.identifierRead onlyExperimental: A string which is the value of the elementtiming attribute on the element.
PerformanceElementTiming.intersectionRectRead onlyExperimental: A DOMRectReadOnly which is the rectangle of the element within the viewport.
PerformanceElementTiming.loadTimeRead onlyExperimental: A DOMHighResTimeStamp with the loadTime of the element.
PerformanceElementTiming.naturalHeightRead onlyExperimental: 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.naturalWidthRead onlyExperimental: 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.renderTimeRead onlyExperimental: A DOMHighResTimeStamp with the renderTime of the element.
PerformanceElementTiming.urlRead onlyExperimental: 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 thePerformanceElementTiming object.

In this example two elements are being observed by adding theelementtiming attribute. APerformanceObserver is registered to get all performance entries of type"element" and thebuffered flag is used to access data from before observer creation.

html

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

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.