PerformanceResourceTiming.encodedBodySize — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.encodedBodySize

Beschreibung

Die Eigenschaft encodedBodySize eines PerformanceResourceTiming-Eintrags gibt an, wie viele Bytes des Nutzlastkörpers (Body) beim Abruf über HTTP oder aus dem Cache empfangen wurden, bevor eine Inhaltskodierung (Content-Encoding, z. B. gzip, br, zstd) entfernt wurde. HTTP-Header sind darin nicht enthalten.

Damit eignet sie sich, um die tatsächlich übertragene Nutzlast einer Ressource zu messen, etwa zur Überwachung von Bundle-Größen, für Performance-Budgets oder um den Nutzen der Kompression zu beurteilen. Im Vergleich mit decodedBodySize (Größe nach dem Dekodieren) lässt sich das Kompressionsverhältnis berechnen; transferSize enthält zusätzlich die Header und ist bei Cache-Treffern 0.

Die Werte bekommt man über performance.getEntriesByType("resource") oder deutlich besser über einen PerformanceObserver mit dem Typ "resource", der auch später geladene Ressourcen erfasst.

Beispiele

Größen aller geladenen Ressourcen ausgeben

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

for (const entry of entries) {
  const kb = (entry.encodedBodySize / 1024).toFixed(1);
  console.log(`${entry.name}: ${kb} KiB übertragen`);
}

https://example.com/app.js: 42.3 KiB übertragen https://example.com/style.css: 8.7 KiB übertragen

Kompressionsverhältnis mit PerformanceObserver berechnen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const { name, encodedBodySize, decodedBodySize } = entry;
    if (encodedBodySize === 0) continue; // keine Daten (z. B. CORS)

    const ratio = decodedBodySize / encodedBodySize;
    console.log(`${name}: Faktor ${ratio.toFixed(2)} komprimiert`);
  }
});

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

https://example.com/app.js: Faktor 3.85 komprimiert

Performance-Budget für JavaScript prüfen

const BUDGET_BYTES = 170 * 1024; // 170 KiB komprimiert

const scripts = performance
  .getEntriesByType('resource')
  .filter((e) => e.initiatorType === 'script');

const total = scripts.reduce((sum, e) => sum + e.encodedBodySize, 0);

if (total > BUDGET_BYTES) {
  console.warn(`JS-Budget überschritten: ${(total / 1024).toFixed(0)} KiB`);
} else {
  console.log(`JS-Budget eingehalten: ${(total / 1024).toFixed(0)} KiB`);
}

JS-Budget eingehalten: 128 KiB

// Wichtig · Fallstricke

Cross-Origin: Bei Ressourcen von fremden Origins ist der Wert 0, sofern der Server keinen passenden Timing-Allow-Origin-Header sendet (z. B. Timing-Allow-Origin: *). Vor Berechnungen immer auf 0 prüfen, sonst droht Division durch null.
Keine Header: encodedBodySize zählt nur den Body. Für die Gesamtübertragung inklusive Header transferSize verwenden.
Cache: Bei Cache-Treffern bleibt encodedBodySize gefüllt, während transferSize 0 ist – so lassen sich Cache-Treffer erkennen.
Puffergröße: Der Ressourcen-Puffer ist standardmäßig begrenzt (meist 250 Einträge). Bei vielen Ressourcen performance.setResourceTimingBufferSize() erhöhen oder einen PerformanceObserver nutzen.
Unterstützung in allen modernen Browsern; auch in Web Workern und Node.js (über perf_hooks, eingeschränkt) verfügbar.

Siehe auch

PerformanceResourceTiming.contentEncoding PerformanceResourceTiming.decodedBodySize PerformanceResourceTiming.contentType PerformanceResourceTiming.transferSize PerformanceResourceTiming.deliveryType