Leistungsmessung
Die Leistungsmessung liefert einen wichtigen Indikator, der Ihnen hilft, den Erfolg Ihrer App, Website oder Ihres Webdienstes zu bewerten.
Zum Beispiel können Sie Leistungsmetriken verwenden, um zu bestimmen, wie Ihre App im Vergleich zu einem Wettbewerber abschneidet oder um die Leistung Ihrer App über verschiedene Versionen hinweg zu vergleichen. Ihre Metriken sollten für Ihre Benutzer, Ihre Website und Ihre Geschäftsziele relevant sein. Sie sollten konsistent erfasst, gemessen und in einem Format analysiert werden, das auch für nicht-technische Stakeholder verständlich ist.
Dieser Artikel stellt Werkzeuge vor, die Sie verwenden können, um auf Webleistungsmetriken zuzugreifen, die zur Messung und Optimierung der Leistung Ihrer Website verwendet werden können.
| Voraussetzungen: | Grundlegende Software installiert, und Grundkenntnisse in clientseitigen Webtechnologien. |
|---|---|
| Ziel: |
Bereitstellung von Informationen über Webleistungsmetriken, die Sie über verschiedene Webleistungs-APIs und Tools sammeln können, mit denen Sie diese Daten visualisieren können. |
Leistungswerkzeuge
Es gibt mehrere verschiedene Werkzeuge, mit denen Sie Leistung messen und verbessern können. Diese können im Allgemeinen in zwei Kategorien eingeteilt werden:
- Werkzeuge, die Leistung anzeigen oder messen, wie PageSpeed Insights oder der Firefox Netzwerkmonitor und Leistungsmonitor. Diese Werkzeuge zeigen, wie schnell oder langsam Ihre Webseite lädt. Sie weisen auch auf Bereiche hin, die verbessert werden können, um Ihre Web-App zu optimieren.
- Performance APIs, die Sie verwenden können, um benutzerdefinierte Leistungswerkzeuge zu erstellen.
Allgemeine Werkzeuge zur Leistungsberichterstattung
Werkzeuge wie PageSpeed Insights können schnelle Leistungsbewertungen liefern. Sie können eine URL eingeben und in Sekunden einen Leistungsbericht erhalten. Der Bericht enthält Bewertungen, die zeigen, wie Ihre Webseite auf Mobilgeräten und Desktops abschneidet. Dies ist ein guter Ausgangspunkt, um zu verstehen, was Sie gut machen und was verbessert werden könnte.
Zum Zeitpunkt des Schreibens sieht die Leistungszusammenfassung von MDN ähnlich aus wie im Folgenden:
Ein Leistungsbericht enthält Informationen darüber, wie lange ein Benutzer warten muss, bevor irgendetwas auf der Seite angezeigt wird, wie viele Bytes heruntergeladen werden müssen, um eine Seite anzuzeigen, und vieles mehr. Er informiert Sie auch darüber, ob die gemessenen Werte als gut oder schlecht gelten.
webpagetest.org ist ein weiteres Beispiel für ein Tool, das Ihre Website automatisch testet und wertvolle Metriken liefert.
Sie können versuchen, Ihre Lieblingswebsite mit diesen Werkzeugen zu testen und die Bewertungen zu sehen.
Netzwerkmonitorwerkzeuge
Moderne Browser verfügen über Werkzeuge, mit denen Sie geladene Seiten analysieren können, um festzustellen, wie sie funktionieren; die meisten funktionieren ähnlich. Zum Beispiel liefert der Firefox Netzwerkmonitor detaillierte Informationen über alle vom Netzwerk heruntergeladenen Assets, zusammen mit einem Wasserfall-Diagramm, das zeigt, wie lange das Herunterladen jedes Assets gedauert hat.
Sie sollten sich auch die Chrome-Network-Monitor-Dokumentation ansehen.
Leistungsmonitorwerkzeuge
Sie können auch Browser-Leistungswerkzeuge wie den Firefox-Leistungsmonitor verwenden, um die Leistung der Benutzeroberfläche einer Web-App oder Website zu messen, während Sie verschiedene Aktionen durchführen. Dies zeigt Funktionen an, die Ihre Web-App oder Website verlangsamen könnten.
Siehe auch die Chrome-Leistungswerkzeugdokumentation.
Performance APIs
Beim Schreiben von Code für das Web stehen viele Web APIs zur Verfügung, um eigene Leistungsmesstools zu erstellen.
Sie können die Navigation Timing API verwenden, um die clientseitige Webleistung zu messen, einschließlich der Zeit, die benötigt wird, um die vorherige Seite zu entladen, der Dauer von Domain-Lookups, der gesamten Ausführungszeit des window load-Handlers und mehr. Sie können die API für Metriken in Bezug auf alle Navigationsereignisse im untenstehenden Diagramm verwenden.
Die Performance API, die Zugang zu leistungsbezogenen Informationen für die aktuelle Seite bietet, umfasst mehrere APIs, darunter die Navigation Timing API, die User Timing API und die Resource Timing API. Diese Schnittstellen ermöglichen die genaue Messung der Zeit, die JavaScript-Aufgaben benötigen, um abgeschlossen zu werden.
Das PerformanceEntry Objekt ist Teil der Performance-Zeitleiste. Ein Performance-Eintrag kann direkt erstellt werden, indem ein Leistungs-mark oder measure (zum Beispiel durch Aufrufen der mark()-Methode) an einem expliziten Punkt in einer Anwendung gesetzt wird. Performance-Einträge werden auch auf indirekte Weise erstellt, wie das Laden einer Ressource wie eines Bildes.
Die PerformanceObserver API kann verwendet werden, um Leistungsmesereignisse zu beobachten und Sie über neue Performance-Einträge zu benachrichtigen, sobald diese in der Performance-Zeitleiste des Browsers aufgezeichnet werden.
Auch wenn dieser Artikel nicht auf die Verwendung dieser APIs eingeht, ist es hilfreich, zu wissen, dass sie existieren. Verweisen Sie auf den Artikel Navigation und Timings für weitere Beispiele zur Nutzung von Performance-Web-APIs.