Es gibt mehrere Hauptziele für den Aufbau einer leistungsfähigen, robusten Website mit geringen Datenkosten.
Für jedes Ziel ist ein Audit erforderlich.
| Ziel | Why? | Was soll getestet werden? |
|---|---|---|
| Datenschutz, Sicherheit und Datenintegrität gewährleisten und eine leistungsstarke API-Nutzung ermöglichen | Warum ist HTTPS wichtig? | HTTPS wurde 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-Code, der asynchron oder verzögert geladen werden kann. Legen Sie Ziele für die Zeit bis zur Interaktivität und die Nutzlastgröße fest, z. B. TTI bei 3G. Legen Sie ein Leistungsbudget fest. |
| Seitengröße reduzieren | • Datenkosten für Nutzer mit gedeckelten Datentarifen reduzieren • Speicheranforderungen an Webanwendungen reduzieren – besonders wichtig für Nutzer mit Geräten mit geringen Spezifikationen • Hosting- und Bereitstellungskosten senken • Bereitstellungsleistung, Zuverlässigkeit und Ausfallsicherheit verbessern | Legen Sie ein Budget für die Seitengröße fest, z. B. das erste Laden unter 400 KB. Suchen Sie nach starkem JavaScript. Prüfen Sie die Dateigrößen, um aufgeblähte Bilder, Medien, HTML, CSS und JavaScript zu finden. Suchen Sie nach Bildern, die Lazy Loading sein könnten, und suchen Sie mit Abdeckungstools nach ungenutztem Code. |
| Ressourcenanfragen reduzieren | • Latenzprobleme reduzieren • Bereitstellungskosten senken • Bereitstellungsleistung, Zuverlässigkeit und Ausfallsicherheit verbessern | Suchen Sie nach übermäßigen oder unnötigen Anfragen für beliebige Ressourcentypen. Beispiele: Dateien, die wiederholt geladen werden, JavaScript, das in mehreren Versionen geladen wird, CSS, das nie verwendet wird, Bilder, die nie angesehen werden (oder Lazy Loading sein könnten). |
| Speicherauslastung optimieren | Der Speicher kann zum neuen Engpass werden, insbesondere auf Mobilgeräten. | Mit dem Task-Manager von Chrome können Sie Ihre Website hinsichtlich der Arbeitsspeichernutzung beim Laden der Startseite und der Verwendung anderer Websitefunktionen mit anderen vergleichen. |
| CPU-Auslastung reduzieren | Mobilgeräte haben eine begrenzte CPU-Leistung, insbesondere leistungsschwache Geräte | Suchen Sie nach starkem JavaScript. Mit den Tools zur Abdeckung kannst du nicht verwendete JavaScript- und CSS-Elemente wiederfinden. Prüfen Sie, ob die DOM-Größe zu groß ist und ob Skripts beim ersten Laden unnötigerweise ausgeführt werden. Suchen Sie nach JavaScript, das in mehreren Versionen geladen ist, oder nach Bibliotheken, die mit geringfügiger Refaktorierung 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
- Analysen
- Von Servern und Geschäftssystemen bereitgestellte Messwerte
- Bildschirm- und Videoaufzeichnung
- Manuelle Tests
Im Folgenden erfahren Sie, welcher Ansatz für die jeweilige Prüfungsart relevant ist.
Ressourcenanfragen aufzeichnen: Anzahl, Größe, Typ und Zeitangaben
Bei der Prüfung einer Website empfiehlt es sich, die Seiten mit den Netzwerktools Ihres Browsers zu überprüfen. Weitere Informationen dazu findest du im Startleitfaden im Bereich „Netzwerk“ der Chrome-Entwicklertools. Ähnliche Tools sind für Firefox, Safari, Internet Explorer und Edge verfügbar.
Protokollieren Sie die Ergebnisse, bevor Sie Änderungen vornehmen. Bei Netzwerkanfragen ist das manchmal so einfach wie ein Screenshot. Sie können auch Profildaten als JSON-Datei speichern. Weiter unten finden Sie weitere Informationen zum Speichern und Teilen von Testergebnissen.
Bevor Sie mit der Prüfung der Netzwerknutzung beginnen, deaktivieren Sie den Browser-Cache, damit Sie genaue Statistiken zur Leistung beim ersten Laden erhalten. Falls Sie das Caching bereits über einen Service Worker ausführen, leeren Sie den Cache API-Speicher. Wenn Sie ein Inkognito-Fenster (privat) verwenden, müssen Sie sich keine Gedanken über die Deaktivierung des Browser-Cache oder das Entfernen früherer im Cache gespeicherter Einträge machen.
Hier sind einige wichtige Funktionen und Messwerte, die Sie mit Browsertools überprüfen sollten:
- Lastleistung: Lighthouse bietet eine Zusammenfassung der Lastmesswerte. Addy Osmani hat eine tolle Zusammenfassung der wichtigen Momente für Nutzer beim Seitenaufbau verfasst.
- Zeitachsenereignisse zum Laden und Parsen von Ressourcen und Arbeitsspeichernutzung Wenn Sie noch tiefer einsteigen möchten, können Sie eine Arbeitsspeicher- und JavaScript-Profilerstellung ausführen.
- Seitengröße und Anzahl der Dateien insgesamt.
- Anzahl und Gewichtung der JavaScript-Dateien.
- Alle besonders großen einzelnen JavaScript-Dateien (über 100 KB)
- Nicht verwendetes JavaScript Das kannst du mit dem Tool zur Abdeckung von Chrome prüfen.
- Gesamtzahl und Stärke der Bilddateien.
- Alle besonders großen einzelnen Bilddateien.
- Bildformate: Gibt es PNG-Dateien im JPEG- oder SVG-Format? Wird WebP mit Fallbacks verwendet?
- Gibt an, ob responsive Bildtechniken wie srcset verwendet werden.
- Größe der HTML-Datei.
- Gesamtzahl und Gewichtung der CSS-Dateien.
- Nicht verwendetes CSS In Chrome verwenden Sie dazu den Bereich „Abdeckung“.
- Prüfen Sie, ob andere Assets wie Web-Schriftarten (einschließlich Symbolschriftarten) problematisch sind.
- Sieh in den Entwicklertools auf der Zeitachse nach, ob der Seitenaufbau blockiert wird.
Wenn Sie über eine schnelle WLAN- oder Mobilfunkverbindung arbeiten, testen Sie es mit niedriger Bandbreite und hoher Latenz-Emulation. Vergiss nicht, Tests sowohl auf Mobilgeräten als auch auf Computern durchzuführen. Einige Websites nutzen UA-Sniffing, um verschiedene Assets und Layouts für verschiedene Geräte bereitzustellen. Möglicherweise müssen Sie Tests auf tatsächlicher Hardware mithilfe von Remote-Debugging und nicht nur mit der Gerätesimulation durchführen.
Arbeitsspeicher und CPU-Auslastung prüfen
Bevor Sie Änderungen vornehmen, sollten Sie die Arbeitsspeicher- und CPU-Nutzung aufzeichnen.
In Chrome können Sie über das Fenstermenü auf den Task-Manager zugreifen. So können Sie die Anforderungen einer Webseite einfach überprüfen.
Leistung beim ersten und nachfolgenden Laden testen
Lighthouse, WebPagetest und Pagespeed Insights eignen sich zum Analysieren von Geschwindigkeit, Datenkosten und Ressourcennutzung. WebPagetest prüft außerdem das Caching statischer Inhalte, die Zeit bis zum ersten Byte und ob Ihre Website CDNs effektiv nutzt.
Ergebnisse speichern
- WebPagetest: Testergebnisse haben jeweils eine eigene URL.
- PageSpeed Insights: Das Onlinetool PageSpeed Insights enthält jetzt auch Berichtsdaten zur Chrome-Nutzerfreundlichkeit, um Leistungsstatistiken aus der Praxis hervorzubringen.
- Lighthouse: Klicken Sie auf die Schaltfläche zum Herunterladen, um Berichte aus dem Bereich „Audit“ der Chrome-Entwicklertools zu speichern:
Im Hinblick auf die Kernanforderungen für 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.
Mit Lighthouse wird auch getestet, ob Ihre Website auch offline akzeptabel ist.
Sie können einen Lighthouse-Bericht im JSON-Format herunterladen oder den Bericht mit der Lighthouse-Erweiterung für Chrome als GitHub Gist teilen. Klicken Sie dazu auf die Schaltfläche „Share“ (Teilen), wählen Sie „Open in Viewer“ (Im Viewer öffnen) aus, klicken Sie im neuen Fenster noch einmal auf die Schaltfläche „Share“ (Teilen) und speichern Sie als Gist.
Anhand von Analysen, Ereignis-Tracking und Geschäftsmesswerten die Leistung in der Praxis beobachten
Speichern Sie nach Möglichkeit Analysedaten, bevor Sie Änderungen implementieren: Absprungraten, Besuchszeit auf Seite, Ausstiegsseiten – alles, was für Ihre Geschäftsanforderungen relevant ist.
Notieren Sie nach Möglichkeit die geschäftlichen und technischen Messwerte, die möglicherweise betroffen sind, damit Sie die Ergebnisse vergleichen können, nachdem Sie Änderungen vorgenommen haben. Beispielsweise könnte eine E-Commerce-Website Bestellungen pro Minute verfolgen oder Statistiken für Stress- und Ausdauertests aufzeichnen. Backend-Speicherkosten, CPU-Anforderungen, Bereitstellungskosten und Ausfallsicherheit werden sich wahrscheinlich verbessern, wenn Sie die Seitengröße und Ressourcenanfragen reduzieren.
Falls Analytics noch nicht implementiert ist, ist jetzt der richtige Zeitpunkt! Die endgültige Entscheidung darüber, ob Ihre Website funktioniert oder nicht, entscheiden anhand von Geschäftsmetriken und Analysen. Binden Sie gegebenenfalls Ereignis-Tracking für Nutzeraktionen wie Klicks auf Schaltflächen und Videowiedergaben ein. Sie können auch eine Analyse des Zielflusses implementieren, also die Pfade, über die Nutzer zu Conversions gelangen.
Wenn Sie die Websitegeschwindigkeit in Google Analytics im Auge behalten, können Sie feststellen, wie die Leistungsmesswerte mit den Unternehmensmesswerten korrelieren. Beispiel: „Wie schnell wurde die Startseite geladen?“ im Vergleich zu „Hat der Eintrag ü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. Beispiel:
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 zu prüfen, ob der Browser eingestellt oder Warnungen angezeigt wird. Dies ist eine von vielen APIs, um reale Live-Messungen von tatsächlichen Nutzern zu erhalten.
Praxisnah: Bildschirm- und Videoaufzeichnung
Sie können eine Videoaufzeichnung des Seitenaufbaus auf Mobilgeräten und Computern erstellen. Dies funktioniert noch besser bei hohen Frame-Raten und wenn du eine Timer-Anzeige hinzufügst.
Du kannst auch Screencasts speichern. Es gibt viele Apps für Screencast-Aufzeichnungen für Android, iOS und Desktop-Plattformen (und Skripts, mit denen du dasselbe tun kannst).
Das Laden der Videoaufzeichnung funktioniert ähnlich wie die Filmstreifenansicht in WebPagetest oder Screenshots erfassen in den Chrome-Entwicklertools. Sie erhalten praxisnahe Rekorde bei der Ladegeschwindigkeit von Seitenkomponenten: was schnell und was langsam ist. Sie können Videoaufnahmen und Screencasts speichern, um sie mit späteren Verbesserungen zu vergleichen.
Ein Vorher-Nachher-Vergleich kann eine gute Möglichkeit sein, Verbesserungen zu demonstrieren.
Was noch?
Rufen Sie gegebenenfalls einen Web Bloat Score auf. Dieser Test ist unterhaltsam, kann aber auch eine überzeugende Möglichkeit sein, Code-Bloat zu demonstrieren – oder Verbesserungen zu demonstrieren.
Unter Was kostet meine Website?, wie unten gezeigt, finden Sie einen groben Überblick über die finanziellen Kosten beim Laden Ihrer Website in verschiedenen Regionen.
Es sind viele weitere eigenständige Tools und Onlinetools verfügbar. Sehen Sie sich dazu perf.rocks/tools an.