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:
imageelements inside an svg.
video element's poster
Elements with a
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
loadTime will be
DOMHighResTimeStamp time stamp in milliseconds.
renderTime may not be available if the element is an image and it's loaded cross-origin without the