Performance Timeline: Ein umfassender Leitfaden zur Metrikerfassung

In der heutigen schnelllebigen digitalen Welt ist die Leistung von Websites von größter Bedeutung. Benutzer erwarten, dass Websites schnell laden und sofort reagieren. Eine langsame Website kann zu Frustration, abgebrochenen Sitzungen und letztendlich zu Umsatzeinbußen führen. Glücklicherweise bieten moderne Webbrowser leistungsstarke Werkzeuge zur Messung und Analyse der Website-Performance. Eines der wertvollsten dieser Werkzeuge ist die Performance Timeline API.

Dieser umfassende Leitfaden wird die Performance Timeline API im Detail untersuchen und alles von ihren grundlegenden Konzepten bis hin zu fortgeschrittenen Techniken zur Erfassung und Analyse von Leistungsmetriken abdecken. Wir werden uns mit den verschiedenen Arten von Performance-Einträgen befassen, zeigen, wie man die API effektiv nutzt, und praktische Beispiele geben, die Ihnen bei der Optimierung der Leistung Ihrer Website helfen.

Was ist die Performance Timeline API?

Die Performance Timeline API ist eine Reihe von JavaScript-Schnittstellen, die Zugriff auf leistungsbezogene Daten bieten, die vom Browser gesammelt werden. Sie ermöglicht es Entwicklern, verschiedene Aspekte der Website-Performance zu messen, wie zum Beispiel:

• Seitenladezeit
• Ladezeit von Ressourcen (Bilder, Skripte, Stylesheets)
• User-Timing-Messungen
• Bildrate und Rendering-Leistung
• Speichernutzung

Durch das Sammeln und Analysieren dieser Daten können Entwickler Leistungsengpässe identifizieren und Optimierungen implementieren, um die Benutzererfahrung zu verbessern. Die API bietet eine standardisierte Möglichkeit, auf Leistungsdaten zuzugreifen, was den Aufbau von browserübergreifenden Tools zur Leistungsüberwachung erleichtert.

Schlüsselkonzepte und Schnittstellen

Die Performance Timeline API dreht sich um einige Schlüsselkonzepte und Schnittstellen:

• Performance Timeline: Repräsentiert die Zeitleiste der Leistungsereignisse, die während der Lebensdauer einer Webseite aufgetreten sind. Sie ist der zentrale Punkt für den Zugriff auf Leistungsdaten.
• Performance Entry: Repräsentiert ein einzelnes Leistungsereignis, wie z.B. das Laden einer Ressource oder eine benutzerdefinierte Zeitmessung.
• Performance Observer: Ermöglicht es Entwicklern, die Performance Timeline auf neue Leistungseinträge zu überwachen und in Echtzeit darauf zu reagieren.
• `performance`-Objekt: Das globale Objekt (`window.performance`), das den Zugriff auf die Performance Timeline und zugehörige Methoden ermöglicht.

Das `performance`-Objekt

Das `performance`-Objekt ist der Ausgangspunkt für die Interaktion mit der Performance Timeline API. Es bietet Methoden zum Abrufen von Leistungseinträgen, zum Löschen der Zeitleiste und zum Erstellen von Performance Observers. Einige der am häufigsten verwendeten Methoden sind:

• `performance.getEntries()`: Gibt ein Array aller Leistungseinträge in der Zeitleiste zurück.
• `performance.getEntriesByName(name, entryType)`: Gibt ein Array von Leistungseinträgen mit einem bestimmten Namen und Eintragstyp zurück.
• `performance.getEntriesByType(entryType)`: Gibt ein Array von Leistungseinträgen eines bestimmten Typs zurück.
• `performance.clearMarks(markName)`: Löscht Leistungsmarkierungen mit einem bestimmten Namen.
• `performance.clearMeasures(measureName)`: Löscht Leistungsmessungen mit einem bestimmten Namen.
• `performance.now()`: Gibt einen hochauflösenden Zeitstempel zurück, typischerweise in Millisekunden, der die seit dem Navigationsstart vergangene Zeit darstellt. Dies ist entscheidend für die Messung von Dauern.

Performance Entry-Typen

Die Performance Timeline API definiert verschiedene Arten von Leistungseinträgen, von denen jeder einen bestimmten Typ von Leistungsereignis darstellt. Einige der wichtigsten Eintragstypen sind:

• `navigation`: Repräsentiert das Navigation-Timing für einen Seitenladevorgang, einschließlich DNS-Lookup-, TCP-Verbindungs-, Anfrage- und Antwortzeiten.
• `resource`: Repräsentiert das Laden einer bestimmten Ressource, wie z. B. eines Bildes, Skripts oder Stylesheets.
• `mark`: Repräsentiert einen benutzerdefinierten Zeitstempel in der Zeitleiste.
• `measure`: Repräsentiert eine benutzerdefinierte Dauer in der Zeitleiste, berechnet zwischen zwei Markierungen.
• `paint`: Repräsentiert die Zeit, die der Browser benötigt, um den ersten Inhalt auf dem Bildschirm darzustellen (First Paint) und den ersten bedeutungsvollen Inhalt (First Contentful Paint).
• `longtask`: Repräsentiert Aufgaben, die den Hauptthread für einen längeren Zeitraum blockieren (typischerweise länger als 50 ms), was potenziell zu UI-Ruckeln führen kann.
• `event`: Repräsentiert ein Browser-Ereignis, wie einen Mausklick oder Tastendruck.
• `layout-shift`: Repräsentiert unerwartete Verschiebungen im Seitenlayout, die die Benutzererfahrung stören können (Cumulative Layout Shift).
• `largest-contentful-paint`: Repräsentiert die Zeit, die benötigt wird, bis das größte Inhaltselement im Ansichtsfenster sichtbar wird.

Erfassung von Leistungsmetriken

Es gibt mehrere Möglichkeiten, Leistungsmetriken mit der Performance Timeline API zu erfassen. Die gebräuchlichsten Ansätze sind:

• Direktes Abrufen von Einträgen aus der Zeitleiste: Verwendung von `performance.getEntries()`, `performance.getEntriesByName()` oder `performance.getEntriesByType()`, um spezifische Leistungseinträge abzurufen.
• Verwendung eines Performance Observers: Überwachung der Zeitleiste auf neue Einträge und Reaktion darauf in Echtzeit.

Einträge direkt abrufen

Der einfachste Weg, Leistungsmetriken zu sammeln, besteht darin, Einträge direkt aus der Zeitleiste abzurufen. Dies ist nützlich, um Daten zu sammeln, nachdem ein bestimmtes Ereignis eingetreten ist, z. B. nachdem die Seite geladen wurde oder nachdem ein Benutzer mit einem bestimmten Element interagiert hat.

Hier ist ein Beispiel, wie man alle Ressourceneinträge aus der Zeitleiste abruft:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Ressource: ${entry.name}, Dauer: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Dieser Code ruft alle Einträge vom Typ "resource" ab und gibt den Namen und die Dauer jeder Ressource in der Konsole aus.

Verwendung eines Performance Observers

Ein Performance Observer ermöglicht es Ihnen, die Performance Timeline auf neue Leistungseinträge zu überwachen und in Echtzeit darauf zu reagieren. Dies ist besonders nützlich, um Daten zu sammeln, sobald sie verfügbar werden, ohne die Zeitleiste wiederholt abfragen zu müssen.

Hier ist ein Beispiel für die Verwendung eines Performance Observers zur Überwachung neuer Ressourceneinträge:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Ressource geladen: ${entry.name}, Dauer: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Dieser Code erstellt einen Performance Observer, der auf neue Einträge vom Typ "resource" wartet. Wenn ein neuer Ressourceneintrag zur Zeitleiste hinzugefügt wird, wird die Callback-Funktion des Observers ausgeführt und gibt den Namen und die Dauer der Ressource in der Konsole aus. Die Methode `observer.observe()` gibt an, welche Eintragstypen der Observer überwachen soll.

Messen des User Timings

Die Performance Timeline API ermöglicht es Ihnen auch, Ihre eigenen benutzerdefinierten Leistungsmetriken mit den Eintragstypen `mark` und `measure` zu definieren. Dies ist nützlich, um die Zeit zu messen, die für die Ausführung bestimmter Teile Ihrer Anwendung benötigt wird, wie z. B. das Rendern einer Komponente oder die Verarbeitung von Benutzereingaben.

Um das User Timing zu messen, erstellen Sie zuerst eine `mark`, um den Anfang und das Ende des Abschnitts zu markieren, den Sie messen möchten. Dann erstellen Sie eine `measure`, um die Dauer zwischen den beiden Markierungen zu berechnen.

Hier ist ein Beispiel, wie man die Zeit misst, die zum Rendern einer Komponente benötigt wird:

            
performance.mark("component-render-start");

// Code zum Rendern der Komponente

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Renderzeit der Komponente: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Dieser Code erstellt zwei Markierungen, `component-render-start` und `component-render-end`, vor und nach dem Code, der die Komponente rendert. Dann erstellt er eine Messung namens `component-render-time`, um die Dauer zwischen den beiden Markierungen zu berechnen. Schließlich ruft er den Messeintrag aus der Zeitleiste ab und gibt die Dauer in der Konsole aus.

Analyse von Leistungsmetriken

Sobald Sie Leistungsmetriken gesammelt haben, müssen Sie diese analysieren, um Leistungsengpässe zu identifizieren und Optimierungen zu implementieren. Es gibt mehrere Tools und Techniken, die Sie für diesen Zweck verwenden können:

• Browser-Entwicklertools: Die meisten modernen Webbrowser bieten integrierte Entwicklertools, mit denen Sie Leistungsdaten visualisieren und analysieren können. Diese Tools umfassen in der Regel ein Performance-Panel, das eine Zeitleiste von Leistungsereignissen anzeigt, sowie Werkzeuge zur Profilerstellung von JavaScript-Code und zur Analyse der Speichernutzung.
• Leistungsüberwachungstools: Es gibt viele Drittanbieter-Tools zur Leistungsüberwachung, die Ihnen beim Sammeln, Analysieren und Visualisieren von Leistungsdaten helfen können. Diese Tools bieten oft erweiterte Funktionen wie Echtzeitüberwachung, Anomalieerkennung und automatisierte Berichterstattung. Beispiele sind New Relic, Datadog und Sentry.
• Web Vitals: Googles Web Vitals-Initiative bietet eine Reihe von Metriken, die als wesentlich für die Messung der Benutzererfahrung gelten. Zu diesen Metriken gehören Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Die Überwachung dieser Metriken kann Ihnen helfen, häufige Leistungsprobleme zu erkennen und zu beheben.

Verwendung der Browser-Entwicklertools

Browser-Entwicklertools sind eine leistungsstarke und leicht verfügbare Ressource zur Leistungsanalyse. So können Sie das Performance-Panel in den Chrome-Entwicklertools verwenden (andere Browser haben ähnliche Funktionalitäten):

1. Entwicklertools öffnen: Klicken Sie mit der rechten Maustaste auf die Webseite und wählen Sie „Untersuchen“ oder drücken Sie F12.
2. Zum Performance-Panel navigieren: Klicken Sie auf den Tab „Performance“.
3. Aufzeichnung starten: Klicken Sie auf die Aufnahmeschaltfläche (normalerweise ein Kreis), um die Erfassung von Leistungsdaten zu starten.
4. Mit der Seite interagieren: Führen Sie die Aktionen aus, die Sie analysieren möchten, wie z. B. das Laden der Seite, das Klicken auf Schaltflächen oder das Scrollen.
5. Aufzeichnung stoppen: Klicken Sie auf die Stopp-Schaltfläche, um die Aufzeichnung zu beenden.
6. Die Zeitleiste analysieren: Das Performance-Panel zeigt eine Zeitleiste von Leistungsereignissen an, einschließlich Ladezeiten, JavaScript-Ausführung, Rendering und Painting.

Die Zeitleiste bietet detaillierte Informationen zu jedem Ereignis, einschließlich seiner Dauer, Startzeit und Beziehung zu anderen Ereignissen. Sie können hinein- und herauszoomen, Ereignisse nach Typ filtern und einzelne Ereignisse untersuchen, um weitere Informationen zu erhalten. Die Tabs „Bottom-Up“, „Call Tree“ und „Event Log“ bieten verschiedene Perspektiven auf die Daten, sodass Sie Leistungsengpässe identifizieren und Ihren Code optimieren können.

Web Vitals: Messung der Benutzererfahrung

Web Vitals sind eine Reihe von Metriken, die von Google definiert wurden, um die Benutzererfahrung auf einer Website zu messen. Die Konzentration auf diese Metriken kann die Benutzerzufriedenheit und das SEO-Ranking erheblich verbessern.

• Largest Contentful Paint (LCP): Misst die Zeit, die benötigt wird, bis das größte Inhaltselement im Ansichtsfenster sichtbar wird. Ein guter LCP-Wert liegt bei 2,5 Sekunden oder weniger.
• First Input Delay (FID): Misst die Zeit, die der Browser benötigt, um auf die erste Benutzerinteraktion zu reagieren (z. B. das Klicken auf eine Schaltfläche oder das Tippen auf einen Link). Ein guter FID-Wert liegt bei 100 Millisekunden oder weniger.
• Cumulative Layout Shift (CLS): Misst das Ausmaß unerwarteter Layoutverschiebungen, die auf der Seite auftreten. Ein guter CLS-Wert liegt bei 0,1 oder weniger.

Sie können Web Vitals mit verschiedenen Tools messen, darunter:

• Chrome User Experience Report (CrUX): Bietet reale Leistungsdaten für Websites basierend auf anonymisierten Chrome-Benutzerdaten.
• Lighthouse: Ein automatisiertes Tool, das die Leistung, Barrierefreiheit und SEO von Webseiten prüft.
• Web Vitals Extension: Eine Chrome-Erweiterung, die Web Vitals-Metriken in Echtzeit anzeigt, während Sie im Web surfen.
• PerformanceObserver API: Erfassen Sie Web Vitals-Daten direkt vom Browser, wenn Ereignisse auftreten.

Praktische Beispiele und Anwendungsfälle

Hier sind einige praktische Beispiele und Anwendungsfälle, wie Sie die Performance Timeline API zur Optimierung der Leistung Ihrer Website nutzen können:

• Identifizierung langsam ladender Ressourcen: Verwenden Sie den `resource`-Eintragstyp, um Bilder, Skripte und Stylesheets zu identifizieren, die lange zum Laden benötigen. Optimieren Sie diese Ressourcen, indem Sie sie komprimieren, ein Content Delivery Network (CDN) verwenden oder sie per Lazy-Loading laden. Zum Beispiel verlassen sich viele E-Commerce-Plattformen wie Shopify, Magento oder WooCommerce auf Bilder, um Produkte zu verkaufen. Die Optimierung des Bildladens mithilfe von Performance-Timeline-Daten verbessert das Kundenerlebnis, insbesondere für mobile Benutzer.
• Messung der JavaScript-Ausführungszeit: Verwenden Sie die `mark`- und `measure`-Eintragstypen, um die Zeit zu messen, die für die Ausführung bestimmter JavaScript-Funktionen benötigt wird. Identifizieren Sie langsam laufende Funktionen und optimieren Sie sie durch effizientere Algorithmen, das Cachen von Ergebnissen oder das Verschieben der Ausführung auf einen späteren Zeitpunkt.
• Erkennung langer Aufgaben: Verwenden Sie den `longtask`-Eintragstyp, um Aufgaben zu identifizieren, die den Hauptthread für einen längeren Zeitraum blockieren. Teilen Sie diese Aufgaben in kleinere Stücke auf oder verschieben Sie sie in einen Hintergrundthread, um UI-Ruckeln zu vermeiden.
• Überwachung von First Contentful Paint (FCP) und Largest Contentful Paint (LCP): Verwenden Sie die `paint`- und `largest-contentful-paint`-Eintragstypen, um die Zeit zu überwachen, die benötigt wird, bis der erste Inhalt und der größte Inhalt auf dem Bildschirm erscheinen. Optimieren Sie den kritischen Rendering-Pfad, um diese Metriken zu verbessern.
• Analyse des Cumulative Layout Shift (CLS): Verwenden Sie den `layout-shift`-Eintragstyp, um Elemente zu identifizieren, die unerwartete Layoutverschiebungen verursachen. Reservieren Sie Platz für diese Elemente oder verwenden Sie die `transform`-Eigenschaft, um sie zu animieren, ohne Layoutverschiebungen zu verursachen.

Fortgeschrittene Techniken

Sobald Sie ein solides Verständnis der Grundlagen der Performance Timeline API haben, können Sie einige fortgeschrittene Techniken erkunden, um die Leistung Ihrer Website weiter zu optimieren:

• Real User Monitoring (RUM): Sammeln Sie Leistungsdaten von echten Benutzern im Feld, um ein genaueres Bild von der Leistung Ihrer Website zu erhalten. Verwenden Sie ein RUM-Tool oder implementieren Sie Ihre eigene benutzerdefinierte RUM-Lösung mit der Performance Timeline API. Diese Daten können dann verwendet werden, um regionale Leistungsunterschiede festzustellen. Beispielsweise kann eine in den USA gehostete Website in Asien aufgrund von Netzwerklatenz langsamere Ladezeiten aufweisen.
• Synthetische Überwachung: Verwenden Sie synthetische Überwachung, um Benutzerinteraktionen zu simulieren und die Leistung in einer kontrollierten Umgebung zu messen. Dies kann Ihnen helfen, Leistungsprobleme zu erkennen, bevor sie echte Benutzer betreffen.
• Automatisierte Leistungstests: Integrieren Sie Leistungstests in Ihre Continuous Integration/Continuous Deployment (CI/CD)-Pipeline, um Leistungsregressionen automatisch zu erkennen. Tools wie Lighthouse CI können verwendet werden, um diesen Prozess zu automatisieren.
• Performance-Budgets: Legen Sie Performance-Budgets für Schlüsselmetriken fest, wie z. B. Seitenladezeit, Ressourcengröße und JavaScript-Ausführungszeit. Verwenden Sie automatisierte Tools, um diese Budgets zu überwachen und Sie zu benachrichtigen, wenn sie überschritten werden.

Browserübergreifende Kompatibilität

Die Performance Timeline API wird von modernen Webbrowsern wie Chrome, Firefox, Safari und Edge weitgehend unterstützt. Es kann jedoch einige Unterschiede in der Implementierung und im Verhalten der API zwischen verschiedenen Browsern geben.

Um die browserübergreifende Kompatibilität zu gewährleisten, ist es wichtig, Ihren Code in verschiedenen Browsern zu testen und die Funktionserkennung (Feature Detection) zu verwenden, um die Funktionalität bei fehlender API-Unterstützung ordnungsgemäß zu reduzieren. Bibliotheken wie `modernizr` können bei der Funktionserkennung helfen.

Best Practices

Hier sind einige Best Practices für die Verwendung der Performance Timeline API:

• Verwenden Sie Performance Observer für die Echtzeitüberwachung: Performance Observer bieten eine effizientere Möglichkeit, Leistungsdaten zu sammeln, als die Zeitleiste wiederholt abzufragen.
• Achten Sie auf die Leistungsauswirkungen der Datenerfassung: Das Sammeln von zu vielen Daten kann sich negativ auf die Leistung Ihrer Website auswirken. Sammeln Sie nur die Daten, die Sie benötigen, und vermeiden Sie aufwändige Operationen in der Callback-Funktion des Performance Observers.
• Verwenden Sie aussagekräftige Namen für Markierungen und Messungen: Dies erleichtert die Analyse der Daten und die Identifizierung von Leistungsengpässen.
• Testen Sie Ihren Code in verschiedenen Browsern: Stellen Sie die browserübergreifende Kompatibilität sicher, indem Sie Ihren Code in verschiedenen Browsern testen und die Funktionserkennung verwenden.
• Kombinieren Sie mit anderen Optimierungstechniken: Die Performance Timeline API hilft bei der Messung und Identifizierung von Problemen. Verwenden Sie sie in Verbindung mit etablierten Best Practices zur Web-Optimierung (Bildoptimierung, Minifizierung, CDN-Nutzung) für ganzheitliche Leistungsverbesserungen.

Fazit

Die Performance Timeline API ist ein leistungsstarkes Werkzeug zur Messung und Analyse der Website-Performance. Durch das Verständnis der Schlüsselkonzepte und Schnittstellen der API können Sie wertvolle Leistungsmetriken sammeln und diese zur Identifizierung von Leistungsengpässen und zur Implementierung von Optimierungen nutzen. Indem Sie sich auf Web Vitals konzentrieren und fortgeschrittene Techniken wie RUM und automatisierte Leistungstests implementieren, können Sie eine schnellere, flüssigere und angenehmere Benutzererfahrung bieten. Die Nutzung der Performance Timeline API und die Integration der Leistungsanalyse in Ihren Entwicklungsworkflow werden zu erheblichen Verbesserungen der Leistung Ihrer Website und der Benutzerzufriedenheit in der heutigen leistungsorientierten Webumgebung führen.