PerformanceResourceTiming.contentType — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.contentType

Beschreibung

Die Eigenschaft contentType eines PerformanceResourceTiming-Eintrags gibt an, welchen Inhaltstyp die geladene Ressource hatte. Der Wert stammt aus dem Content-Type-Antwortheader, wird aber vom Browser vereinfacht: Parameter wie charset=utf-8 fallen weg, und verwandte Typen werden zusammengefasst. Alle JavaScript-MIME-Typen werden zum Beispiel zu text/javascript, alle JSON-Typen zu application/json.

Nützlich ist die Eigenschaft vor allem beim Real User Monitoring (RUM). Damit lassen sich Ladezeiten und Übertragungsgrößen nach Ressourcenart auswerten, etwa um zu sehen, wie viele Bytes Skripte, Stylesheets oder Bilder zusammen ausmachen. Das ist genauer als eine Einordnung über initiatorType, denn initiatorType beschreibt nur, wie die Ressource angefordert wurde (z. B. fetch, link, img), und nicht, was tatsächlich zurückkam.

Kennt der Browser den MIME-Typ nicht, fehlt der Header oder werden die Informationen aus Sicherheitsgründen zurückgehalten, ist der Wert ein leerer String "". Die Eigenschaft ist schreibgeschützt.

Rückgabewert

Typ

string

Beschreibung

Der vereinfachte MIME-Typ der Ressource, z. B. "text/css", "text/javascript", "application/json" oder "image/svg+xml". Ist der Typ unbekannt oder nicht zugänglich, kommt ein leerer String "" zurück.

Beispiele

Inhaltstypen aller geladenen Ressourcen ausgeben

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

for (const entry of entries) {
  console.log(`${entry.contentType || '(unbekannt)'} – ${entry.name}`);
}

text/css – https://example.com/styles/main.css text/javascript – https://example.com/app.js application/json – https://example.com/api/user (unbekannt) – https://cdn.other.net/tracker.gif

Übertragene Bytes nach Inhaltstyp zusammenrechnen

const bytesByType = performance
  .getEntriesByType('resource')
  .reduce((acc, { contentType, transferSize }) => {
    const key = contentType || 'unbekannt';
    acc[key] = (acc[key] ?? 0) + transferSize;
    return acc;
  }, {});

console.table(bytesByType);

┌──────────────────┬────────┐ │ (index) │ Values │ ├──────────────────┼────────┤ │ text/css │ 18342 │ │ text/javascript │ 245118 │ │ image/webp │ 98120 │ │ unbekannt │ 0 │ └──────────────────┴────────┘

Langsame JSON-Antworten per PerformanceObserver erkennen (mit Feature-Erkennung)

const supportsContentType =
  'PerformanceResourceTiming' in window &&
  'contentType' in PerformanceResourceTiming.prototype;

if (supportsContentType) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.contentType === 'application/json' && entry.duration > 500) {
        console.warn(`Langsame API-Antwort (${Math.round(entry.duration)} ms):`, entry.name);
      }
    }
  });
  observer.observe({ type: 'resource', buffered: true });
} else {
  console.info('contentType wird in diesem Browser nicht unterstützt.');
}

// Beispielanfrage
await fetch('/api/reports?range=365');

Langsame API-Antwort (812 ms): https://example.com/api/reports?range=365

// Wichtig · Fallstricke

Browser-Kompatibilität: Bisher nur in Chromium-Browsern verfügbar (ab Version 129). Firefox und Safari kennen die Eigenschaft nicht, dort ist der Wert undefined. Vorher per 'contentType' in PerformanceResourceTiming.prototype prüfen.
Kein vollständiger Header: Der Wert ist absichtlich vereinfacht. text/html; charset=utf-8 wird zu text/html, und application/x-javascript wird zu text/javascript. Wer den genauen Header braucht, muss ihn über fetch() und response.headers.get('Content-Type') lesen.
Leerer String: Der Wert ist "", wenn der Browser den MIME-Typ nicht unterstützt, der Header fehlt oder ungültig ist, oder wenn der Browser die Angabe aus Datenschutzgründen zurückhält, etwa bei Cross-Origin-Antworten ohne CORS. Auswertungen sollten diesen Fall immer abdecken.
Kein Ersatz für initiatorType: Ein <link rel=\"preload\"> kann ein Skript laden, und ein fetch() kann ein Bild laden. contentType beschreibt die Antwort, initiatorType die Art der Anfrage.
Puffergröße: Standardmäßig speichert der Browser nur eine begrenzte Zahl von Ressourceneinträgen (oft 250). Bei vielen Anfragen performance.setResourceTimingBufferSize() erhöhen oder einen PerformanceObserver verwenden.

Siehe auch

PerformanceResourceTiming.connectEnd PerformanceResourceTiming.connectStart PerformanceResourceTiming.deliveryType PerformanceResourceTiming.initiatorType PerformanceResourceTiming.contentEncoding