Tools zur Leistungsmessung verwenden

Sam Dutton

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

Für jedes Ziel ist ein Audit erforderlich.

Ziel	Warum?	Was soll getestet werden?
Datenschutz, Sicherheit und Datenintegrität gewährleisten und leistungsstarke API-Nutzung ermöglichen	Warum HTTPS wichtig ist	HTTPS für alle Seiten/Routen und Assets der Website implementiert.
Ladeleistung verbessern	53 % der Nutzer verlassen Websites, die länger als drei Sekunden zum Laden benötigen.	JavaScript und CSS, die asynchron geladen oder verzögert werden könnten. Legen Sie Ziele für die Time to Interactive und die Nutzlastgröße fest, z. B. TTI bei 3G. Leistungsbudget festlegen
Webseitengröße reduzieren	• Datenkosten für Nutzer mit begrenztem Datenvolumen senken • Speicherbedarf von Web-Apps reduzieren – besonders wichtig für Nutzer mit Geräten mit geringer Leistung • Hosting- und Bereitstellungskosten senken • Leistung, Zuverlässigkeit und Ausfallsicherheit bei der Bereitstellung verbessern	Legen Sie ein Budget für die Webseitengröße fest, z. B. unter 400 kB für das erste Laden. Prüfen Sie, ob umfangreiches JavaScript vorhanden ist. Prüfen Sie die Dateigrößen, um zu große Bilder, Medien, HTML-, CSS- und JavaScript-Dateien zu finden. Suchen Sie nach Bildern, die per Lazy Loading geladen werden könnten, und prüfen Sie mit Abdeckungstools, ob nicht verwendeter Code vorhanden ist.
Ressourcenanfragen reduzieren	• Latenzprobleme reduzieren • Bereitstellungskosten senken • Bereitstellungsleistung, Zuverlässigkeit und Ausfallsicherheit verbessern	Suchen Sie nach übermäßigen oder unnötigen Anfragen für alle Arten von Ressourcen. Beispiele: Dateien, die wiederholt geladen werden, JavaScript, das in mehreren Versionen geladen wird, CSS, das nie verwendet wird, Bilder, die nie angesehen werden (oder per Lazy Loading geladen werden könnten).
Speicherauslastung optimieren	Der Arbeitsspeicher kann zum neuen Engpass werden, insbesondere auf Mobilgeräten.	Vergleiche deine Website mit anderen Websites im Chrome Task Manager, um die Speichernutzung beim Laden der Startseite und bei der Verwendung anderer Websitefunktionen zu prüfen.
CPU-Last reduzieren	Mobilgeräte haben eine begrenzte CPU, insbesondere Geräte mit geringer Leistung.	Prüfen Sie, ob umfangreiches JavaScript vorhanden 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 Skripts beim ersten Laden unnötig ausgeführt werden. Suchen Sie nach JavaScript, das in mehreren Versionen geladen wird, oder nach Bibliotheken, die durch geringfügiges Refaktorieren vermieden werden könnten.

Es gibt eine Vielzahl von Tools und Techniken für die Prüfung von Websites:

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

Im Folgenden erfahren Sie, welcher Ansatz für die einzelnen Prüfungsarten relevant ist.

Hinweis: Bilder machen bei den meisten Webseiten bei Weitem den größten Teil der Datenmenge und die meisten Anfragen aus. Die Latenz verschlechtert sich, wenn die Verbindung schlechter wird. Daher sind übermäßige Anfragen für Bilddateien ein zunehmendes Problem, da das Web immer mobiler wird. Bilder verbrauchen auch Strom: mehr Bildanfragen, mehr Funknutzung, mehr leere Akkus. Sogar das Rendern von Bildern erfordert Energie – und zwar proportional zur Größe und Anzahl der Bilder. Das Gleiche gilt für den Arbeitsspeicher: Kleine Erhöhungen der Pixelabmessungen führen zu einer starken Erhöhung der Arbeitsspeichernutzung. Bei Bildern auf Mobilgeräten – insbesondere auf Geräten mit geringer Leistung – kann der Arbeitsspeicher zum neuen Engpass werden. Zu große Bilder sind auch für Nutzer mit begrenztem Datenvolumen problematisch. Entfernen Sie redundante Bilder. Wenn Sie sie nicht entfernen können, optimieren Sie sie: Erhöhen Sie die Komprimierung so weit wie möglich, reduzieren Sie die Pixelabmessungen und verwenden Sie das Format, das die kleinsten Dateigrößen ermöglicht. Die Optimierung von „Hero-Images“ wie Bannern und Hintergründen ist eine einfache, einmalige Maßnahme.

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

Ein guter Ausgangspunkt für die Überprüfung einer Website ist die Verwendung der Netzwerktools Ihres Browsers. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie den Startleitfaden für den Netzwerkbereich der Chrome-Entwicklertools. Ähnliche Tools sind für Firefox, Safari, Internet Explorer und Edge verfügbar.

Denken Sie daran, die Ergebnisse zu dokumentieren, bevor Sie Änderungen vornehmen. Bei Netzwerkanfragen kann das ein einfacher Screenshot sein. Sie können Profildaten auch als JSON-Datei speichern. Unten findest du weitere Informationen zum Speichern und Teilen von Testergebnissen.

Bevor Sie mit der Prüfung der Netzwerknutzung beginnen, sollten Sie den Browsercache deaktivieren, um genaue Statistiken zur Leistung beim ersten Laden zu erhalten. Wenn Sie bereits Caching über einen Service Worker durchführen, löschen Sie den Cache API-Speicher. Sie können ein Inkognitofenster (privates Fenster) verwenden, damit Sie sich nicht um das Deaktivieren des Browsercaches oder das Entfernen zuvor im Cache gespeicherter Einträge kümmern müssen.

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

• Ladeleistung: Lighthouse bietet eine Zusammenfassung der Lademesswerte. Addy Osmani hat eine hervorragende Zusammenfassung der wichtigsten Nutzermomente beim Seitenaufbau verfasst.
• Zeitachsenereignisse für das Laden und Parsen von Ressourcen und die Speichernutzung. Wenn Sie tiefer einsteigen möchten, führen Sie ein Profiling für Arbeitsspeicher und JavaScript durch.
• Gesamtgröße der Seite und Anzahl der Dateien.
• Anzahl und Gewichtung von JavaScript-Dateien.
• Besonders große einzelne JavaScript-Dateien (z. B. über 100 KB).
• Nicht verwendetes JavaScript. Sie können das mit dem Chrome-Abdeckungstool 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 Techniken für responsive Bilder (z. B. srcset) verwendet werden.
• HTML-Dateigröße
• Gesamtzahl und Gewichtung der CSS-Dateien.
• Nicht verwendetes CSS. In Chrome können Sie dazu den Bereich „Abdeckung“ verwenden.
• Prüfen Sie, ob andere Assets wie Webschriftarten (einschließlich Symbolschriftarten) problematisch verwendet werden.
• Prüfen Sie die Zeitachse der Entwicklertools auf Elemente, die den Seitenaufbau blockieren.

Wenn Sie mit einer schnellen WLAN- oder Mobilfunkverbindung arbeiten, testen Sie die Leistung mit einer Emulation mit niedriger Bandbreite und hoher Latenz. Denken Sie daran, sowohl auf Mobilgeräten als auch auf Computern zu testen. Auf einigen Websites wird UA-Sniffing verwendet, um unterschiedliche Assets und Layouts für verschiedene Geräte bereitzustellen. Möglicherweise müssen Sie die Tests nicht nur mit der Gerätesimulation, sondern auch auf echter Hardware mit Remote-Debugging durchführen.

Hinweis: Sie können oft Browser-Tools verwenden, um Probleme zu erkennen, indem Sie einfach die Netzwerkantworten prüfen und nach Größe sortieren. Beispiel: Die 349 KB große PNG-Datei hier sah so aus, als könnte sie ein Problem sein:

Tatsächlich war das Bild 1.600 Pixel breit, während die maximale Anzeigebreite des Elements nur 400 Pixel betrug. Dekomprimiert benötigte das Bild mehr als 4 MB Speicherplatz, was auf einem Smartphone viel ist. Wenn Sie das Bild als 800 Pixel breites JPEG speichern (um die 400 Pixel breite Anzeige auf 2x-Bildschirmen zu berücksichtigen) und mit ImageOptim optimieren, erhalten Sie eine 17 KB große Datei: Vergleichen Sie das Original-PNG mit dem optimierten JPEG.

Das ist eine Verbesserung um 95 %!

Arbeitsspeicher- und CPU-Auslastung prüfen

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

In Chrome können Sie den Task-Manager über das Menü „Fenster“ aufrufen. So können Sie die Anforderungen einer Webseite ganz einfach prüfen.

Taskmanager von Chrome – Achten Sie auf Speicher- und CPU-Fresser!

Leistung beim ersten und nachfolgenden Laden testen

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

Hinweis: Das Caching statischer Inhalte lässt sich ganz einfach aktivieren, damit Browser Assets beim ersten Abruf im Cache speichern können. Dazu müssen Sie Ihren Server so konfigurieren, dass er die entsprechenden Header enthält. Wenn ein Browser Ressourcen im Cache speichern kann, muss er sie bei nachfolgenden Besuchen nicht aus dem Netzwerk abrufen. Dadurch wird die Ladegeschwindigkeit verbessert, die Datenkosten werden gesenkt und die Netzwerk- und Serverlast wird reduziert – auch bei Browsern, die das Caching über einen Service Worker nicht unterstützen. Auch wenn Sie die Cache API verwenden, ist es wichtig, das Browser-Caching zu aktivieren. Weitere Informationen finden Sie in den PageSpeed-Tools und den Ressourcen zu Web Fundamentals (insbesondere im Abschnitt „Invalidating and updating cached responses“).

Ergebnisse speichern

• WebPagetest: Testergebnisse haben jeweils eine eigene URL.
• PageSpeed Insights: Das Online-Tool PageSpeed Insights enthält jetzt Daten aus dem Chrome User Experience Report, die reale Leistungsstatistiken zeigen.
• Lighthouse: Berichte aus dem Bereich „Audit“ der Chrome-Entwicklertools speichern, indem Sie auf den Download-Button klicken:

  

Auf grundlegende Anforderungen für Progressive Web-Apps testen

Mit Lighthouse können Sie Sicherheit, Funktionalität, Barrierefreiheit, Leistung und Suchmaschinenleistung testen. Insbesondere prüft Lighthouse, ob auf Ihrer Website PWA-Funktionen wie Service Worker und ein Web-App-Manifest erfolgreich implementiert sind.

Lighthouse testet auch, ob deine Website eine akzeptable Offline-Nutzung ermöglicht.

Sie können einen Lighthouse-Bericht als JSON-Datei herunterladen oder, wenn Sie die Lighthouse-Chrome-Erweiterung verwenden, als GitHub Gist teilen: Klicken Sie auf den Button „Teilen“, wählen Sie „Im Viewer öffnen“ aus, klicken Sie im neuen Fenster noch einmal auf den Button „Teilen“ und dann auf „Als Gist speichern“.

Bericht über die Chrome-Erweiterung „Lighthouse“ in ein Gist exportieren – klicke auf den Teilen-Button

Analysen, Ereignis-Tracking und Geschäftsmesswerte verwenden, um die tatsächliche Leistung zu erfassen

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

Erfassen Sie nach Möglichkeit geschäftliche und technische Messwerte, die betroffen sein könnten, damit Sie die Ergebnisse nach Änderungen vergleichen können. Beispiel: Eine E-Commerce-Website kann Bestellungen pro Minute erfassen oder Statistiken für Belastungs- und Ausdauertests aufzeichnen. Die Kosten für den Back-End-Speicher, die CPU-Anforderungen, die Kosten für die Bereitstellung und die Ausfallsicherheit werden sich wahrscheinlich verbessern, wenn Sie die Webseitengröße und die Ressourcenanfragen reduzieren.

Wenn Sie noch keine Analysen implementiert haben, ist jetzt der richtige Zeitpunkt dafür. Geschäftskennzahlen und Analysen sind der entscheidende Faktor dafür, ob Ihre Website funktioniert oder nicht. Falls sinnvoll, können Sie Ereignis-Tracking für Nutzeraktionen wie Klicks auf Schaltflächen und Videowiedergaben einbinden. Möglicherweise möchten Sie auch eine Zielvorhabenfluss-Analyse implementieren: die Pfade, über die Ihre Nutzer zu „Conversions“ gelangen.

Sie können die Websitegeschwindigkeit in Google Analytics im Auge behalten, um zu sehen, wie Leistungsmesswerte mit Geschäftsmesswerten korrelieren. 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 Performance APIs oder Ihren eigenen Messwerten aufzeichnen, 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,
      });
     }
    });

Sie können auch ReportingObserver verwenden, um nach Warnungen zu veralteten Browserfunktionen und Interventionen zu suchen. Dies ist eine von vielen APIs, mit denen Sie Live-Messungen von echten Nutzern erhalten.

Praxiserfahrung: Bildschirm- und Videoaufzeichnung

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

Vielleicht möchten Sie auch Screencasts speichern. Es gibt viele Apps zum Aufzeichnen von Screencasts für Android, iOS und Desktop-Plattformen (und Skripts, die dasselbe tun).

Die Videoaufzeichnung des Seitenaufbaus funktioniert ähnlich wie die Filmstreifenansicht in WebPagetest oder Screenshots aufnehmen in den Chrome-Entwicklertools. Sie erhalten einen realen Datensatz zur Ladegeschwindigkeit von Seitenkomponenten, d. h. was schnell und was langsam ist. Speichern Sie Videoaufnahmen und Screencasts, um sie später mit Verbesserungen zu vergleichen.

Ein Vorher-Nachher-Vergleich ist eine gute Möglichkeit, Verbesserungen zu demonstrieren.

Was noch?

Ermitteln Sie gegebenenfalls einen Web Bloat Score. Das ist ein interessanter Test, aber auch eine gute Möglichkeit, Code-Bloat zu demonstrieren oder zu zeigen, dass Sie Verbesserungen vorgenommen haben.

What Does My Site Cost? (Was kostet meine Website?) unten bietet einen groben Überblick über die finanziellen Kosten für das Laden Ihrer Website in verschiedenen Regionen.

Es sind viele weitere eigenständige und Onlinetools verfügbar. Eine Übersicht finden Sie unter perf.rocks/tools.