PerformanceResourceTiming.decodedBodySize — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.decodedBodySize

Beschreibung

Die Eigenschaft decodedBodySize eines PerformanceResourceTiming-Eintrags gibt an, wie groß der Antwortkörper einer Ressource ist, nachdem der Browser eine eventuelle Content-Encoding-Kodierung (z. B. gzip, br, deflate) entfernt hat. Dabei ist egal, ob die Daten aus dem Netz oder aus dem HTTP-Cache stammen. HTTP-Header zählen nicht dazu.

Zusammen mit encodedBodySize (Größe vor dem Dekodieren) und transferSize (tatsächlich über das Netz übertragene Bytes inklusive Header) lässt sich gut auswerten, wie effektiv die Kompression ist, welche Ressourcen besonders groß sind und ob eine Ressource aus dem Cache kam.

Typische Anwendungsfälle sind Real-User-Monitoring (RUM), Performance-Budgets im Browser (z. B. „kein Skript größer als 300 KB unkomprimiert“) und die Diagnose fehlender Serverkompression. Die Werte bekommt man über performance.getEntriesByType("resource") oder laufend über einen PerformanceObserver.

Rückgabewert

Typ

number

Beschreibung

Größe des dekodierten Antwortkörpers in Bytes (Oktetten) als nicht-negative Ganzzahl. Ist 0, wenn die Ressource eine Cross-Origin-Ressource ohne Timing-Allow-Origin-Header ist, die Anfrage fehlgeschlagen ist oder der Körper leer ist.

Beispiele

Größe aller geladenen Ressourcen auflisten

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

for (const entry of entries) {
  const kb = (entry.decodedBodySize / 1024).toFixed(1);
  console.log(`${entry.name}: ${kb} KB (dekodiert)`);
}

https://example.com/app.js: 412.3 KB (dekodiert) https://example.com/style.css: 58.7 KB (dekodiert)

Kompressionsrate pro Ressource berechnen

const report = performance.getEntriesByType('resource')
  .filter((e) => e.encodedBodySize > 0 && e.decodedBodySize > 0)
  .map((e) => ({
    url: e.name,
    encoded: e.encodedBodySize,
    decoded: e.decodedBodySize,
    ratio: `${((1 - e.encodedBodySize / e.decodedBodySize) * 100).toFixed(0)} %`
  }));

console.table(report);

// Ressourcen ohne erkennbare Kompression finden
const uncompressed = report.filter((r) => r.encoded === r.decoded && r.decoded > 1024);
console.log('Vermutlich unkomprimiert:', uncompressed.map((r) => r.url));

Vermutlich unkomprimiert: ['https://example.com/data.json']

Performance-Budget mit PerformanceObserver überwachen

const BUDGET_BYTES = 300 * 1024; // 300 KB unkomprimiert

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.initiatorType === 'script' && entry.decodedBodySize > BUDGET_BYTES) {
      console.warn(
        `Budget überschritten: ${entry.name} (${Math.round(entry.decodedBodySize / 1024)} KB)`
      );
    }
  }
});

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

Budget überschritten: https://example.com/vendor.js (812 KB)

Cache-Treffer erkennen

const [entry] = performance.getEntriesByName('https://example.com/logo.svg');

if (entry) {
  const fromCache = entry.transferSize === 0 && entry.decodedBodySize > 0;
  console.log(fromCache ? 'Aus dem Cache geladen' : 'Über das Netz geladen');
}

Aus dem Cache geladen

// Wichtig · Fallstricke

Cross-Origin-Ressourcen: Bei Ressourcen von fremden Origins ist der Wert 0, solange der Server keinen passenden Timing-Allow-Origin-Header schickt (z. B. Timing-Allow-Origin: * oder die eigene Origin). Das betrifft CDNs, Drittanbieter-Skripte und Schriften.
Nur der Körper: HTTP-Header sind nicht enthalten. Die Menge der übertragenen Bytes inklusive Header steht in transferSize.
Ohne Kompression sind decodedBodySize und encodedBodySize gleich groß.
Puffergröße: Der Puffer für Ressourcen-Einträge fasst standardmäßig etwa 250 Einträge. Bei vielen Anfragen solltest du performance.setResourceTimingBufferSize() aufrufen oder einen PerformanceObserver nutzen.
Bei Service-Worker-Antworten, abgebrochenen oder fehlgeschlagenen Anfragen kann der Wert je nach Browser 0 sein oder von der erwarteten Größe abweichen.
Funktioniert auch in Web Workern. Die Eigenschaft ist nur lesbar, Zuweisungen werden ignoriert.

Siehe auch

PerformanceResourceTiming.deliveryType PerformanceResourceTiming.encodedBodySize PerformanceResourceTiming.contentType PerformanceResourceTiming.transferSize PerformanceResourceTiming.serverTiming