Geschrieben von

Lighthouse-Audit

Schublade

Unter https://web.dev/measure lässt sich die eigene Webseite auf diverse Faktoren analysieren. Nutzt man dieses Tool von Google, so wird hier auf Lighthouse zurückgegriffen. Lighthouse wiederum ist ein Open-Source-Tool, welches verschiedene Webseiten-Bereiche unter die Lupe nimmt und Optimierungsvorschläge macht. Zu den Bereichen gehören:

  • Performance: Hier steht Pagespeed im Fokus.
  • Best Practices: Schaut sich verschiedene Aspekte wie Verwendung von SSL oder JavaScript an.
  • SEO: Hier geht es um SEO-Aspekte.
  • Accessibility: Hier stehen Themen im Fokus, die den Webseiten-Zugang für Nutzer erschweren könnten.

Analyse durchführen

Die Analyse ist relativ schnell durchgeführt. Zunächst ruft man https://web.dev/measure auf (oder man nutzt das Lighthouse-Chrome-Plugin) und gibt in die Eingabemaske die gewünschte URL ein:

Im Anschluss bekommt man 3 Ergebnisse ausgespielt:

  • Score-Werte für Performance, Best Practices, SEO und Accessibility
  • Pagespeed-Werte
  • Optimierungsvorschläge aus den 4 Bereichen

Die ersten Ergebnisse sind die Score-Werte. Von 0 bis 100 werden die 4 Bereiche bewertet, wobei 100 den besten Wert darstellt. Je höher der Wert desto mehr Analyse-Aspekte deckt die Webseite aus dem Lighthouse-Tool schon ab. Das Ganze sieht wie folgt aus:

Der zweite Ergebnisblock bezieht sich auf den Pagespeed und gibt einige Kennzahlen aus den User-centric Performance Metrics wider:

Gleich unter den Pagespeed-Werten bekommt man eine Auflistung bei welchen Analyse-Punkten noch Nachholbedarf existiert. Hier lässt sich nach “Impact” – also Einfluss – sortieren, um eine Priorisierung in “High”, “Medium” und “Low” zu erhalten. Daneben werden die einzelnen Punkte kategorisiert (Performance, Best Practices, SEO und Accessibility). Zudem gibt es unter der Spalte “Guide” noch Links zu weiterführenden Informationen der einzelnen Analyse-Punkte:

Um mit dem Report und den Ergebnissen zu arbeiten hat man 3 Möglichkeiten:

  • Die aufgelisteten Optimierungsaspekte kopieren und an den Entwickler direkt geben.
  • Wenn man mehr Details haben möchte (z.B. nicht nur was optimiert werden kann, sondern auch welche Aspekte die Webseite positiv bestanden hat), so kann man mit einem Klick auf “View Report” Details einblenden lassen.
  • Oder man lädt sich den Report direkt herunter (“Download Report”) und gibt ihn der Entwicklung.

Optimierungen

Sobald man die Analyse-Ergebnisse vorliegen hat, kann es mit den Optimierungen losgehen. Nachfolgend gehe ich auf die Optimierungsvorschläge aus dem Bereich SEO näher ein und zeige, was man tun muss, um hier vom Tool grünes Licht zu bekommen. Ich werde auf jeden einzelnen Punkt eingehen. Wichtig: Damit will ich nicht sagen, dass auch jeder Punkt optimiert werden muss. Man sollte keinem Tool blind vertrauen, sondern muss vorher zunächst technischen Möglichkeiten und die Umsetzbarkeit prüfen. Zudem ist es immer eine Kosten-Nutzen-Abwägung. Daher sollte genau überlegt werden, was davon tatsächlich Sinn macht und was nicht. Notwendige Optimierungen zu den Meldungen aus Performance, Best Practices und Accessibility können in der Google-Doku nachgeschlagen werden.

SEO

Das Tool unterteilt hier in:

  • Content best practices
  • Mobile friendly
  • Crawling and indexing
  • Additional items to manually check

Welche Hinweise es aus den einzelnen Kategorien gibt und was man dagegen tun kannst erfährst du nachfolgend.

Content best practices

  • Document doesn’t have a meta description: Hier fehlt der Seite die Meta-Description, die man hinzufügen sollte.
  • Links do not have descriptive text: Sobald ein interner Link mit einem sehr generischen Wort wie “hier”, “mehr”, “hier klicken”, usw. verlinkt ist, schlägt das Tool an. Um das zu lösen, sollte man auf der betreffenden Seite die interne Verlinkung anpassen und aussagekräftigere Linkttexte verwenden.
  • Document doesn’t have a valid hreflang: Sobald es das Dokument in mehreren Sprachen gibt, muss ein Hreflang vorhanden sein, damit man diese Meldung löst.
  • Document doesn’t have a valid rel=canonical: Auch hier gilt es einfach den Canonical-Tag sinnvoll einzusetzen, damit diese Meldung verschwindet.
  • Document uses plugins: Sobald Inhalte über Plugins (embed, object, applet) ausgespielt werden (meist auch an Dateiendungen wie swf, flv, class und xap zu erkennen) schlägt das Tool Alarm. Hier sollte man die Plugins entfernen und die Inhalte über normales HTML ausspielen.

Mobile friendly

  • Document doesn’t use legible font sizes: Schriftgrößen unter 12px können besonders auf Mobile schwer gelesen werden, weshalb dann diese Meldung erscheint. Hierbei meldet Lighthouse neben “Source” auch “Selector”, “% of Page Text” und die “Font Size” der betroffenen Schriftart aus. Lösung: Schriftgröße auf min. 12px setzen.
  • Tap targets are not sized appropriately: Hier geht es um Elemente, die prominent zum Klicken animieren sollen. Hauptsächlich betrifft dies Buttons oder deutlich hervorgehobene Links. Sobald diese zu klein sind oder zu nah beieinander liegen, wird dies vom Tool angemerkt. Hier also einfach die Elemente vergrößern oder die Abstände erhöhen. Hintergrund ist der, dass wenn bspw. 2 Buttons zu eng beieinander liegen, die Chance höher ist sich zu “Verklicken”, was den Nutzer eventuell verärgert.

Crawling and indexing

  • Page has unsuccessful HTTP status code: Sobald die analysierte Seite einen Status Code zwischen 400 und 599 zurückgibt, ist sie für die Analyse nicht greifbar. Hier nochmal schauen, ob man die richtige URL eingegeben hat oder ggf. den Fehler beheben.
  • Page is blocked from indexing: Ist ein “noindex” im Head-Bereich oder im HTTP-Header vorhanden, dann sagt hier Lighthouse, dass die URL nicht indexiert werden kann. Falls dies nicht gewünscht ist, dann sollte die Seite für eine Indexierung freigegeben werden.
  • robots.txt is not valid: Eine ungültige robots.txt kann die Suchmaschine nicht verarbeiten. Schaue dir meinen robots.txt-Guide an und prüfe nochmal die Anforderungen.

Additional items to manually check

  • Manually check structured data is valid: Wenn strukturierte Daten eingesetzt werden, sollten diese mit https://search.google.com/structured-data/testing-tool/ oder http://linter.structured-data.org/ nochmal manuell geprüft werden.

Last modified: 19. Dezember 2019