Lighthouse: 100 Punkte durch die Bank für benedikt.io

Obwohl so gut wie jede Seite meines Blogs bei den Google PageSpeed Insights immer 100 Punkte erreicht hat, sah es beim etwas zeitgemäßeren Lighthouse-Test in Google Chrome nicht ganz so gut aus. Folgende »Probleme« habe ich behoben, um auch dort eine perfekte 100er-Reihe zu erreichen.

Für eine perfekte 100er-Reihe spendiert Google sogar ein Feuerwerk.

Gleich vorweg, mein Ergebnis war auch vorher in Lighthouse keine Katastrophe und in den meisten fällen bereits im 90er-Bereich. Offen waren aber ein paar Detailverbesserungen, derer ich mich nun angenommen habe.

Beanstandungen durch Lighthouse

Fehler: »Links do not have a discernable name«

Der Fehler hat mich zunächst verwundert, denn er betraf mein Such-Icon rechts oben auf der Seite. Das hatte aber im Anchor-Text bereits das Wort »Suche« stehen. Wer genau liest, findet den Fehler, denn »discernable« bedeutet »erkennbar« und das war bei diesem Link nicht der Fall. Denn um die Lupe via CSS abbilden zu können, habe ich den Anchor-Text mittels span-Element ausgeblendet und mit CSS-Anweisungen die Lupe drumherum gebastelt. Abhilfe schafft hier ein einfaches aria-label als Anchor-Attribut.

Fehler: »Some elements have a [tabindex] value greater than 0«

Das hatte ich zwar gut gemeint, war aber zu altmodisch unterwegs. Anscheinend haben häufig schlecht oder falsch gesetzte Tab-Indizes im Lauf der Jahre dazu geführt, dass diese mehr schaden als nutzen. Die Reihenfolge beim Durchschalten interaktiver Elemente mittles Tabulator sollte man dem Browser überlassen, die tabindex-Attribute (die bei mir nur im Kommentarbereich zum Einsatz kamen) habe ich daher entfernt.

Fehler: »Background and foreground colors do not have a sufficient contrast ratio«

Ja, da spielt man sich vermeintlich lang genug mit den ohnehin schon spärlich eingesetzten Farben und dann macht einem eine simple Kontrastberechnung einen Strich durch die Rechnung. Also habe ich kurzerhand nicht nur meinen Blauton angepasst, sondern auch einen eigenen Blauton für den Dark Mode eingeführt. Hilfreich ist dabei der Contrast Checker von WebAIM.

Ein Detail habe ich dabei aber übersehen: Nach dem Ändern des Blautons, gerade stark genug, um die Vorgaben zu erfüllen, kam mir der Kontrast zum Body-Text zu gering vor. Es gibt den Contrast Checker aber auch für Links – und dort scheitert mein Blauton sogar am Einzel-A-Rating. Das muss ich mir wohl nochmal im Detail ansehen.

Fehler: »Lighthouse was unable to download a robots.txt file«

WordPress liefert eigentlich bereits dynamisch eine robots.txt aus, das passt Lighthouse aber nicht. Also habe ich auch eine »echte« robots.txt im Root-Verzeichnis hinterlegt. Fan bin ich von solchen Doppelgleisigkeiten allerdings keiner.

Interessante Beobachtung: Bildgröße in Relation zum Monitor

Interessant sind in Lighthouse z.B. Seiten mit Bildern, wie z.B. mein M1-iMac-Post. Hier beschwert sich Lighthouse nämlich bei einem 32-Zoll-Bildschirm und maximiertem Fenster, dass das Bild eine zu geringe Auflösung hat (»Serves images with low resolution«). Konkret sollte das Bild dort statt 880 × 495 lieber 1320 × 743 Pixel groß sein (»Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. Learn more.»). Der gleiche Test auf einem 14-Zoll-Laptop oder in einem verkleinerten Fenster am 32-Zöller: Kein Problem, 100 Punkte.