Bevor Sie Leistungsmesswerte für eine Websiteprüfung erfassen, können Sie mehrere Prüfungen durchführen, um einfache Korrekturen und Bereiche zu identifizieren, auf die Sie sich konzentrieren sollten.
Gültigkeitsprüfung: Architektur und Code
Beheben Sie nach Möglichkeit einfache Fehler und entfernen Sie nicht benötigte Assets und Code, bevor Sie die Leistung messen. Achten Sie aber darauf, Probleme und Fehlerbehebungen vorher und nachher zu dokumentieren. Diese Verbesserungen können trotzdem Teil Ihrer Audit-Arbeit sein.
Websitearchitektur und Assets
Kann etwas einfach aus dem Code-Repository und von der Website entfernt werden, z. B. ungenutzte alte Seiten, Inhalte oder andere Assets? Suchen Sie nach verwaisten Seiten, redundanten Vorlagen, nicht verwendeten Bildern sowie nicht verwendetem Code und nicht verwendeten Bibliotheken.
Laufzeitfehler
Prüfen Sie, ob in der Browserkonsole Fehler gemeldet werden. Es sollte keine geben :).
Linting
Gibt es Fehler in Ihrem HTML-, CSS- oder JavaScript-Code? Wenn Sie Linting 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 Workflowprozessen und CI-Tools wie Travis ausgeführt werden.
Fehlerhafte Links und Bilder
Es gibt viele Tools, mit denen du während der Erstellung und Laufzeit nach fehlerhaften Links suchen kannst, darunter Chrome-Erweiterungen (dieses Tool 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 in verschiedenen Kontexten testen
Nichts ist besser, als echte Menschen Ihre Website mit echten Geräten, mehreren Browsern und unterschiedlichen Verbindungskontexten testen zu lassen.
Einige dieser Prüfungen sind relativ subjektiv, können aber Probleme identifizieren, die sich auf die wahrgenommene Leistung auswirken. Fehlerhafte Links beispielsweise kosten Zeit und wirken „nicht reagierend“. Unleserlicher Text ist schwer zu lesen.
Geräteübergreifende Tests
Testen Sie verschiedene Darstellungsbereich- und Fenstergrößen. Verwenden Sie mindestens ein Mobilgerät und ein Desktop-Gerät. Testen Sie Ihre Website nach Möglichkeit auf einem Mobilgerät mit geringer Leistung und kleinem Bildschirm. Ist der Text lesbar? Sind Bilder fehlerhaft? Kannst du zoomen? Sind die Berührungszielbereiche groß genug? Ist es langsam?
Reagieren bestimmte Funktionen nicht? Erstelle einen Screenshot oder ein Video der Ergebnisse.
Plattformübergreifende Tests
Welche Plattformen sind Ihre Zielgruppe? Sie müssen Ihre Designs in den Browsern und Betriebssystemen testen, die Ihre Nutzer jetzt und in Zukunft verwenden.
Konnektivität
Tests für mehrere Zielnetzwerktypen: verbunden, WLAN und Mobilfunk. Mit Browser-Tools können Sie verschiedene Netzwerkbedingungen emulieren.
Geräte
Testen Sie Ihre Website auf denselben Geräten, die auch Ihre Nutzer verwenden. Das folgende Foto zeigt dieselbe Seite auf zwei verschiedenen Smartphones.
Auf dem größeren Bildschirm ist der Text klein, aber lesbar. Auf dem kleineren Bildschirm wird das Layout vom Browser korrekt gerendert, aber der Text ist unleserlich, selbst wenn herangezoomt wird. Das Display ist unscharf und hat einen Farbstich – Weiß sieht nicht weiß aus –, 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 Ihrer Nutzer verstehen.
Lighthouse und andere Tools testen auf bestimmte Probleme mit der Barrierefreiheit im Internet, 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. Versuchen Sie, Inhalte über einen Screenreader wie VoiceOver auf dem Mac oder NVDA unter Windows zu konsumieren.
Weitere Informationen zur Implementierung und Überprüfung der Barrierefreiheit im Internet finden Sie im Udacity-Kurs zur Barrierefreiheit im Internet und im Web Fundamentals-Artikel How To Do an Accessibility Review.
Führen Sie ein Protokoll über Ihre Prüfung der Barrierefreiheit. Wahrscheinlich können Sie einfache Verbesserungen vornehmen, die für alle Nutzer gut sind.
Grundlegende Probleme mit der Benutzeroberfläche und der UX
Interaktionen, die nicht wie erwartet funktionieren, überlaufende Elemente in kleineren Fenstern und Darstellungsbereichen, zu kleine Berührungsziele, unlesbarer Inhalt, ruckelndes Scrollen… Öffnen Sie mehrere Seiten auf der Website, probieren Sie die Navigation und alle Hauptfunktionen aus. Führen Sie Aufzeichnungen.
Bilder, Audio und Video
Teste auf überlaufende Inhalte, falsches Seitenverhältnis, schlechten Zuschnitt und Qualitätsprobleme.
Subjektive UI-Tests
Diese sind möglicherweise nicht alle relevant, aber einfache Änderungen können das Refaktorieren erleichtern:
- Ist sofort klar, was Sie hier tun können, wenn Sie die Website öffnen?
- Werden Sie dazu verleitet, Inhalte zu konsumieren und Links zu folgen?
- Gibt es visuelle Hierarchien oder Pfade – oder haben alle Elemente dasselbe visuelle Gewicht?
- Ist das Layout überladen?
- Gibt es zu viele Schriftarten?
- Gibt es Bilder oder andere Inhalte, die entfernt werden könnten?
- Inhaltsdesign ist genauso wichtig wie das Design der Benutzeroberfläche. Sind die Text- und Bildinhalte auf Ihrer Website für Mobilgeräte und Computer geeignet? Kann etwas eliminiert werden? Für Mobilgeräte optimieren: