Bevor Sie Leistungsmesswerte für eine Websiteanalyse erfassen, können Sie verschiedene Prüfungen durchführen, um einfache Korrekturen und Schwerpunktbereiche zu identifizieren.
Gültigkeitsprüfung: Architektur und Code
Zahlen Sie technische Altlasten ab!
Beheben Sie nach Möglichkeit einfache Fehler und entfernen Sie nicht benötigte Assets und Code vor der Leistungsmessung. Bewahren Sie aber unbedingt einen Vorher-Nachher-Vergleich der Probleme und Fehlerbehebungen auf. Diese Verbesserungen können dennoch Teil Ihrer Analyse sein.
Websitearchitektur und Assets
Kann etwas leicht aus dem Code-Repository und von der Website entfernt werden, z. B. nicht verwendete alte Seiten, Inhalte oder andere Assets? Suchen Sie nach verwaisten Seiten, redundanten Vorlagen, nicht verwendeten Bildern und nicht verwendetem Code und Bibliotheken.
Laufzeitfehler
Prüfen Sie, ob in der Browserkonsole Fehler gemeldet wurden. Es sollte keine Probleme geben.
Linting
Gibt es Fehler in Ihrem HTML-, CSS- oder JavaScript-Code? Wenn Sie Lint in Ihren Workflow einbinden, können Sie die Codequalität aufrechterhalten und Regressionen vermeiden. Wir empfehlen HTMLHint, StyleLint und ESLint. Diese können als Code-Editor-Plug-ins verwendet oder über die Befehlszeile in Workflow-Prozessen und Tools zur kontinuierlichen Integration wie Travis ausgeführt werden.
Defekte Links und Bilder
Es gibt viele Tools, mit denen Sie während der Build- und Laufzeit nach defekten Links suchen können, darunter Chrome-Erweiterungen (diese ist gut) und Node-Tools wie Broken Link Checker.
Plug-ins
: Plug-ins wie Flash und Silverlight können ein Sicherheitsrisiko darstellen. Die Unterstützung für sie wurde eingestellt und sie funktionieren nicht auf Mobilgeräten. Mit Lighthouse nach Plug-ins suchen
Mit verschiedenen Geräten und Kontexten testen
Am besten lassen Sie Ihre Website von echten Nutzern mit echten Geräten, mehreren Browsern und unterschiedlichen Verbindungskontexten testen.
Einige dieser Prüfungen sind relativ subjektiv, können aber Probleme aufzeigen, die sich auf die wahrgenommene Leistung auswirken. Fehlerhafte Links verschwenden beispielsweise Zeit und wirken „nicht reaktionsschnell“. Unleserlicher Text ist nur schwer zu lesen.
Geräteübergreifende Tests
Probieren Sie verschiedene Darstellungs- und Fenstergrößen aus. Verwenden Sie mindestens ein Mobilgerät und einen Computer. Testen Sie Ihre Website nach Möglichkeit auf einem Mobilgerät mit geringer Leistung und kleinem Display. Ist der Text gut lesbar? Sind Bilder beschädigt? Können Sie heranzoomen? Sind die Touchziele groß genug? Ist es langsam?
Reagiert eine Funktion nicht? Erstellen Sie einen Screenshot oder ein Video der Ergebnisse.
Plattformübergreifende Tests
Auf welche Plattformen möchten Sie Ihre Website ausrichten? Sie müssen die Browser und Betriebssysteme testen, die Ihre Nutzer jetzt und in Zukunft verwenden.
Verbindung
Mehrere Zielnetzwerktypen testen: „Verbunden“, „WLAN“ und „Mobilfunk“. Mit Browsertools können Sie verschiedene Netzwerkbedingungen emulieren.
Geräte
Testen Sie Ihre Website auf denselben Geräten wie Ihre Nutzer. Das folgende Foto zeigt dieselbe Seite auf zwei verschiedenen Smartphones.
Auf dem größeren Bildschirm ist der Text klein, aber gut lesbar. Auf dem kleineren Bildschirm rendert der Browser das Layout korrekt, aber der Text ist selbst bei herangezoomtem Bild unlesbar. Das Display ist verschwommen und hat einen Farbstich. Weiß sieht nicht weiß aus, was die Lesbarkeit von Inhalten erschwert.
Einfache Ergebnisse wie diese können weitaus wichtiger sein als unklare Leistungsdaten.
UI und UX testen
Barrierefreiheit, Nutzerfreundlichkeit und Lesbarkeit
Damit die Inhalte und Funktionen Ihrer Website für alle Nutzer zugänglich sind, müssen Sie die Vielfalt Ihrer Nutzer verstehen.
Mit Lighthouse und anderen Tools können Sie auf bestimmte Probleme mit der Barrierefreiheit prüfen. Am besten sind jedoch Tests unter realen Bedingungen. Lesen, navigieren und geben Sie Daten in verschiedenen Szenarien ein, z. B. im Freien bei Sonnenlicht oder in einem Zug. Bitten Sie Freunde, Familienmitglieder und Kollegen, Ihre Website zu testen. Versuchen Sie, Inhalte über einen Screenreader wie VoiceOver auf einem Mac oder NVDA unter Windows abzurufen.
Weitere Informationen zur Implementierung und Prüfung der Barrierefreiheit finden Sie im Udacity-Kurs zur Barrierefreiheit und im Web Fundamentals-Artikel How To Do an Accessibility Review (So führen Sie eine Prüfung auf Barrierefreiheit durch).
Bewahren Sie eine Kopie Ihrer Prüfung der Barrierefreiheit auf. Es ist wahrscheinlich, dass Sie einfache Verbesserungen vornehmen können, die für alle Nutzer von Vorteil sind.
Grundlegende UI- und UX-Probleme
Interaktionen, die nicht wie vorgesehen funktionieren, überladene Elemente in kleineren Fenstern und Ansichten, zu kleine Tippziele, nicht lesbare Inhalte, ruckeliges Scrollen… Öffnen Sie mehrere Seiten auf der Website, testen Sie die Navigation und alle Hauptfunktionen. Machen Sie Notizen.
Bilder, Audio und Video
Prüfen Sie, ob Inhalte über den Rand hinausragen, das falsche Seitenverhältnis verwendet wird, die Bilder nicht richtig zugeschnitten sind oder es Qualitätsprobleme gibt.
Subjektive UI-Tests
Diese sind möglicherweise nicht alle relevant, aber einfache Änderungen können das Refactoring erleichtern:
- Ist „Was kann ich hier tun?“ sofort klar, wenn Sie die Website öffnen?
- Sind Sie dazu verleitet, Inhalte zu konsumieren und Links zu folgen?
- Gibt es visuelle Hierarchien oder Pfade – oder hat alles dasselbe visuelle Gewicht?
- Ist das Layout überladen?
- Sind zu viele Schriftarten verwendet?
- Gibt es Bilder oder andere Inhalte, die entfernt werden könnten?
- Das Content-Design ist genauso wichtig wie das Interface-Design. Sind die Text- und Bildinhalte auf Ihrer Website für Mobilgeräte und Computer geeignet? Kann etwas weggelassen werden? Schreiben Sie für Mobilgeräte.