Die 100 Punkte Herausforderung

Lang­sa­me Web­sei­ten ner­ven. Men­schen bevor­zu­gen schnel­le Web­sei­ten, des­we­gen tut Goog­le das auch. Wer sei­ne wert­vol­len Inhal­te nicht durch tech­ni­sche Pro­ble­me abge­wer­tet sehen will, soll­te sich um die Per­for­mance sei­ner Sei­te küm­mern. Goog­le Page­speed Insights gibt dazu wich­ti­ge Tipps. Wer alle umsetzt bekommt 100 Punk­te – gar nicht so einfach.

Goog­le Page­speed Insights ana­ly­siert Dei­ne Web­sei­te und zeigt Dir, wel­che Pro­ble­me du besei­ti­gen musst. Das Tool unter­schei­det dabei drei Fak­to­ren: Die Per­for­mance auf mobi­len und auf Desk­top Gerä­ten und die Nut­zer­er­fah­rung auf mobi­len Geräten.

Fit fürs Smartphone

Mein altes Lay­out stamm­te aus dem Som­mer 2012. Das hat­te ich damals kom­plett selbst erstellt. Kei­ne Frame­works. Jedes Stück HTML, jede CSS-For­ma­tie­rung waren von mir. Es war aber nicht respon­siv – es hat sich nicht auto­ma­tisch ange­passt, wenn man es auf einem Smart­phone auf­ge­ru­fen hat. Das nach­zu­rüs­ten wäre kom­pli­ziert gewor­den. Zeit für einen neu­en Anfang.

Ich mag das Mate­ri­al Design der aktu­el­len Goog­le-Pro­duk­te. Mit materialize.css gibt es ein CSS-Frame­work, das viel Arbeit abnimmt: Zum einen hilft es respon­si­ve Web­sei­ten zu bau­en. Zum ande­ren sehen die nach Mate­ri­al Design aus. Für eine simp­le Ver­si­on eines Word­Press-The­mes habe ich mit materialize.css ein paar Minu­ten gebraucht.

Dann kam der Fein­schliff: materialize.css bie­tet eini­ge Hilfs-CSS-Klas­sen, mit denen man Ele­men­te je nach Grö­ße des Bild­schirms ver­ste­cken kann. Alles was nicht unbe­dingt nötig ist, habe ich ver­schwin­den las­sen für Besu­cher mit Smart­phones. Die Schrift­ar­ten muss­te ich teil­wei­se schrump­fen las­sen, damit sie das Lay­out nicht auf klei­nen Bild­schir­men aus­ein­an­der drücken.

Am Ende brach­te das die ers­te „100“ im Insights-Test: 100/​100 Punk­te für die mobi­le Nutzererfahrung.

WordPress Beine machen

Zwei Plug­ins sor­gen dafür, dass die Sei­te so flott läuft: W3 Total Cache und Abo­ve The Fold Opti­miza­ti­on.

1. W3 Total Cache bringt den größ­ten Schub in der Per­for­mance: Ich habe den Page Cache, die Mini­fy-Funk­ti­on für HTML, CSS und Java­Script sowie Object- und Brow­ser-Cache akti­viert. Wie Du das Plug­in für Dei­nen Ser­ver am bes­ten ein­stellst, müss­test Du selbst recher­chie­ren. Für Goog­le Page­speed Insights genü­gend die Standard-Einstellungen.
2. An die­ser Stel­le hat­te ich schon 85 Punk­te im mobi­len Bereich und über 90 im Desk­top-Bereich. Nur ein Pro­blem war da noch: Das „Abo­ve the Fold“-Problem. Goog­le schlägt vor, das CSS  am Ende der Sei­te zu laden. Mit einem Tag an der rich­ti­gen Stel­le kannst Du das ein­fach umset­zen. Das sieht aber schei­ße aus: Erst lädt die Sei­te kom­plett ohne CSS und schal­tet dann sicht­bar um auf das kor­rek­te Lay­out. Eine Zwick­müh­le: Um mög­lichst weni­ge Datei­en zu laden, wird das gesam­te CSS in einer Datei kom­bi­niert. Wenn man es dann aber zum Schluss lädt, ist es schnell – sieht aber schei­ße aus.
   Eine Lösung bie­tet das „Abo­ve The Fold Optimization“-Plugin. Es teilt das CSS wie­der auf: Dann gibt es einen „kri­ti­schen“ Teil, der den Groß­teil der Sei­te for­ma­tiert und den Rest. Der Rest wird am Ende der Sei­te als exter­ne Datei gela­den. Der kri­ti­sche Teil wird direkt im HTML der Sei­te inte­griert! Ja genau, das ist genau das, was Du Dir frü­her abge­wöhnt hast, um Struk­tur und For­ma­tie­rung der Sei­te zu tren­nen. Aus Per­for­mance-Grün­den tut man das nun wieder.
   „Abo­ve The Fold Opti­miza­ti­on“ ver­linkt ein Tool, das das kri­ti­sche CSS extra­hiert. Dort gibt man die URL der Sei­te an und kopiert das CSS aus der Datei ein, die „W3 Total Cache“ erzeugt hat. Das Ergeb­nis kopierst Du nun in das gro­ße Feld in „Abo­ve the Fold Optimization“.
   Wenn die Sei­te nun lädt, bekommt der Brow­ser schon ein­mal die wich­tigs­ten CSS-For­ma­tie­run­gen im Hea­der und der Über­gang zur fer­ti­gen Dar­stel­lung ist wesent­lich flüssiger.

Grund­sätz­lich funk­tio­niert nun alles. Ich bekom­me 100 Punk­te in allen drei Tests. Noch immer sprin­gen eini­ge Ele­ment. Da muss ich noch ein paar CSS-Anwei­sun­gen in das Feld von Abo­ve-the-Folds kopie­ren. Soweit ich das ver­stan­den habe, sorgt „W3 Total Cache“ dafür, dass die CSS-Anwei­sun­gen nicht noch ein­mal in der Datei auf­tau­chen, die nach­ge­la­den wird.

Einiges bleibt zu tun

Per­for­mance ist natür­lich nur ein Aspekt einer guten Inter­net­sei­te. Wich­tig fin­de ich, dass die Tex­te gut zu lesen sind. Immer­hin besteht die Sei­te nur aus Texten.

Es feh­len noch eini­ge Ele­men­te. In der mobi­len Ver­si­on fehlt ein Link zurück zur Start­sei­te. Die Such­funk­ti­on ist schon wie­der raus­ge­flo­gen (Chris­tof, ich hab Dich nicht ver­ges­sen!). Und die Links zu mei­ne Social-Net­work-Pro­fi­len feh­len noch. Ins­ge­samt könn­te es noch ein wenig run­der aus­se­hen. Aber erst ein­mal geht es. Fällt Dir noch etwas auf?