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 |
|
Observe the element:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
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: