Browser Performance API Integration (Resource Timing)
Definition: Die Browser Performance API Integration nutzt das Resource Timing, um Ladezeiten einzelner Ressourcen präzise zu vermessen und im Kontext des Navigation Timings zu bewerten. Entwickler erhalten ein detailliertes Bild von DNS-Auflösung, Verbindungsaufbau und Antwortzeiten. So identifizieren sie Engpässe und Schwachstellen in der digitalen Experience objektiv und beheben sie gezielt.
Was leistet die Browser Performance API Integration?
Die Browser Performance API Integration ist kein einzelnes Werkzeug, sondern ein Zusammenspiel mehrerer Web-APIs. Im Zentrum steht dabei das Resource Timing. Es erfasst, wie lange der Browser für einzelne Ressourcen benötigt: vom Initialisieren der Anfrage bis zum letzten Byte der Antwort.
Diese Datenpunkte sind für die Optimierung digitaler Erlebnisse besonders wertvoll. Kennen Sie die genaue Latenz einer CSS-Datei oder eines Bildes, können Sie gezielt eingreifen. So unterscheiden Sie, ob ein Server langsam antwortet, ein CDN nicht greift oder eine Datei unnötig groß ist. Sie sehen also nicht nur das Symptom, sondern die Ursache.
Resource Timing im Detail: Kennzahlen verstehen
Jede erfasste Ressource wird als PerformanceResourceTiming-Objekt repräsentiert. Es enthält zahlreiche Zeitstempel. Diese lassen sich in Phasen gliedern. Die folgende Tabelle zeigt die wichtigsten Messpunkte:
| Metrik | Phase | Bedeutung |
|---|---|---|
| redirectStart / redirectEnd | Umleitung | Dauer von Weiterleitungen |
| domainLookupStart / domainLookupEnd | DNS-Auflösung | Latenz des Nameservers |
| connectStart / connectEnd | TCP-Verbindung | Aufbau der Verbindung |
| requestStart | Request-Beginn | Zeitpunkt, an dem die Anfrage startet |
| responseStart | Erste Antwort | Wird für TTFB herangezogen |
| responseEnd | Antwortende | Kompletter Abschluss der Übertragung |
| transferSize | Übertragene Bytes | Erkennung von Cache-Nutzung und Kompression |
Daraus ergibt sich die Gesamtdauer: Der Zeitpunkt startTime markiert den Beginn, responseEnd das Ende. Besonders aussagekräftig ist die Zeit bis zum ersten Byte. Sie verrät, ob der Server schnell genug liefert.
Wichtig: Timing-Details für eine Ressource sind nur dann vollständig verfügbar, wenn die Ressource gleichen Ursprungs ist oder der Server bei Cross-Origin-Aufrufen den Timing-Allow-Origin-Header setzt. Andernfalls werden viele Zeitstempel auf null gesetzt. Eine HTTPS-Verbindung ist dafür keine direkte Voraussetzung, erhöht aber die Zuverlässigkeit. Datenschutzrichtlinien können den Zugriff ebenfalls einschränken.
Integration mit PerformanceObserver und Buffer
Die modernste Methode heißt PerformanceObserver. Ihr Vorteil: Sie reagiert asynchron auf neue Einträge, ohne das Hauptmodul unnötig zu belasten. Ein kurzes Beispiel:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.name, entry.responseEnd - entry.startTime);
}
});
observer.observe({ type: "resource", buffered: true });
Interessant ist die Option „buffered“. Sie stellt sicher, dass bereits vor dem Observing gestartete Ressourcen erfasst werden. Das ist besonders bei Single-Page-Anwendungen wichtig. Denn dort laufen viele Requests, bevor der erste Observer installiert ist.
Alternativ lässt sich der Performance-Puffer synchron auslesen. Ein Aufruf von performance.getEntriesByType(„resource“) liefert dieselben Daten. Diese Methode ist einfacher, aber weniger flexibel. Für kontinuierliche Monitoring-Lösungen bevorzugen Sie den PerformanceObserver.
Praxis-Tipp: Web Vitals und LCP optimieren
Die Browser Performance API Integration spielt eine zentrale Rolle beim Messen von Core Web Vitals. Besonders der Largest Contentful Paint (LCP) profitiert von präzisen Ressourcen-Laufzeiten. Ist ein LCP-Bild zu langsam, zeigt das Resource Timing genau, welche Phase die Verzögerung verursacht.
Resource Timing liefert für Same-Origin-Ressourcen alle Timing-Details. Für Cross-Origin-Aufrufe muss der Server den Timing-Allow-Origin-Header setzen, sonst bleiben viele Zeitstempel verborgen.
Ein sinnvoller Workflow: Metriken erfassen, über mehrere Seiten aggregieren und mit einem Performance-Budget bewerten. Liegt die Zeit bis zum ersten Byte über einem Schwellwert, ist Server-Tuning oder eine andere CDN-Strategie gefragt. Liegt die Latenz in der Übertragung, helfen Kompression, kleinere Dateien oder preload-Hinweise.
Prüfen Sie außerdem, ob Drittanbieter-Skripte unnötige Ressourcen laden. Resource Timing macht auch versteckte Anfragen sichtbar. Die Integration in ein Monitoring-Tool ist unkompliziert, sobald Sie die Daten strukturiert erfassen. So bleibt die digitale Experience messbar und steuerbar.
« Back to Glossary Index