Wie ich die Website eines Vereins von 70 auf 100 Punkte gebracht habe

Die Website des slowenischen Naturistenvereins Društvo naturistov K naravi, knaravi.si, war aufgeräumt und ansprechend, auf dem Smartphone aber langsam: Googles PageSpeed Insights gab ihr 70 von 100 Punkten. Drei Wochen später erreichte sie 100 — dreimal hintereinander. Einen Zauberknopf gab es nicht. Es gab drei Ursachen, die viele andere Websites ebenfalls haben, und eine Falle, mit der ich nicht gerechnet hatte.

Zuerst: wie ich gemessen habe

Alle Zahlen stammen aus PageSpeed Insights, Reiter Mobil. Google öffnet die Seite dort auf einem absichtlich verlangsamten Smartphone mit langsamerer Verbindung — strenger, als die meisten Besucher sie erleben. Jede Messung habe ich dreimal hintereinander wiederholt, denn eine einzelne Zahl schwankt: Dieselbe, unveränderte Seite ergab am selben Tag 81, dann 72 und dann dreimal hintereinander 70. Ich traue nur einer Zahl, die sich wiederholt.

* eine einzelne Messung. Fett gedruckte Werte wurden dreimal hintereinander gemessen. Am Ende stehen auch Barrierefreiheit, Best Practices und SEO bei 100, ebenso die Geschwindigkeit am Computer.

Erster Schritt: Dinge, die laden, bevor sie jemand braucht

Das Titelbild schickte Smartphones 268 KB, obwohl es dort klein angezeigt wird — jetzt bekommen sie eine Version mit 116 KB. Sechs Galerieseiten luden vorab ein Bild, das sie gar nicht verwendeten. Am teuersten war aber der Spamschutz des Kontaktformulars (Google reCAPTCHA): Er wurde beim Öffnen der Seite geladen, obwohl ihn nur braucht, wer eine Nachricht schreibt. Auf meiner eigenen Website habe ich gemessen, dass das etwa 14 Punkte kostet. Jetzt lädt er erst, wenn ein Besucher ins Formular klickt — und als Nebeneffekt erhält er keine Google-Cookies, bis er selbst zu schreiben beginnt.

Zweite Ursache: Schriften

Die Website nutzte Google Fonts, die von Googles Servern geladen werden. Als ich nachsah, was der Browser tatsächlich herunterlädt, fand ich eine Überraschung: Dieselbe Schrift wurde bis zu viermal geladen — 682 KB statt 228 KB. Gleichzeitig blieb die Seite fast eine Sekunde lang leer (871 ms in der Messung), weil der Browser auf sie wartete.

Die Lösung: Die Schriften liegen jetzt auf demselben Server wie die Website, jede Datei einmal. Bis sie da sind, zeichnet eine Systemschrift den Text — so vergrößert und gesperrt, dass sie genau gleich viel Platz einnimmt. Beim Wechsel verschiebt sich nichts. Ergebnis: 92, 92, 92.

Dritte Ursache: Statistik für alle

Das Google-Analytics-Skript wurde jedem Besucher geladen, auch denen, die im Cookie-Hinweis nicht in die Statistik eingewilligt hatten — ohne Einwilligung speicherte es keine Cookies, heruntergeladen wurde es trotzdem. Jetzt lädt es erst nach der Einwilligung. Das ist fairer gegenüber den Besuchern und schneller: 100, 100, 100. Der Preis ist bekannt und akzeptiert: In der Statistik erscheinen nur noch Besucher, die einwilligen.

Die Falle, mit der ich nicht gerechnet hatte

Gleich danach fiel eine der Galerieseiten von 100 auf 87. Auf ihr hatte sich nichts geändert — geändert hatte sich, dass etwas fehlte. Das Google-Skript hatte den Moment verzögert, in dem der Browser die Seite für geladen erklärt. Ohne das Skript kam dieser Moment früher, die Schriften, die darauf warten, wurden geladen, bevor das erste Bild erschien, und Google rechnete sie in die Zeit bis zur Anzeige ein. Die Schriften laden jetzt eine Sekunde später — und die Galerie steht wieder dreimal bei 100.

Lehre: Wer ein Skript entfernt, sollte prüfen, was darauf gewartet hat.

Und etwas, das die Punktzahl nicht zeigt

Bei 100 Punkten war alles „perfekt“ — bis ich beim Ansehen einer Reportage bemerkte, dass die Buchstaben in der ersten Sekunde anders aussahen und dann größer wurden. Die Punktzahl erfasst das nicht, weil sich nichts verschiebt: Die Ersatzschrift hat dieselben Maße, aber anders geformte Buchstaben. Jetzt bleibt die erste Seite eines Besuchs durchgehend in der Ersatzschrift, die echten Schriften werden nebenbei geladen, und jede weitere Seite zeigt sie schon beim ersten Aufbau. Die Punktzahl blieb bei 100, und die Buchstaben bleiben ruhig.

Was Sie für Ihre eigene Website mitnehmen können

• Messen Sie dreimal, bevor Sie einer Zahl glauben — und ungefähr zur gleichen Tageszeit.
• Wenn die Punktzahl fällt, fragen Sie, welche der fünf Messungen gefallen ist. PageSpeed zeigt unter der Punktzahl fünf Werte; einer davon führt schneller zur Ursache als jede Vermutung.
• Lassen Sie fremde Skripte warten, bis sie jemand braucht — Formularschutz, Chat, Karten, Statistik.
• Hosten Sie Ihre Schriften selbst und prüfen Sie, wie oft sie tatsächlich geladen werden.
• Sehen Sie sich die Seite auch mit eigenen Augen an. 100 Punkte bedeuten nicht, dass sich der Besucher wohlfühlt.

Wie die Vereinswebsite entstanden ist, lesen Sie in der Projektgeschichte knaravi.si, die Grundlagen der Geschwindigkeitsmessung im Artikel Warum die Geschwindigkeit einer Website wichtig ist.