Tools zur Leistungsmessung verwenden

Sam Dutton

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

Für jedes Ziel ist ein Audit erforderlich.

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

• System-Tools
• Integrierte Browser-Tools
• 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 Arten von Audits relevant ist.

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

Ein guter Ausgangspunkt für die Überprüfung einer Website sind die Netzwerktools Ihres Browsers. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie den Leitfaden für den Bereich „Netzwerk“ in den 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 so einfach wie ein Screenshot sein. Sie können Profildaten auch als JSON-Datei speichern. Weitere Informationen zum Speichern und Freigeben 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 verwenden, löschen Sie den Cache-API-Speicher. Sie können ein Inkognitofenster (privates Fenster) verwenden, damit Sie den Browsercache nicht deaktivieren oder zuvor im Cache gespeicherte Einträge entfernen 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 tolle Zusammenfassung der wichtigsten Nutzeraktionen beim Seitenaufbau geschrieben.
• Zeitachse für das Laden und Parsen von Ressourcen sowie die Speichernutzung. Wenn Sie mehr erfahren möchten, führen Sie die Profilerstellung für Arbeitsspeicher und JavaScript aus.
• Gesamtseitengewicht und Anzahl der Dateien.
• Anzahl und Gewicht von JavaScript-Dateien.
• Besonders große einzelne JavaScript-Dateien (z. B. über 100 KB).
• Nicht verwendetes JavaScript. Sie können das mit dem Coverage-Tool von 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 Techniken für responsive Bilder wie srcset verwendet werden.
• HTML-Dateigröße
• Gesamtzahl und Gewicht von CSS-Dateien.
• Nicht verwendetes CSS. Verwenden Sie in Chrome das Bereichsfeld.
• Prüfen Sie, ob andere Assets wie Webschriftarten (einschließlich Symbolschriftarten) problematisch verwendet werden.
• Prüfen Sie die DevTools-Zeitachse auf Elemente, die das Laden der Seite blockieren.

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

Arbeitsspeicher- und CPU-Auslastung prüfen

Bevor Sie Änderungen vornehmen, sollten Sie sich die Arbeitsspeicher- und CPU-Nutzung notieren.

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

Leistung beim ersten und bei nachfolgenden Ladevorgängen testen

Lighthouse, WebPagetest und PageSpeed Insights sind nützlich, um Geschwindigkeit, Datenkosten und Ressourcennutzung zu analysieren. WebPagetest prüft auch das Caching statischer Inhalte, die Zeit bis zum ersten Byte und ob Ihre Website CDNs effektiv nutzt.

Ergebnisse speichern

• WebPagetest: Jedes Testergebnis hat eine eigene URL.
• PageSpeed Insights: Das Online-Tool PageSpeed Insights enthält jetzt Daten aus dem Bericht zur Nutzererfahrung in Chrome, in denen Leistungsstatistiken aus der Praxis hervorgehoben werden.
• Lighthouse: Berichte aus dem Bereich „Audit“ der Chrome-Entwicklertools speichern. Klicken Sie dazu auf die Schaltfläche zum Herunterladen:

  

Auf die wichtigsten Anforderungen an progressive Web-Apps testen

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

Lighthouse testet auch, ob Ihre 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, den Bericht als GitHub-Gist freigeben. Klicken Sie dazu auf die Schaltfläche „Freigeben“, wählen Sie „Im Viewer öffnen“ aus, klicken Sie im neuen Fenster noch einmal auf die Schaltfläche „Freigeben“ und dann auf „Als Gist speichern“.

Mithilfe von Analysen, Ereignis-Tracking und Geschäftsmesswerten die Leistung in der realen Welt im Blick behalten

Wenn möglich, sollten Sie Analysedaten aufzeichnen, bevor Sie Änderungen vornehmen. Dazu gehören unter anderem Absprungraten, Zeit auf der Seite und Ausstiegsseiten.

Erfassen Sie nach Möglichkeit Geschäfts- und technische Messwerte, die sich möglicherweise ändern, damit Sie die Ergebnisse nach den Änderungen vergleichen können. Eine E-Commerce-Website könnte beispielsweise Bestellungen pro Minute erfassen oder Statistiken für Stresstests und Belastungstests aufzeichnen. Die Kosten für den Back-End-Speicher, die CPU-Anforderungen, die Bereitstellungskosten und die Ausfallsicherheit lassen sich wahrscheinlich verbessern, wenn Sie das Seitengewicht und die Ressourcenanfragen reduzieren.

Wenn Sie noch keine Analysen implementiert haben, ist jetzt der richtige Zeitpunkt dafür. Anhand von Unternehmensmesswerten und ‑analysen lässt sich letztendlich feststellen, ob Ihre Website funktioniert. Falls zutreffend, sollten Sie Ereignis-Tracking für Nutzeraktionen wie Klicks auf Schaltflächen und Videowiedergaben einbinden. Sie können auch die Analyse des Zielvorhabenflusses implementieren, um die Pfade zu untersuchen, über die Nutzer zu Conversions gelangen.

Mit Google Analytics können Sie die Websitegeschwindigkeit im Blick behalten und so prüfen, wie sich Leistungsmesswerte auf Unternehmensmesswerte auswirken. Beispiel: „Wie schnell wurde die Startseite geladen?“ im Vergleich zu „Hat der Einstieg über die Startseite zu einem Verkauf geführt?“

Google Analytics verwendet Daten aus der Navigation Timing API.

Sie können Daten mit einer der JavaScript Performance 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 Browser-Einstellungs- und Interventionswarnungen suchen. Dies ist eine von vielen APIs, mit denen sich Live-Messungen von echten Nutzern in der Praxis abrufen lassen.

Bildschirm- und Videoaufzeichnung

Erstellen Sie eine Videoaufzeichnung des Seitenaufrufs auf Mobilgeräten und Computern. Das funktioniert bei hohen Bildraten noch besser, insbesondere wenn Sie eine Timeranzeige hinzufügen.

Sie können auch Screencasts speichern. Für Android, iOS und Desktop-Plattformen gibt es viele Apps zur Bildschirmaufzeichnung (und Scripts, mit denen sich dasselbe erreichen lässt).

Das Aufzeichnen von Videos beim Seitenaufbau funktioniert ähnlich wie die Filmstreifenansicht in WebPagetest oder Screenshots aufnehmen in den Chrome-Entwicklertools. Sie erhalten einen realen Datensatz zur Ladegeschwindigkeit von Seitenkomponenten: was schnell und was langsam ist. Speichern Sie Videoaufzeichnungen und Screencasts, um sie später mit Verbesserungen zu vergleichen.

Ein direkter Vergleich vor und nach der Optimierung ist eine gute Möglichkeit, Verbesserungen zu veranschaulichen.

Was noch?

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

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

Es gibt viele weitere eigenständige und Onlinetools. Eine Übersicht finden Sie unter perf.rocks/tools.