Tools zur Leistungsmessung verwenden

Es gibt mehrere Hauptziele für die Erstellung einer leistungsstarken, robusten Website mit geringen Datenkosten.

Für jedes Ziel ist eine Analyse erforderlich.

Ziel Warum? Was soll getestet werden?
Datenschutz, Sicherheit und Datenintegrität gewährleisten und eine leistungsstarke API-Nutzung ermöglichen Warum HTTPS wichtig ist HTTPS ist für alle Seiten/Routen und Assets der Website implementiert.
Ladeleistung verbessern 53 % der Nutzer verlassen Websites, deren Ladevorgang länger als drei Sekunden dauert JavaScript und CSS, die asynchron oder verzögert geladen werden können. Legen Sie Ziele für die interaktive Zeit und die Nutzlastgröße fest, z. B. TTI bei 3G. Legen Sie ein Leistungsbudget fest.
Seitengröße reduzieren • Reduzierung der Datenkosten für Nutzer mit begrenztem Datenvolumen • Reduzierung der Speicheranforderungen für Webanwendungen – besonders wichtig für Nutzer mit Geräten mit geringer Leistung • Reduzierung der Hosting- und Bereitstellungskosten • Verbesserung der Bereitstellungsleistung, Zuverlässigkeit und Ausfallsicherheit Legen Sie ein Budget für das Seitengewicht fest, z. B. 400 KB für das erste Laden. Prüfen Sie, ob viel JavaScript verwendet wird. Prüfen Sie die Dateigrößen, um zu sehen, ob Bilder, Medien, HTML, CSS und JavaScript zu groß sind. Suchen Sie nach Bildern, die mit Lazy Loading geladen werden könnten, und prüfen Sie mit Abdeckungstools, ob Code nicht verwendet wird.
Ressourcenanfragen reduzieren • Latenzprobleme reduzieren • Auslieferungskosten senken • Auslieferungsleistung, Zuverlässigkeit und Ausfallsicherheit verbessern Suchen Sie nach übermäßigen oder unnötigen Anfragen für jede Art von Ressource. Beispiele: Dateien, die wiederholt geladen werden, JavaScript, das in mehreren Versionen geladen wird, CSS, das nie verwendet wird, Bilder, die nie angesehen werden (oder mit Lazy Loading geladen werden könnten).
Speicherauslastung optimieren Der Arbeitsspeicher kann zum neuen Engpass werden, insbesondere auf Mobilgeräten. Mit dem Chrome-Task-Manager können Sie die Speichernutzung Ihrer Website mit anderen Websites vergleichen, wenn die Startseite geladen und andere Websitefunktionen verwendet werden.
CPU-Auslastung reduzieren Mobilgeräte haben eine begrenzte CPU, insbesondere Geräte mit niedrigen Spezifikationen Überprüfen Sie, ob JavaScript zu intensiv ist. Mit Abdeckungstools können Sie nicht verwendetes JavaScript und CSS finden. Prüfen Sie, ob die DOM-Größe zu groß ist und ob Scripts beim ersten Laden unnötig ausgeführt werden. Suchen Sie nach JavaScript, das in mehreren Versionen geladen wird, oder nach Bibliotheken, die mit einer kleinen Refaktorierung vermieden werden könnten.

Es gibt eine Vielzahl von Tools und Techniken zur Analyse von Websites:

  • System-Tools
  • Integrierte Browsertools
  • Browsererweiterungen
  • Online-Testanwendungen
  • Emulation Tools
  • Analytics
  • Von Servern und Geschäftssystemen bereitgestellte Messwerte
  • Bildschirm- und Videoaufzeichnung
  • Manuelle Tests

Im Folgenden erfahren Sie, welcher Ansatz für welche Art von Analyse relevant ist.

Ressourcenanfragen erfassen: Anzahl, Größe, Typ und Zeitpunkt

Ein guter Ausgangspunkt für die Überprüfung einer Website ist, die Seiten mithilfe der Netzwerktools Ihres Browsers zu überprüfen. Weitere Informationen findest du im Startleitfaden im Netzwerkbereich der Chrome-Entwicklertools. Ähnliche Tools sind für Firefox, Safari, Internet Explorer und Edge verfügbar.

Notieren Sie sich die Ergebnisse, bevor Sie Änderungen vornehmen. Bei Netzwerkanfragen kann dies genauso einfach wie ein Screenshot sein. Sie können auch Profildaten als JSON-Datei speichern. Weitere Informationen zum Speichern und Freigeben von Testergebnissen finden Sie unten.

Bevor Sie mit der Analyse der Netzwerknutzung beginnen, deaktivieren Sie den Browsercache, damit Sie genaue Statistiken zur Leistung beim ersten Laden erhalten. Wenn Sie das Caching bereits über einen Service Worker durchgeführt haben, leeren Sie den Cache API-Speicher. Sie können ein Inkognitofenster verwenden, damit Sie nicht den Browsercache deaktivieren oder zuvor im Cache gespeicherte Einträge entfernen müssen.

Hier sind einige wichtige Funktionen und Messwerte, die Sie mit Browsertools prüfen sollten:

  • Ladeleistung: Lighthouse bietet eine Zusammenfassung der Lademesswerte. Addy Osmani hat eine Zusammenfassung der wichtigen Momente für den Seitenaufbau verfasst.
  • Zeitachsenereignisse zum Laden und Parsen von Ressourcen und Arbeitsspeichernutzung. Wenn Sie mehr erfahren möchten, führen Sie ein Speicher- und JavaScript-Profiling durch.
  • Gesamtseitengröße und Anzahl der Dateien
  • Anzahl und Gewicht der JavaScript-Dateien.
  • Besonders große einzelne JavaScript-Dateien (z. B. über 100 KB)
  • Nicht verwendetes JavaScript. Sie können das mit dem Abdeckungstool in Chrome prüfen.
  • Gesamtzahl und Gewicht der Bilddateien.
  • Besonders große einzelne Bilddateien.
  • Bildformate: Gibt es PNGs, die JPEGs oder SVGs sein könnten? Wird WebP mit Fallbacks verwendet?
  • Ob responsive Bildtechniken (z. B. srcset) verwendet werden.
  • HTML-Dateigröße
  • Gesamtzahl und Gewicht der CSS-Dateien.
  • Nicht verwendetes CSS. In Chrome verwenden Sie den Bereich „Abdeckung“.
  • Prüfen Sie, ob andere Assets wie Web-Schriftarten (einschließlich Symbolschriftarten) problematisch verwendet werden.
  • Prüfen Sie die Zeitachse in den DevTools auf Elemente, die das Laden der Seite blockieren.

Wenn Sie über eine schnelle WLAN- oder Mobilfunkverbindung arbeiten, führen Sie den Test mit niedriger Bandbreite und hoher Latenz-Emulation durch. Denken Sie daran, sowohl auf Mobilgeräten als auch auf Computern zu testen. Einige Websites verwenden UA-Sniffing, um unterschiedliche Assets und Layouts für verschiedene Geräte bereitzustellen. Möglicherweise müssen Sie nicht nur mit der Gerätesimulation, sondern auch mit dem Remote-Debugging auf echter Hardware testen.

Arbeitsspeicher- und CPU-Auslastung prüfen

Bevor Sie Änderungen vornehmen, sollten Sie die Arbeitsspeicher- und CPU-Auslastung erfassen.

In Chrome können Sie über das Fenstermenü auf den Task-Manager zugreifen. So können Sie ganz einfach die Anforderungen einer Webseite prüfen.

Chrome-Task-Manager mit Arbeitsspeicher- und CPU-Nutzung für die vier geöffneten Browser-Tabs
Task-Manager von Chrome: Achten Sie auf Speicher- und CPU-Probleme.

Leistung der ersten und nachfolgenden Ladevorgänge testen

Lighthouse, WebPagetest und PageSpeed Insights sind nützlich, um Geschwindigkeit, Datenkosten und Ressourcennutzung zu analysieren. WebPagetest prüft auch das Caching von Static-Inhalten, die Time to First Byte und ob Ihre Website CDNs effektiv nutzt.

Ergebnisse speichern

Testen Sie die grundlegenden Anforderungen für progressive Web-Apps.

Lighthouse hilft Ihnen, Sicherheit, Funktionalität, Barrierefreiheit, Leistung und Suchmaschinenleistung zu testen. Lighthouse prüft insbesondere, ob auf Ihrer Website PWA-Funktionen wie Dienstprogramme und ein Web-App-Manifest implementiert sind.

Lighthouse prüft auch, ob Ihre Website eine akzeptable Offlinenutzung bietet.

Sie können einen Lighthouse-Bericht als JSON-Datei herunterladen. Wenn Sie die Lighthouse-Chrome-Erweiterung verwenden, können Sie den Bericht auch als GitHub-Gist freigeben: Klicken Sie auf die Schaltfläche „Teilen“, wählen Sie „In Viewer öffnen“ aus und klicken Sie dann im neuen Fenster noch einmal auf die Schaltfläche „Teilen“ und dann auf „Als Gist speichern“.

Screenshot zum Exportieren eines Chrome Lighthouse-Berichts als Gist
Bericht aus der Lighthouse-Erweiterung für Chrome exportieren – klicken Sie auf die Schaltfläche „Teilen“

Mit Analysen, Ereignis-Tracking und Geschäftsmesswerten die Leistung unter realen Bedingungen verfolgen

Wenn möglich, sollten Sie Analysen durchführen, bevor Sie Änderungen vornehmen. Erfassen Sie dabei alle für Ihre Geschäftsanforderungen relevanten Daten, z. B. Absprungraten, Verweildauer auf der Seite und Ausstiegsseiten.

Erfassen Sie nach Möglichkeit geschäftliche und technische Messwerte, die möglicherweise betroffen sind, damit Sie die Ergebnisse nach den Änderungen vergleichen können. Beispiel: Auf einer E-Commerce-Website können Bestellungen pro Minute erfasst oder Statistiken für Stress- und Ausdauertests aufgezeichnet werden. Die Back-End-Speicherkosten, CPU-Anforderungen, Bereitstellungskosten und Ausfallsicherheit werden wahrscheinlich verbessert, wenn Sie das Seitengewicht und die Ressourcenanfragen reduzieren.

Wenn Sie noch keine Analysen implementiert haben, ist jetzt der richtige Zeitpunkt dafür. Geschäftsmesswerte und Analysen sind der ultimative Maßstab dafür, ob Ihre Website funktioniert. Berücksichtigen Sie gegebenenfalls Ereignis-Tracking für Nutzeraktionen wie Klicks auf Schaltflächen und Videowiedergaben. Sie können auch eine Analyse des Zielvorhaben-Pfads implementieren, also der Pfade, über die Nutzer zu „Conversions“ gelangen.

In Google Analytics können Sie die Websitegeschwindigkeit im Blick behalten, um zu sehen, wie sich Leistungsmesswerte auf Geschäftsmesswerte auswirken. Beispiel: „Wie schnell wurde die Startseite geladen?“ im Vergleich zu „Hat die Eingabe über die Startseite zu einem Verkauf geführt?“.

Screenshot der Google Analytics-Seitenladezeit

Google Analytics verwendet Daten aus der Navigation Timing API.

Sie können Daten mit einer der JavaScript-Leistungs-APIs oder mit Ihren eigenen Messwerten erfassen, z. B.:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Mit ReportingObserver können Sie auch nach Warnungen zur Einstellung von Browsern und zu Interventionen suchen. Dies ist eine von vielen APIs, mit denen Sie reale Live-Messungen von echten Nutzern erhalten.

Praxistest: Bildschirm- und Videoaufzeichnung

Erstellen Sie eine Videoaufzeichnung des Seitenaufbaus auf Mobilgeräten und Computern. Das funktioniert noch besser bei hohen Frameraten und wenn du eine Timeranzeige hinzufügst.

Sie können auch Bildschirmaufzeichnungen speichern. Es gibt viele Apps zum Aufzeichnen von Bildschirmaufzeichnungen für Android-, iOS- und Desktop-Plattformen (und Scripts zum selben Zweck).

Die Videoaufzeichnung des Seitenaufbaus funktioniert ähnlich wie die Filmstreifenansicht in WebPagetest oder die Aufnahme von Screenshots in den Chrome-Entwicklertools. Sie erhalten einen Echtzeit-Verlauf der Ladegeschwindigkeit von Seitenkomponenten: Was ist schnell und was ist langsam? Speichern Sie Videoaufzeichnungen und Bildschirmaufzeichnungen, um sie später mit den Verbesserungen zu vergleichen.

Ein direkter Vorher-Nachher-Vergleich kann eine gute Möglichkeit sein, Verbesserungen zu veranschaulichen.

Was noch?

Falls relevant, erhältst du einen Web Bloat Score. Dieser Test macht Spaß, kann aber auch eine überzeugende Möglichkeit darstellen, aufgeblähten Code zu demonstrieren – oder zu zeigen, dass Sie Verbesserungen vorgenommen haben.

Der Abschnitt Was kostet meine Website? (siehe unten) gibt einen groben Überblick über die Kosten, die mit dem Laden Ihrer Website in verschiedenen Regionen verbunden sind.

Screenshot von whatdoesmysitecost.com

Es gibt viele weitere eigenständige und Online-Tools: Sehen Sie sich perf.rocks/tools an.