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 below elements:

• img elements.

• image elements inside an svg.

• video element's poster image.

• Elements with a background-image.

• Groups of text nodes.

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

1
2
3

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

Observe the element:

1
2
3
4
5
6
7
8
9
10
11
12

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: