PerformanceResourceTiming.contentEncoding — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.contentEncoding

Beschreibung

Die schreibgeschützte Eigenschaft contentEncoding eines PerformanceResourceTiming-Eintrags liefert die Inhaltskodierung der geladenen Ressource als String. Der Wert entspricht dem vom Server gesendeten Content-Encoding-Header, etwa "gzip", "br" (Brotli), "deflate" oder "zstd". Wurde die Ressource unkomprimiert übertragen oder darf die Kodierung nicht offengelegt werden, ist der Wert ein leerer String "".

Wofür ist das gut? Mit contentEncoding lässt sich direkt im Browser bzw. im Real-User-Monitoring (RUM) prüfen, ob Server und CDN Skripte, Stylesheets und API-Antworten wirklich komprimiert ausliefern. Zusammen mit encodedBodySize und decodedBodySize kannst du die tatsächliche Kompressionsrate berechnen und falsch konfigurierte Endpunkte finden, zum Beispiel große JSON-Antworten, die ohne gzip oder br übertragen werden.

Die Einträge bekommst du wie gewohnt über performance.getEntriesByType("resource") oder laufend über einen PerformanceObserver mit type: "resource". Weil die Eigenschaft neu ist, solltest du vor der Nutzung prüfen, ob sie vorhanden ist ("contentEncoding" in entry).

Rückgabewert

Typ

string

Beschreibung

Die Inhaltskodierung der Ressource, z. B. "gzip", "br", "deflate" oder "zstd". Ein leerer String "" bedeutet: keine Kodierung, unbekannte Kodierung oder aus Datenschutzgründen ausgeblendet (Cross-Origin).

Beispiele

Kodierung aller geladenen Ressourcen auflisten

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

for (const entry of entries) {
  // Nur verwenden, wenn der Browser die Eigenschaft kennt
  if (!("contentEncoding" in entry)) break;
  console.log(`${entry.contentEncoding || "(keine)"}\t${entry.name}`);
}

br https://example.com/app.js gzip https://example.com/styles.css (keine) https://example.com/logo.png

Unkomprimierte Text-Ressourcen per PerformanceObserver finden

const textTypes = new Set(["script", "link", "css", "fetch", "xmlhttprequest"]);

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const isText = textTypes.has(entry.initiatorType);
    // Nur größere Antworten ab 10 KB prüfen
    if (isText && entry.decodedBodySize > 10_240 && entry.contentEncoding === "") {
      console.warn(`Nicht komprimiert: ${entry.name} (${entry.decodedBodySize} Bytes)`);
    }
  }
});

observer.observe({ type: "resource", buffered: true });

Nicht komprimiert: https://example.com/api/products (84213 Bytes)

Kompressionsrate je Kodierung berechnen

const stats = {};

for (const entry of performance.getEntriesByType("resource")) {
  const enc = entry.contentEncoding;
  if (!enc || entry.decodedBodySize === 0) continue;
  stats[enc] ??= { encoded: 0, decoded: 0 };
  stats[enc].encoded += entry.encodedBodySize;
  stats[enc].decoded += entry.decodedBodySize;
}

for (const [enc, { encoded, decoded }] of Object.entries(stats)) {
  const ratio = ((1 - encoded / decoded) * 100).toFixed(1);
  console.log(`${enc}: ${ratio} % gespart`);
}

br: 78.4 % gespart gzip: 71.2 % gespart

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft ist neu und bisher nur in Chromium-basierten Browsern verfügbar. Firefox und Safari liefern undefined. Prüfe deshalb vorher mit "contentEncoding" in entry.
Cross-Origin: Bei Ressourcen von fremden Origins ohne CORS bzw. ohne passenden Timing-Allow-Origin-Header ist der Wert aus Datenschutzgründen ein leerer String. Ein leerer String heißt also nicht automatisch, dass die Ressource unkomprimiert war.
Der Browser meldet nur Kodierungen, die er kennt, zum Beispiel gzip, br, deflate oder zstd. Bei unbekannten Werten liefert er einen leeren String.
Kommt die Ressource aus dem Cache (z. B. Memory-Cache), können die Angaben fehlen oder unvollständig sein. Prüfe bei Bedarf zusätzlich transferSize und deliveryType.
Der Puffer für Resource-Timing-Einträge ist standardmäßig begrenzt (meist 250 Einträge). Bei vielen Ressourcen kannst du ihn mit performance.setResourceTimingBufferSize() vergrößern.

Siehe auch

PerformanceResourceTiming.contentType PerformanceResourceTiming.connectEnd PerformanceResourceTiming.connectStart PerformanceResourceTiming.serverTiming PerformanceResourceTiming.redirectEnd