Cacher is the code snippet organizer for pro developers

(() => {
  const frame = window.document.getElementsByTagName('iframe')[0];
  const win = frame ? frame.contentDocument.defaultView : window;
  
  const logPerf = () => {
    const perfData = performance.timing;
    const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
    const interactiveTime = perfData.domInteractive - perfData.navigationStart;
    const renderTime = perfData.domComplete - perfData.domLoading;
    const paintTime = Math.floor(performance.getEntriesByType('paint').filter( entry => {
      return entry.name === 'first-contentful-paint';
    })[0].startTime);

    let bgColor;
    if (paintTime <= 3000) {
      bgColor = 'green';
    } else if (paintTime <= 5000) {
      bgColor = 'orange';
    } else {
      bgColor = 'red';
    }
    console.log(`%c Render Time: ${renderTime}, Paint Time: ${paintTime}, Interactive: ${interactiveTime}, Load Time: ${pageLoadTime}`,
      `background: ${bgColor}; color: white; display: block; padding: 0.2em 0.5em 0.2em 0;`);
  };

  if (document.readyState === 'complete') {
    logPerf();
  } else {
    win.addEventListener('load', () => {
      requestIdleCallback(() => {
        logPerf();
      })
    })
  }
})();