Resource timing

Abbildung 1. Ressourcenlade-Zeitstempel (Quelle).

Eine Anwendung kann Zeitstempel für die verschiedenen Phasen abrufen, die zum Laden einer Ressource verwendet werden. Die Zeitstempel, die diese API bereitstellt, sind:

1. startTime: Zeitstempel unmittelbar bevor der Ressourcenladeprozess beginnt.
2. redirectStart: Zeitstempel des Abrufs, der die Umleitung einleitet.
3. redirectEnd: Zeitstempel unmittelbar nach dem Empfang des letzten Bytes der Antwort auf die letzte Umleitung.
4. workerStart: Zeitstempel unmittelbar bevor der Service Worker-Thread gestartet wird.
5. fetchStart: Zeitstempel unmittelbar bevor der Browser beginnt, die Ressource abzurufen.
6. domainLookupStart: Zeitstempel unmittelbar bevor der Browser mit dem Domainnamen-Lookup für die Ressource beginnt.
7. domainLookupEnd: Zeitstempel unmittelbar nachdem der Browser den Domainnamen-Lookup für die Ressource abgeschlossen hat.
8. connectStart: Zeitstempel unmittelbar bevor der User-Agent beginnt, die Verbindung zum Server zur Abruf der Ressource herzustellen.
9. secureConnectionStart: Wenn die Ressource über eine sichere Verbindung geladen wird, Zeitstempel unmittelbar bevor der Browser den Handshake-Prozess startet, um die aktuelle Verbindung zu sichern.
10. connectEnd: Zeitstempel unmittelbar nachdem der Browser die Verbindung zum Server zur Abruf der Ressource hergestellt hat.
11. requestStart: Zeitstempel der Zeit unmittelbar bevor der Browser beginnt, die Ressource vom Server, Cache oder lokalen Ressource anzufordern.
12. responseStart: Zeitstempel unmittelbar nachdem der Browser das erste Byte der Antwort vom Server, Cache oder lokalen Ressource erhält.
13. responseEnd: Zeitstempel unmittelbar nachdem der Browser das letzte Byte der Ressource erhält oder unmittelbar bevor die Transportverbindung geschlossen wird, je nachdem, was zuerst eintritt.

Die PerformanceResourceTiming Schnittstelle verfügt über drei Eigenschaften, die zur Ermittlung von Größeninformationen einer Ressource verwendet werden können. Die transferSize Eigenschaft gibt die Größe (in Bytes) der abgerufenen Ressource einschließlich der Antwortkopfzeilen und des Antwortnutzlastkörpers zurück.

Die encodedBodySize Eigenschaft gibt die Größe (in Oktetten) der von der Anforderung (HTTP oder Cache) erhaltenen Nutzlastkörper vor dem Entfernen angewendeter Inhaltskodierungen zurück. decodedBodySize gibt die Größe (in Oktetten) der von der Anforderung (HTTP oder Cache) erhaltenen Nachrichtenkörper nach dem Entfernen angewendeter Inhaltskodierungen zurück.

Die PerformanceResourceTiming Schnittstelle bietet zusätzliche Ressourceninformationen. Konsultieren Sie die Referenzdokumentation für die vollständige Liste der Eigenschaften.

Die Informationen, die PerformanceResourceTiming Einträge liefern, werden häufig für Berechnungen wie die folgenden verwendet:

• Messen der TCP-Handshake-Zeit (connectEnd - connectStart)
• Messen der DNS-Lookup-Zeit (domainLookupEnd - domainLookupStart)
• Messen der Umleitungszeit (redirectEnd - redirectStart)
• Messen der Anforderungszeit (responseStart - requestStart)
• Messen der TLS-Negotiationszeit (requestStart - secureConnectionStart)
• Messen der Abrufzeit (ohne Umleitungen) (responseEnd - fetchStart)
• Messen der ServiceWorker-Verarbeitungszeit (fetchStart - workerStart)
• Überprüfen, ob Inhalte komprimiert wurden (decodedBodySize sollte nicht encodedBodySize sein)
• Überprüfen, ob lokale Caches getroffen wurden (transferSize sollte 0 sein)
• Überprüfen, ob moderne und schnelle Protokolle verwendet werden (nextHopProtocol sollte HTTP/2 oder HTTP/3 sein)
• Überprüfen, ob die richtigen Ressourcen render-blockierend sind (renderBlockingStatus)

Die PerformanceResourceTiming Referenzseiten enthalten Beispielcode für die Messung all dieser Metriken. Typischerweise sieht der Code zur Messung dieser Metriken folgendermaßen aus:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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

Wenn CORS wirksam ist, werden viele der Zeitmesswerte als Null zurückgegeben, es sei denn, die Zugriffspolitik des Servers erlaubt es, diese Werte zu teilen. Dies erfordert, dass der Server, der die Ressource bereitstellt, den Timing-Allow-Origin HTTP-Antwortheader mit einem Wert sendet, der den Ursprung oder die Ursprünge spezifiziert, die die eingeschränkten Zeitstempelwerte erhalten dürfen.

Die Eigenschaften, die standardmäßig als 0 zurückgegeben werden, wenn eine Ressource von einem anderen Ursprung als der der Webseite selbst geladen wird: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart und responseStart.

Um beispielsweise https://developer.mozilla.org zu ermöglichen, auf Ressourcentiming-Informationen zuzugreifen, sollte die Cross-Origin-Ressource senden:

Timing-Allow-Origin: https://developer.mozilla.org

Falls Ihre Website oder Anwendung mehr als 250 Ressourcen abruft und Sie mehr als 250 PerformanceResourceTiming Einträge aufzeichnen möchten, müssen Sie die Größe des Ressourcentiming-Puffers erhöhen.

Um die Größe des Leistungsressourcen-Datenpuffers des Browsers festzulegen, verwenden Sie die Methode Performance.setResourceTimingBufferSize(), und um den Leistungsressourcen-Datenpuffer des Browsers zu leeren, verwenden Sie die Methode Performance.clearResourceTimings().

Um benachrichtigt zu werden, wenn der Ressourcenzeitmesspuffer des Browsers voll ist, hören Sie auf das resourcetimingbufferfull Ereignis.

Der folgende Aufruf erlaubt 500 "resource"-Leistungseinträge in der Performance-Timeline des Browsers.

performance.setResourceTimingBufferSize(500);

Weitere Informationen finden Sie auch unter Verwalten von Puffergrößen.

• PerformanceResourceTiming
• Timing-Allow-Origin
• Performance.setResourceTimingBufferSize()
• Performance.clearResourceTimings()