performance-analyzer/src/eventMetrics.js

Measure TTFB, FCB, Dom Load and Window Load events

  function getPerfEntriesNavigation() {
    const perfEntriesNavigation = performance.getEntriesByType("navigation");
    const [p] = perfEntriesNavigation;
    return p;
  }

  function getEventMetrics() {
    try {
      let perfEntriesNavigation = getPerfEntriesNavigation();
      let perfEntriesPaint = performance.getEntriesByType("paint");

      return {
        "ttfb": getTTFB(perfEntriesNavigation),
        "fcp": getFCP(perfEntriesPaint),
        "dom_load": getDomLoad(perfEntriesNavigation),
        "window_load": getWindowLoad(perfEntriesNavigation),
      }
    }
    catch(e) {
      // window is not defined
      console.error(e);
      return undefined;
    }
  }

  // TTFB -> Time to first byte
  function getTTFB(perfEntriesNavigation) {
    return perfEntriesNavigation.responseStart;
  }

  // FCP -> First Contentful Paint
  function getFCP(perfEntriesPaint) {
    let fcp = perfEntriesPaint.find((obj) => {
      return obj.name === "first-contentful-paint";
    });
    return fcp !== undefined ? fcp.startTime : 0;
  }

  //PerformanceNavigationTiming.loadEventEnd - PerformanceNavigationTiming.startTime
  function getWindowLoad(perfEntriesNavigation) {
    return perfEntriesNavigation.loadEventEnd - perfEntriesNavigation.startTime;
  }

  //PerformanceNavigationTiming.domContentLoadedEventEnd - PerformanceNavigationTiming.startTime
  function getDomLoad(perfEntriesNavigation) {
    return perfEntriesNavigation.domContentLoadedEventEnd - perfEntriesNavigation.startTime;
  }

module.exports = {
    getEventMetrics
}