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? | Worauf sollten Sie achten? |
|---|---|---|
| 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önnten. 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 | Prüfen Sie, ob viel JavaScript verwendet wird. 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 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.