javascriptperformancegoogle-chromefetch-apiresource-timing-api

PerformanceResourceTiming.responseStart and PerformanceResourceTiming.requestStart both are 0 for a status ok http request


I want to measure TTFB (Time to First Byte) for an HTTP request. I've hosted a 0KB pdf file on an amazon S3 server, and I'm using the fetch api to get it. Here's my code:

let url = "https://s3-us-west-2.amazonaws.com/speedtest.waveform.com/ping.pdf";
await fetch(url).then(res => res.text());
let perf  = performance.getEntriesByName(url).pop();
console.log("ttfb", perf.responseStart - perf.requestStart);

In the chrome developers network tab, I can see the request and all of its timing info:

enter image description here

But I can't access this info in the PerformanceResourceTiming document. In fact, many of the attributes including requestStart and responseStart are unset. Printing the perf record to console shows:

enter image description here

This is weird cuz doing the same thing using this url works just fine: "https://speed.cloudflare.com/__down?bytes=0"


Solution

  • This was because timing-allow-origin header was not set by the s3 server. Cloudflare did set that option which is why I was able to read ttfb values.