Bevor Sie Leistungsmesswerte für einen Website-Audit erfassen, können Sie einige 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 einfache Fehler und entfernen Sie unnötige Assets und Code, wenn möglich, bevor Sie die Leistung messen. Achten Sie aber darauf, dass Sie eine Aufzeichnung der Probleme und Korrekturen vor und nach der Optimierung haben. Diese Verbesserungen können weiterhin Teil Ihrer Prüfungsarbeit sein.
Websitearchitektur und Assets
Können Elemente wie nicht verwendete Legacy-Seiten, Inhalte oder andere Assets einfach aus dem Code-Repository und von der Website entfernt werden? Suchen Sie nach verwaisten Seiten, redundanten Vorlagen, nicht verwendeten Bildern und nicht verwendetem Code und nicht verwendeten Bibliotheken.
Laufzeitfehler
Prüfen Sie, ob in der Browserkonsole Fehler gemeldet werden. Es sollte kein :) geben.
Linting
Sind Fehler in Ihrem HTML-, CSS- oder JavaScript-Code vorhanden? Wenn Sie Linting in Ihren Workflow einbauen, können Sie die Codequalität aufrechterhalten und Regressionen vermeiden. Wir empfehlen HTMLHint, StyleLint und ESLint, die als Code-Editor-Plug-ins verwendet oder über die Befehlszeile in Workflowprozessen und Tools für die kontinuierliche Integration wie Travis ausgeführt werden können.
Defekte Links und Bilder
Es gibt viele Tools, mit denen Sie zur Build-Zeit und zur Laufzeit nach defekten Links suchen können, darunter Chrome-Erweiterungen (diese hier 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
Am besten ist es, wenn echte Nutzer Ihre Website auf echten Geräten, in verschiedenen Browsern und unter unterschiedlichen Verbindungsbedingungen testen.
Einige dieser Prüfungen sind relativ subjektiv, aber sie können Probleme erkennen, die sich auf die wahrgenommene Leistung auswirken. Fehlerhafte Links sind beispielsweise zeitaufwendig und wirken „nicht reaktionsschnell“. Unleserlicher Text ist schwer zu lesen.
Geräteübergreifende Tests
Testen Sie verschiedene Darstellungsbereiche und Fenstergrößen. Verwenden Sie mindestens ein Mobilgerät und einen Computer. Testen Sie Ihre Website nach Möglichkeit auf einem Mobilgerät mit geringen Spezifikationen und einem kleinen Display. Ist der Text lesbar? Sind Bilder defekt? Kannst du zoomen? Sind die Tippziele groß genug? Ist es langsam?
Reagieren bestimmte Funktionen nicht? Machen Sie einen Screenshot oder ein Video von den Ergebnissen.
Plattformübergreifende Tests
Welche Plattformen sind Ihre Zielplattformen? Sie müssen Tests in den Browsern und Betriebssystemen durchführen, die Ihre Nutzer jetzt und in Zukunft verwenden.
Konnektivität
Auf mehreren Zielnetzwerktypen testen: verbunden, WLAN und Mobilfunk. Mit Browsertools können Sie verschiedene Netzwerkbedingungen simulieren.
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 lesbar. Auf dem kleineren Bildschirm wird das Layout im Browser korrekt gerendert, aber der Text ist auch bei Vergrößerung nicht lesbar. Das Display ist verschwommen und hat einen Farbstich – Weiß sieht nicht weiß aus –, wodurch Inhalte weniger gut lesbar sind.
Solche einfachen Erkenntnisse können viel wichtiger sein als obskure 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 berücksichtigen.
Lighthouse und andere Tools testen auf bestimmte Barrierefreiheitsprobleme, aber nichts geht über Tests in der Praxis. Probieren Sie das Lesen, Navigieren und Eingeben von Daten in verschiedenen Szenarien aus, 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 nutzen.
Weitere Informationen zur Implementierung und Überprüfung der Barrierefreiheit finden Sie im Udacity-Kurs zur Barrierefreiheit und im Web Fundamentals-Artikel Prüfung auf Barrierefreiheit durchführen.
Bewahren Sie eine Aufzeichnung Ihres Bedienungshilfen-Audits auf. Wahrscheinlich können Sie einfache Verbesserungen vornehmen, die allen Nutzern zugutekommen.
Grundlegende Probleme mit Benutzeroberfläche und ‑freundlichkeit
Interaktionen, die nicht wie erwartet funktionieren, überlaufende Elemente in kleineren Fenstern und Viewports, zu kleine Tippziele, unleserliche Inhalte, ruckelndes Scrollen – öffnen Sie mehrere Seiten auf der Website, probieren Sie die Navigation und alle Hauptfunktionen aus. Aufzeichnungen führen.
Bilder, Audio und Video
Prüfen Sie, ob Inhalte überlaufen, das falsche Seitenverhältnis verwendet wird, der Zuschnitt schlecht ist und Qualitätsprobleme vorliegen.
Subjektive UI-Tests
Möglicherweise sind nicht alle relevant, aber einfache Änderungen können das Refactoring erleichtern:
- Ist sofort klar, was ich auf der Website tun kann, wenn ich sie öffne?
- Sind Sie geneigt, Inhalte zu konsumieren und Links zu folgen?
- Gibt es visuelle Hierarchien oder Pfade oder haben alle Elemente das gleiche visuelle Gewicht?
- Ist das Layout unübersichtlich?
- Sind zu viele Schriftarten vorhanden?
- 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 ausgeschlossen werden? Für Mobilgeräte schreiben: