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.
Concepts and Usage
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.
Interfaces
PerformanceElementTiming
-
Reports timing information about one associated element.
Examples
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"] });
Specifications
Specification | Status | Comment |
---|---|---|
Element Timing | Editor's Draft | Initial definition. |
Browser compatibility
PerformanceElementTiming
BCD tables only load in the browser