Tools zur Leistungsmessung verwenden

Sam Dutton

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

Für jedes Ziel ist eine Analyse erforderlich.

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 Analyse einer Website ist die Prüfung der Seiten mit den Netzwerktools Ihres Browsers. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie den Einstiegsleitfaden für den Bereich „Netzwerk“ in den 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 das so 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, sollten Sie den Browsercache deaktivieren, damit Sie genaue Statistiken zur Leistung beim ersten Laden erhalten. Wenn Sie bereits über einen Service Worker zwischenspeichern, 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 gute Zusammenfassung der wichtigsten Momente für Nutzer beim Laden von Seiten verfasst.
• Zeitachsenereignisse zum Laden und Parsen von Ressourcen sowie zur Arbeitsspeichernutzung. Wenn Sie mehr erfahren möchten, führen Sie ein Speicher- und JavaScript-Profiling durch.
• Seitengewicht insgesamt 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 wie 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.

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

• WebPagetest: Testergebnisse haben jeweils eine eigene URL.
• PageSpeed Insights: Das online verfügbare PageSpeed Insights-Tool enthält jetzt Daten aus dem Bericht zur Nutzererfahrung in Chrome, die Leistungsstatistiken aus der Praxis hervorheben.
• Lighthouse: Klicken Sie im Bereich „Audit“ (Prüfung) der Chrome-Entwicklertools auf die Schaltfläche „Herunterladen“, um Berichte zu speichern:

  

Grundlegende Anforderungen an progressive Web-Apps testen

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“.

Mit Analysen, Ereignis-Tracking und Geschäftsmesswerten die tatsächliche Leistung erfassen

Wenn möglich, sollten Sie vor der Implementierung von Änderungen Analysedaten erfassen: Absprungraten, Verweildauer auf der Seite, Ausstiegsseiten – alles, was für Ihre Geschäftsanforderungen relevant ist.

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 der Einstieg über die Startseite zu einem Verkauf geführt?“

In Google Analytics werden Daten aus der Navigation Timing API verwendet.

Sie können Daten mit einer der JavaScript-Leistungs-APIs oder mit 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 Aufzeichnen von Bildschirmaufzeichnungen).

Die Videoaufzeichnung des Seitenaufbaus funktioniert ähnlich wie die Filmstreifenansicht in WebPagetest oder die Aufnahme von Screenshots in den Chrome-Entwicklertools. Sie erhalten einen realistischen Wert für die 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 Vergleich vor und nach der Optimierung kann eine gute Möglichkeit sein, Verbesserungen zu veranschaulichen.

Was noch?

Falls zutreffend, rufen Sie den Web Bloat-Wert ab. Das ist ein unterhaltsamer Test, aber er kann auch eine überzeugende Möglichkeit sein, Code-Bloat zu demonstrieren oder zu zeigen, dass Sie Verbesserungen vorgenommen haben.

Im Abschnitt Was kostet meine Website? unten finden Sie eine grobe Schätzung der finanziellen Kosten für das Laden Ihrer Website in verschiedenen Regionen.

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