Программное получение подробной информации о времени использования ресурсов в Chrome (PerformanceResourceTiming)

Question

При использовании Resource Timing API мы можем вернуть PerformanceResourceTiming объект для каждого ресурса, загруженного во время загрузки страницы:

       const po = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
po.observe({type: 'resource', buffered: true});

При загрузке ресурса печатает следующий объект данных:

       PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "http/1.1", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
  connectEnd: 611.8350000178907
  connectStart: 611.8350000178907
  decodedBodySize: 3531
  domainLookupEnd: 611.8350000178907
  domainLookupStart: 611.8350000178907
  duration: 180.61999999918044
  encodedBodySize: 3531
  entryType: "resource"
  fetchStart: 611.8350000178907
  initiatorType: "img"
  name: "https://quic.qa.akamai.com/demo-0rtt/logo.png"
  nextHopProtocol: "http/1.1"
  redirectEnd: 0
  redirectStart: 0
  requestStart: 623.1600000173785
  responseEnd: 792.4550000170711
  responseStart: 791.2099999957718
  secureConnectionStart: 611.8350000178907
  serverTiming: []
  startTime: 611.8350000178907
  transferSize: 180
  workerStart: 0

Хотя это нормально для всего времени загруженного ресурса (в данном случае duration: 180.61999999918044) если смотреть на сетевую вкладку инструментов разработчика, мы получаем гораздо более интересную разбивку по различным фазам загрузки:

Есть ли способ программно получить такой же уровень детализации для использования и отображения в веб-приложении при загрузке ресурсов?

Я знаю, что есть инструмент профилирования, но из того, что я узнал о нем, он больше предназначен для создания большого файла данных, а затем его обработки постфактум.