Webseiten-Analyse mit Chrome DevTools

Im Chrome DevTool gibt es den Reiter "Audits". Der Audit hilft bei der Optimierung der Seite und kann mit diversen Einstellungen unterschiedliche Ausgangssituationen simulieren. Empfehlenswert ist es, den Audit aus einem Inkognito-Fenster heraus zu starten, damit auf keinen Fall Dateien aus dem Cache geladen werden und vor allem keine Chrome-Extension dazwischenfunkt. 

Nachdem der Audit durchgelaufen ist, werden die Ergebnisse in 5 Kategorien aufgeteilt:

Hier werden Werte gemessen wie die Zeiten in Sekunden bis zur ersten aussagekräftigen Anzeige von Inhalten und bis zur ersten Interaktionsmöglichkeit. Diese Werte sind besonders wichtig, um z.B. die Absprungrate einer Seite zu optimieren. Audits vergibt hier auch immer bis zu 100 Punkte, was eine gute Vergleichsmöglichkeit zum aktuellen "Standard" gibt.

Hier wird auf die Accessibility der Webseite eingegangen. Der Audit empfiehlt in diesem Fall das zusätzliche manuelle Testen, da viele wichtige Punkte nicht automatisch getestet werden können. 

Accessibility bezieht sich in diesem Fall vor allem auf die Benutzerfreundlichkeit für Menschen mit  Sehbehinderungen. Der Audit checkt hier also unter anderem den Kontrast des Textes zum Hintergrund, aber auch ob Buttons eindeutige Namen haben usw.

Hier kommen von Google ein paar Tipps, wie man die Seite allgemein ein wenig moderner machen kann. Danke Google!

Unter anderem werden hier aktuellere Technologien empfohlen, es wird mitgeteilt, wenn Browser Errors auf der Console ausgegeben werden oder auch, ob sich auf der Seite  Frontend JavaScript Libraries mit bekannten Schwachstellen finden lassen.

Hier zeigt sich, wie die Seite SEO-technisch abschneidet. Zusätzlich werden direkt Tipps angezeigt, wie man die SEO-Wertung verbessern kann. Auch hier weist der Audit wieder darauf hin, dass Lighthouse nicht alle relevanten Aspekte checkt; somit sollten weitere Maßnahmen zur Seitenoptimierung getroffen werden – für einen ersten Überblick aber reicht der Audit durchaus aus.

Checkt die wichtigsten Aspekte für eine PWA, unter anderem die Schnelligkeit, die Offline-Verfügbarkeit und inwiefern die Seite für PWAs optimiert ist.

Der Audit verweist hier zusätzlich noch auf eine Checkliste.

Der Audit kann viel, aber sicherlich nicht alles. Gerade in der SEO und der Accessibility muss man viel zusätzlich manuell testen. Dazu kommt, dass der Audit nur die aktuelle Seite testen kann, wer also eine komplette Seite mit allen Unterseiten checken will, muss auf externe Programme zurückgreifen oder den Audit auf jeder einzelnen Seite starten.

Für einen schnellen Überblick beim Entwickeln ist der Audit vom Google Chrome DevTool aber mehr als ausreichend.