Loading
TTFB

Time To First Byte

Measure the time to first byte, from the document

Snippet

// Measure the time to first byte of all the resources loaded
// https://webperf-snippets.nucliweb.net
new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType("navigation");
  console.log(`TTFB (ms): ${pageNav.responseStart}`);
}).observe({
  type: "navigation",
  buffered: true,
});

Measure the time to first byte of all the resources loaded

Snippet

// Measure the time to first byte of all the resources loaded
// https://webperf-snippets.nucliweb.net
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const resourcesLoaded = [...entries]
    .map((entry) => {
      let obj = {};
      // Some resources may have a responseStart value of 0, due
      // to the resource being cached, or a cross-origin resource
      // being served without a Timing-Allow-Origin header set.
 
      if (entry.responseStart > 0) {
        obj = {
          "TTFB (ms)": +entry.responseStart.toFixed(2),
          Resource: entry.name,
        };
      }
      return Object.keys(obj).length > 0 ? obj : undefined;
    })
    .filter((item) => item !== undefined);
 
  console.table(resourcesLoaded);
}).observe({
  type: "resource",
  buffered: true,
});