PerformanceResourceTiming.renderBlockingStatus — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.renderBlockingStatus

Beschreibung

Die Eigenschaft renderBlockingStatus eines PerformanceResourceTiming-Eintrags gibt als Zeichenkette an, ob die Ressource das erste Rendern der Seite blockiert hat. Mögliche Werte sind "blocking" und "non-blocking".

Als render-blockierend gelten vor allem Ressourcen, die der Browser vor dem ersten Zeichnen laden und verarbeiten muss, zum Beispiel:

Stylesheets per <link rel="stylesheet"> im <head> (ohne abweichendes media-Attribut, das nicht zutrifft),
klassische Skripte per <script src> im <head> ohne async, defer oder type="module",
Ressourcen, die ausdrücklich mit blocking="render" markiert sind.

Die Eigenschaft ist sehr nützlich für die Performance-Optimierung und für Real User Monitoring (RUM): Du findest damit genau die Dateien, die First Contentful Paint (FCP) und Largest Contentful Paint (LCP) verzögern, und kannst sie gezielt kleiner machen, mit async/defer laden, inline einbetten (Critical CSS) oder vorab laden.

Rückgabewert

Typ

"blocking" | "non-blocking"

Beschreibung

"blocking", wenn die Ressource das Rendern blockiert hat, sonst "non-blocking". In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Render-blockierende Ressourcen auflisten

const blocking = performance
  .getEntriesByType('resource')
  .filter((entry) => entry.renderBlockingStatus === 'blocking');

for (const entry of blocking) {
  console.log(`${entry.initiatorType}: ${entry.name} – ${entry.duration.toFixed(1)} ms`);
}

link: https://example.com/css/main.css – 84.3 ms script: https://example.com/js/vendor.js – 132.7 ms

Laufende Beobachtung mit PerformanceObserver

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.renderBlockingStatus === 'blocking') {
      console.warn('Render-blockierend:', entry.name);
    }
  }
});

// buffered: true liefert auch Einträge, die schon vor dem Registrieren entstanden sind
observer.observe({ type: 'resource', buffered: true });

Render-blockierend: https://example.com/css/main.css

RUM-Bericht mit Feature-Erkennung senden

const supportsStatus = 'renderBlockingStatus' in PerformanceResourceTiming.prototype;

if (supportsStatus) {
  const entries = performance.getEntriesByType('resource');
  const blockingTime = entries
    .filter((e) => e.renderBlockingStatus === 'blocking')
    .reduce((sum, e) => Math.max(sum, e.responseEnd), 0);

  navigator.sendBeacon('/rum', JSON.stringify({
    url: location.href,
    blockingCount: entries.filter((e) => e.renderBlockingStatus === 'blocking').length,
    lastBlockingResponseEnd: Math.round(blockingTime)
  }));
} else {
  console.info('renderBlockingStatus wird nicht unterstützt.');
}

// Wichtig · Fallstricke

Browser-Kompatibilität: Nur in Chromium-Browsern (Chrome/Edge ab 107) verfügbar. Firefox und Safari unterstützen die Eigenschaft nicht, dort ist sie undefined. Deshalb immer per Feature-Erkennung prüfen, etwa mit 'renderBlockingStatus' in PerformanceResourceTiming.prototype.
Vergleiche nie nur mit !== 'blocking', wenn du nicht blockierende Ressourcen suchst. Sonst zählen nicht unterstützende Browser (undefined) fälschlich mit. Prüfe ausdrücklich auf 'non-blocking'.
Dynamisch per JavaScript eingefügte Skripte und Stylesheets, die nach dem ersten Rendern geladen werden, sowie async-/defer-Skripte und fetch()-Anfragen sind "non-blocking".
Der Resource-Timing-Puffer ist standardmäßig auf 250 Einträge begrenzt. Bei vielen Ressourcen erhöhst du ihn mit performance.setResourceTimingBufferSize() oder nutzt einen PerformanceObserver.
Bei Cross-Origin-Ressourcen ist renderBlockingStatus auch ohne Timing-Allow-Origin-Header verfügbar. Detaillierte Zeitwerte wie requestStart sind dann aber 0.

Siehe auch

PerformanceResourceTiming.initiatorType PerformanceResourceTiming.responseStatus PerformanceResourceTiming.redirectStart PerformanceResourceTiming.connectStart PerformanceResourceTiming.domainLookupStart