v148 · Performance · RUM

RUM Dashboard

The new contentType property on PerformanceResourceTiming (Chrome 148) unlocks content-type-aware Real User Monitoring. This dashboard reads every resource this page loads, groups them by contentType, and shows count, total bytes, and average duration per MIME category — exactly what a production RUM SDK would send.

Resource timing — contentType breakdown simulated

Dataset Group by Metric Minimum duration 0ms Include cached / zero-byte rows

Detecting support for PerformanceResourceTiming.contentType and preparing the dashboard.

—total resources

—visible groups

—total KB transferred

—unknown type rows

Resources by contentType — count & avg duration

Resource detail

name	contentType	initiator	duration	transferSize

Click "Capture page resources" to read all PerformanceResourceTiming entries with their contentType. In Chrome 148 the data comes from the live API; in other browsers a realistic simulation is used.

// Chrome 148: contentType on PerformanceResourceTiming
const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    // New in Chrome 148:
    console.log(entry.contentType);  // 'text/javascript', 'image/png', …
    console.log(entry.duration);      // ms from request start to last byte
    console.log(entry.transferSize);   // bytes over wire (0 if cached)
  });
});
observer.observe({ type: 'resource', buffered: true });

// Group by contentType for RUM:
const byType = {};
performance.getEntriesByType('resource').forEach(e => {
  const ct = e.contentType || 'unknown';
  (byType[ct] ??= []).push(e);
});

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

references

see also

implementation reference