I need a piece of advice on PerformanceResourceTiming #4527
Description
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?