---
title: "DOM Element Timing API"
description: "Measure and monitor rendering timestamps of DOM elements for performance optimization. Practical notes and code examples on."
url: "https://h3manth.com/scribe/dom-element-timing-api/"
canonical_url: "https://h3manth.com/scribe/dom-element-timing-api/"
markdown_url: "https://h3manth.com/scribe/blog/dom-element-timing-api.md"
publishDate: "2020-03-03T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["javascript","web-api","performance"]
word_count: 166
reading_time_minutes: 1
x_markdown_tokens: 411
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# DOM Element Timing API

> Measure and monitor rendering timestamps of DOM elements for performance optimization. Practical notes and code examples on.

Measuring and monitoring the rendering timestamps of DOM elements is an important measure to improve and avoid regressions in page loads.

The Element Timing API helps us to measure this with ease and it supports the following elements:

- `img` elements
- `image` elements inside an SVG
- `video` element's poster image
- Elements with a `background-image`
- Groups of text nodes

## Usage

Make sure the DOM element of interest has the `elementtiming` content attribute:

```html
<img src="" elementtiming="cat-pic" />
<p elementtiming="imp-doc">I need to watch this</p>
<!-- So on -->

## Observe the Element
javascript
const observer = new PerformanceObserver(list => {
  let perfEntries = list.getEntries().forEach(function(entry) {
    if (entry.identifier) {
      if (entry.renderTime) {
        console.log(`${entry.renderTime}ms to render!`);
      } else {
        console.log(`${entry.loadTime}ms to load!`);
      }
    }
  });
});

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

`renderTime` and `loadTime` will be `DOMHighResTimeStamp` time stamp in milliseconds.

> **Note:** `renderTime` may not be available if the element is an image and it's loaded cross-origin without the `Timing-Allow-Origin` header.

[DEMO](https://h3manth.com/demo/element-timing-api/)