v148 · Demo 2

Resource Breakdown Chart

Groups the page's resource timing entries by contentType, showing count and total transfer size per MIME type. Click a bar to see individual URLs.

⚠ PerformanceResourceTiming.contentType not available. Requires Chrome 148+.
Content-Type proportion count total

Click a bar to drill into individual resources.

how it works

const entries = performance.getEntriesByType('resource');

// Group by contentType (new in Chrome 148)
const groups = new Map();
for (const entry of entries) {
  const ct = entry.contentType || 'unknown';
  if (!groups.has(ct)) groups.set(ct, { count: 0, totalBytes: 0, entries: [] });
  const g = groups.get(ct);
  g.count++;
  g.totalBytes += entry.transferSize || 0;
  g.entries.push(entry);
}

// Sort by count descending
const sorted = [...groups.entries()].sort((a, b) => b[1].count - a[1].count);

see also

implementation reference

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