Bevor Sie Leistungsmesswerte für ein Website-Audit erfassen, können Sie verschiedene Prüfungen durchführen, um einfache Korrekturen und Bereiche zu identifizieren, die Sie besonders hervorheben sollten.
Gültigkeitsprüfung: Architektur und Code
Bezahlen Sie technische Schulden.
Beheben Sie nach Möglichkeit einfache Fehler und entfernen Sie nicht benötigte Assets und Code, bevor Sie die Leistung messen. Erstellen Sie jedoch Vorher-Nachher-Aufzeichnungen zu Problemen und Fehlerbehebungen. Diese Verbesserungen können immer noch Teil Ihrer Prüfungsarbeit sein.
Websitearchitektur und Assets
Lassen sich einfach alles aus dem Code-Repository und von der Website entfernen, z. B. nicht verwendete Legacy-Seiten, Inhalte oder andere Assets? Suchen Sie nach verwaisten Seiten, redundanten Vorlagen, nicht verwendeten Bildern und nicht verwendetem Code und Bibliotheken.
Laufzeitfehler
Hier finden Sie Fehler, die in der Browserkonsole gemeldet werden. :).
Lint
Enthält Ihr HTML-, CSS- oder JavaScript-Code Fehler? Linting in Ihren Workflow integriert, kann dabei helfen, die Codequalität aufrechtzuerhalten und Regressionen zu vermeiden. Wir empfehlen HTMLHint, StyleLint und ESLint, die als Code-Editor-Plug-ins verwendet oder über die Befehlszeile in Workflow-Prozessen und Continuous-Integration-Tools wie Travis ausgeführt werden können.
Fehlerhafte Links und Images
Es gibt viele Tools, mit denen Sie zum Zeitpunkt der Build-Erstellung und ‐Laufzeit auf fehlerhafte Links testen können, darunter Chrome-Erweiterungen (dieses ist geeignet) und Knotentools wie die Prüfung fehlerhafter Links.
Plug-ins
Plug-ins wie Flash und Silverlight können ein Sicherheitsrisiko darstellen. Die Unterstützung dafür wurde eingestellt und auf Mobilgeräten funktionieren sie nicht mehr. Suchen Sie mit Lighthouse nach Plug-ins.
Tests mit verschiedenen Geräten und Kontexten
Nichts ist besser, als Nutzer Ihre Website mit echten Geräten, mehreren Browsern und unterschiedlichen Konnektivitätskontexten zu testen.
Einige dieser Prüfungen sind relativ subjektiv, können aber Probleme identifizieren, die sich auf die wahrgenommene Leistung auswirken. Fehlerhafte Links, die beispielsweise Zeit verschwenden und das Gefühl haben, nicht zu reagieren. Unlesbarer Text ist langsam zu lesen.
Geräteübergreifende Tests
Probiere verschiedene Größen für Darstellungsbereich und Fenster aus. Verwenden Sie mindestens ein Mobil-
und ein Desktop-Gerät. Versuchen Sie Ihre Website nach Möglichkeit auf einem Mobilgerät mit weniger Spezifikationen und einem kleinen Bildschirm. Ist der Text lesbar? Sind Bilder fehlerhaft? Können Sie zoomen? Sind Berührungszielbereiche groß genug? Ist das Gerät langsam?
Reagieren Funktionen nicht? Erstellen Sie einen Screenshot oder ein Video der Ergebnisse.
Plattformübergreifende Tests
Auf welche Plattformen richten Sie Ihre Anzeigen ein? Sie müssen Tests mit den Browsern und Betriebssystemen durchführen, die Ihre Nutzer jetzt und in Zukunft verwenden.
Konnektivität
Testen Sie in mehreren Zielnetzwerktypen: verbunden, WLAN und Mobilfunk. Mit Browsertools können Sie verschiedene Netzwerkbedingungen emulieren.
Geräte
Achten Sie darauf, Ihre Website auf denselben Geräten wie Ihre Nutzer auszuprobieren. Das folgende Bild 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 auch beim Heranzoomen nicht lesbar. Das Display ist verschwommen und hat einen Farbstich – Weiß wirkt nicht weiß –, wodurch Inhalte weniger gut lesbar sind.
Einfache Erkenntnisse wie diese können weitaus wichtiger sein als unklare Leistungsdaten.
UI und UX ausprobieren
Barrierefreiheit, Nutzerfreundlichkeit und Lesbarkeit
Damit die Inhalte und Funktionen Ihrer Website für alle zugänglich sind, müssen Sie die Vielfalt der Nutzer verstehen.
Lighthouse und andere Tools testen bestimmte Probleme mit der Barrierefreiheit. Aber nichts geht über Tests in der Praxis. Versuchen Sie, Daten in verschiedenen Szenarien zu lesen, zu navigieren und einzugeben, z. B. im Freien bei Sonnenlicht oder in einem Zug. Bitten Sie Freunde, Familienmitglieder und Kollegen, Ihre Website auszuprobieren. Sehen Sie sich Inhalte mit einem Screenreader wie VoiceOver unter Mac oder NVDA unter Windows an.
Weitere Informationen zur Implementierung und Überprüfung der Barrierefreiheit finden Sie im Udacity-Kurs zur Barrierefreiheit und im Web Fundamentals-Artikel How To Do an Accessibility Review.
Dokumentieren Sie Ihre Prüfung zur Barrierefreiheit. Vermutlich sind Sie in der Lage, einfache Verbesserungen vorzunehmen, die allen Nutzenden zugutekommen.
Grundlegende Probleme mit der Benutzeroberfläche und der Nutzererfahrung
Interaktionen, die nicht wie vorgesehen funktionieren, überlaufende Elemente in kleineren Fenstern und Darstellungsbereichen, zu kleine Tippziele, nicht lesbare Inhalte, langes Scrollen... Öffne mehrere Seiten der Website und probiere die Navigation und alle Hauptfunktionen aus. Protokollieren Sie Ihre Daten.
Bilder, Audio und Video
Testen Sie Inhalte auf überlaufende Inhalte, ein falsches Seitenverhältnis, schlechtes Zuschneiden und Qualitätsprobleme.
Subjektive UI-Tests
Nicht alle sind relevant, aber einfache Änderungen können die Refaktorierung erleichtern:
- Wird die Frage „Was kann ich hier tun?“ sofort angezeigt, wenn Sie die Website öffnen?
- Sehen Sie sich Inhalte an und folgen Sie Links?
- Gibt es visuelle Hierarchien oder Pfade – oder hat alles die gleiche visuelle Gewichtung?
- Ist das Layout unübersichtlich?
- Gibt es zu viele Schriftarten?
- Gibt es Bilder oder andere Inhalte, die entfernt werden könnten?
- Das Inhaltsdesign ist genauso wichtig wie das Design der Benutzeroberfläche. Sind die Text- und Bildinhalte Ihrer Website für mobile und Desktop-Kontexte geeignet? Kann etwas eliminiert werden? Für Mobilgeräte schreiben