JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<div>
  <img src="https://via.placeholder.com/150" elementtiming="img">

  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" elementtiming="svg-img" height="200" width="200" />
  </svg>

  <video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" elementtiming="poster" width="620">
  </video>
</div>

CSS

div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img {
  align-self: center;
}

JavaScript

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});