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,
});