Element Timing API

The Element Timing API provides features for monitoring the loading performance of large image elements and text nodes as they appear on screen.

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 <img> elements, <image> elements inside an <svg>, poster images of <video> elements, elements which have a background-image, and groups of text nodes, such as a <p>.

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

PerformanceElementTiming

Reports timing information about one associated element.

In this example we have two elements which are being observed. We use the PerformanceObserver interface to create a list of performance measurement events, in our case observing the PerformanceEntry.entrytype element in order to use the PerformanceElementTiming interface from the Element Timing API.

Two entries will be output to the console, the first containing details of the image, the second with details of the text node.

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

const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });

• PerformanceNavigationTiming
• PerformanceResourceTiming
• PerformanceMark
• PerformanceMeasure
• PerformancePaintTiming
• PerformanceLongTaskTiming