HTML elementtiming Attribute

HTML elementtiming Attribute

The HTML elementtiming attribute identifies an element for performance measurement with the Element Timing API. It allows supported browsers to report timing information about when important images, text, and other eligible content are rendered.

Syntax

The elementtiming attribute is assigned a value that identifies the element in performance timing information.

<img src="photo.jpg" alt="Example" elementtiming="main-image">

The attribute marks eligible content so that supported browsers can create element performance entries that can be observed with JavaScript.

Attribute Value

The value of elementtiming is a string used as an identifier for the observed element.

<p elementtiming="intro-text">Important introductory content.</p>

Using descriptive identifiers makes it easier to determine which measured element corresponds to each performance entry.

Eligible Content

The elementtiming attribute can identify several types of content for observation by the Element Timing API.

The attribute is most useful on content whose rendering time is important to the perceived performance of the page.

Using PerformanceObserver

Adding elementtiming identifies eligible content for measurement. JavaScript can then use PerformanceObserver to receive performance entries of type element.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.identifier);
  });
});

observer.observe({
  type: "element",
  buffered: true
});

The resulting PerformanceElementTiming entries provide information about the observed content, including its identifier and available timing information.

Element Timing Identifier

The value assigned to elementtiming is available through the identifier property of the corresponding PerformanceElementTiming entry.

<img src="photo.jpg"
     alt="Example"
     elementtiming="featured-image">

For this element, the performance entry's identifier value is featured-image. This makes it possible for a script to distinguish between multiple measured elements.

Common Uses

The elementtiming attribute can be useful when measuring when important visual content becomes available to the user.

Possible candidates include a page's main image, an article heading, important introductory text, a video poster image, or prominent images in a carousel.

The information can help developers investigate rendering performance for specific content rather than relying only on broader page-level performance measurements.

Common Mistakes

Do not assume that adding elementtiming changes when an element loads or renders. The attribute identifies eligible content for measurement; it does not control its loading or rendering priority.

Do not confuse the value of elementtiming with an HTML id. The value is an identifier used by the Element Timing API and does not replace the element's id attribute.

Do not rely on Element Timing without considering browser support. The API is not currently available in all core browsers.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The elementtiming global attribute has limited availability and should not be relied on without checking the browsers required by your project.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the elementtiming Attribute

The example marks a paragraph with elementtiming and uses PerformanceObserver to display its timing information when the browser supports the Element Timing API.

Summary

The HTML elementtiming attribute identifies eligible content for measurement with the Element Timing API. Its value provides an identifier that appears in the element's performance entry. A PerformanceObserver can observe these entries and provide timing information about important images, text, video poster images, and other supported content. Because browser support remains limited, it should be used with appropriate compatibility checks.