I need a piece of advice on PerformanceResourceTiming

Your question

Hello the Sitespeed team!

I'm working on custom metrics. I have added PerformanceResourceTiming based custom metrics, like:

• https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming#typical_resource_timing_metrics
• plus custom metrics for each block from the diagram https://mdn.github.io/shared-assets/images/diagrams/api/performance/timestamp-diagram.svg

But web browsers doesn't support the PerformanceResourceTiming specification for all use cases. The caching is a corner case for the PerformanceResourceTiming

Caching in Mozilla and Chrome for the initiatorType == "img"

Mozilla Firefox 139.0.4 and Chrome 137.0.7 fill a few fields for cached responses:

• startTime
• fetchStart
• responseEnd
• duration
  but the fields will be empty:
• connectEnd: 0
• connectStart: 0
• decodedBodySize: 0
• domainLookupEnd: 0
• domainLookupStart: 0
• encodedBodySize: 0
• redirectEnd: 0
• redirectStart: 0
• requestStart: 0
• responseStart: 0
• responseStatus: 0
• secureConnectionStart: 0
• transferSize: 0
• workerStart: 0

How to collect intervals?

Can I use a workaround

const entries = performance.getEntriesByType("resource");
for(const entry of entries) {
    if(entry.entryType == "resource") {
        let Redirect, ServiceWorker, HTTP_Cache, DNS, TCP, TLS, Interim_Request, Request, Response;
        if(entry.initiatorType == "img") {
            if(entry.transferSize == 0) {
                Redirect = 0.0;
                ServiceWorker = 0.0;
                HTTP_Cache = entry.duration;
                DNS = 0.0;
                TCP = 0.0;
                TLS = 0.0;
                Interim_Request = 0.0;
                Request = 0.0;
                Response = 0.0;
            } else {
                Redirect = entry.redirectEnd - entry.redirectStart;
                ServiceWorker = entry.fetchStart - entry.workerStart;
                HTTP_Cache = 0.0;
                DNS = entry.domainLookupEnd - entry.domainLookupStart;
                if(entry.secureConnectionStart >= entry.domainLookupEnd) {
                    TCP = entry.secureConnectionStart - entry.domainLookupEnd;
                    TLS = entry.requestStart - entry.secureConnectionStart;
                } else {
                    TCP = entry.requestStart - entry.domainLookupEnd;
                    TLS = 0.0;
                }
                if(entry.firstInterimResponseStart && entry.finalResponseHeadersStart) {
                    Interim_Request = entry.firstInterimResponseStart - entry.finalResponseHeadersStart;
                } else {
                    Interim_Request = 0.0;
                }
                Request = entry.responseStart - entry.requestStart;
                Response = entry.responseEnd - entry.responseStart;
            }
        } else ... {
           ...
        }
    }
}

Is it correct? In this case I use HTTPS only web sites?

Do you know about other corner cases with empty PerformanceResourceTiming fields?

Start with the issue's PerformanceResourceTiming discussion and the performance.getEntriesByType("resource") JavaScript example. Compare the proposed interval calculations with browser behavior for cached img resources and identify the corner cases that need documented handling; done means the workaround's correctness and limitations are clearly established.