Resource Timing API
The browser's per-file stopwatch for images, scripts, styles, fonts, and fetches, including connection, response, download, and size data.
See it
What it is
The Resource Timing API gives JavaScript a PerformanceResourceTiming entry for fetched resources such as images, scripts, stylesheets, fonts, and API requests. Each entry carries timestamps for redirect, DNS, connection, TLS, request, first response byte, and download, plus transfer and body sizes when the browser is allowed to expose them. It is the raw material for a real-user network waterfall.
Reach for it when a load metric says the page is slow but you need to name the late or heavy file. Read existing entries with performance.getEntriesByType('resource') or subscribe with a PerformanceObserver, then group by initiatorType, host, route, or release. When the slow part turns out to be inside your own backend, the Server-Timing header lets that server attach its own named phases to the same entry.
Gotcha: cross-origin resources still appear, but sensitive timing and size fields are restricted unless that server sends Timing-Allow-Origin. The browser's resource timing buffer is also finite. Increase it with performance.setResourceTimingBufferSize() or consume entries as they arrive instead of assuming a long session kept every request.
Ask AI for it
Add real-user resource measurement with the Resource Timing API. Call performance.setResourceTimingBufferSize(1000), then create a PerformanceObserver for entry type 'resource' with buffered: true. For each PerformanceResourceTiming entry, collect name, initiatorType, startTime, fetchStart, requestStart, responseStart, responseEnd, transferSize, encodedBodySize, and decodedBodySize. Derive server wait as responseStart minus requestStart and download time as responseEnd minus responseStart, batch the results by page route, and send them with navigator.sendBeacon on visibilitychange. Configure Timing-Allow-Origin on cross-origin asset responses, handle the resourcetimingbufferfull event, and never include full URLs containing query strings in telemetry.