PerformanceResourceTiming.transferSize — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.transferSize

Beschreibung

Die schreibgeschützte Eigenschaft transferSize eines PerformanceResourceTiming-Eintrags gibt an, wie viele Bytes für eine Ressource tatsächlich über das Netzwerk übertragen wurden. Der Wert umfasst die Antwort-Header und den Antwortkörper in kodierter Form (also z. B. nach gzip- oder Brotli-Kompression), so wie er beim Client ankommt.

Damit eignet sich die Eigenschaft gut für Performance-Monitoring (RUM): Man kann ermitteln, wie viel Datenvolumen eine Seite verursacht, welche Skripte oder Bilder besonders groß sind und ob Ressourcen aus dem Cache kamen. Ein Wert von 0 bei gleichzeitig positivem decodedBodySize deutet in der Regel auf einen Treffer im lokalen HTTP-Cache hin.

Zum Vergleich: encodedBodySize enthält nur den komprimierten Körper ohne Header, decodedBodySize den entpackten Körper. Die Differenz transferSize - encodedBodySize ergibt näherungsweise den Header-Overhead (bei Cache-Revalidierung mit 304 fast ausschließlich Header).

Rückgabewert

Typ

number

Beschreibung

Anzahl der übertragenen Bytes (Header + kodierter Körper). 0 bei Cache-Treffern oder bei Cross-Origin-Ressourcen ohne Timing-Allow-Origin-Header.

Beispiele

Gesamtes Transfervolumen der Seite berechnen

const entries = performance.getEntriesByType('resource');
const total = entries.reduce((sum, e) => sum + e.transferSize, 0);
console.log(`Übertragen: ${(total / 1024).toFixed(1)} KiB in ${entries.length} Ressourcen`);

Übertragen: 842.3 KiB in 37 Ressourcen

Cache-Treffer erkennen

for (const e of performance.getEntriesByType('resource')) {
  if (e.transferSize === 0 && e.decodedBodySize > 0) {
    console.log('Aus dem Cache:', e.name);
  } else if (e.transferSize > 0 && e.encodedBodySize > 0 && e.transferSize - e.encodedBodySize < 1000 && e.responseStatus === 304) {
    console.log('Revalidiert (304):', e.name);
  }
}

Aus dem Cache: https://example.com/app.js

Große Ressourcen laufend mit PerformanceObserver melden

const LIMIT = 200 * 1024; // 200 KiB

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.transferSize > LIMIT) {
      console.warn(`Große Ressource: ${entry.name} (${Math.round(entry.transferSize / 1024)} KiB)`);
    }
  }
});

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

Große Ressource: https://example.com/hero.jpg (512 KiB)

// Wichtig · Fallstricke

Cross-Origin: Für Ressourcen fremder Herkunft liefert transferSize 0, sofern der Server nicht den Header Timing-Allow-Origin sendet. Ein Wert von 0 bedeutet also nicht zwingend einen Cache-Treffer.
Datenschutz: Die Einschränkung verhindert, dass Seiten über Größenunterschiede Rückschlüsse auf den Zustand anderer Websites (z. B. Login-Status) ziehen.
Service-Worker-Antworten und Speicher-Caches können abweichende Werte liefern; der Wert spiegelt nicht zwingend die echten Netzwerk-Bytes auf Transportebene (TLS, TCP-Overhead) wider.
Der Ressourcen-Puffer ist standardmäßig auf 250 Einträge begrenzt – bei vielen Anfragen performance.setResourceTimingBufferSize() oder einen PerformanceObserver nutzen.
Safari unterstützt die Eigenschaft erst ab Version 16.4; in älteren Versionen ist sie undefined.

Siehe auch

PerformanceElementTiming.renderTime PerformanceResourceTiming.decodedBodySize PerformanceResourceTiming.connectEnd PerformanceResourceTiming.contentType PerformanceResourceTiming.deliveryType