JavaScript Element elementTiming Property

What You’ll Learn

Element.elementTiming is an instance property that reflects the elementtiming HTML attribute. Learn how that string labels an element for the Element Timing API, how to read and set it, and how to feature-detect—with five examples and try-it labs.

Introduction

The Element Timing API helps you measure when important elements (hero images, key text blocks, and similar) become visible and painted. To opt an element in, you give it an identifier with the elementtiming attribute.

elementTiming is the JavaScript reflection of that attribute: the same string you wrote in HTML, available on the Element object.

const el = document.getElementById("myImage");
console.log(el.elementTiming); // "big-image"

Understanding the Property

MDN: the elementTiming property of the Element interface identifies elements for observation in the PerformanceElementTiming API. The property reflects the value of the elementtiming attribute.

• Reflects HTML — same value as the elementtiming attribute.
• String identifier — choose a clear name like hero-image.
• Opt-in — only marked elements are observed for element timing.
• Experimental — Limited availability; Chromium-first today (MDN).

📝 Syntax

elementTiming

Value

A string: the element’s Element Timing identifier (empty when unset).

📋 MDN Image Example

MDN marks an image for observation with elementtiming="big-image", then reads the property:

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

const el = document.getElementById("myImage");
console.log(el.elementTiming); // "big-image"

Related learning: PerformanceElementTiming, PerformanceObserver, and customElementRegistry.

Examples Gallery

Examples follow MDN Element: elementTiming. Labs focus on reading and setting the identifier; collecting entries needs PerformanceObserver where supported.

const el = document.getElementById("myImage");
console.log(el.elementTiming); // "big-image"

big-image

const el = document.getElementById("hero");
el.elementTiming = "hero-banner";
console.log(el.elementTiming);
console.log(el.getAttribute("elementtiming"));

hero-banner
hero-banner

const el = document.getElementById("plain");
console.log(JSON.stringify(el.elementTiming)); // ""

""

if ("elementTiming" in Element.prototype) {
  console.log("Element.elementTiming supported");
} else {
  console.log("not supported");
}

Element.elementTiming supported

console.log({
  supported: "elementTiming" in Element.prototype,
  reflects: "elementtiming HTML attribute",
  tip: "Label only — timings come from PerformanceElementTiming",
  status: "Experimental · Limited availability (MDN)"
});

{
  "supported": true,
  "reflects": "elementtiming HTML attribute",
  "tip": "Label only — timings come from PerformanceElementTiming",
  "status": "Experimental · Limited availability (MDN)"
}

🚀 Common Use Cases

• Labeling hero images for Element Timing performance dashboards.
• Marking above-the-fold text or media for Core UX render metrics.
• Setting identifiers dynamically when content is injected by JavaScript.
• Debugging which elements are opted into PerformanceElementTiming.
• Teaching how HTML attributes reflect into Element IDL properties.

🔧 How It Works

📝 Notes

• Experimental and Limited availability on MDN (not Baseline)—banner shown above.
• Not Deprecated or Non-standard on MDN.
• Reflects elementtiming; choose stable, descriptive identifier strings.
• Related: customElementRegistry, firstElementChild, JavaScript hub.

💡 Best Practices