Warum deine Seite am Handy langsam ist

Deine Seite ist am Handy langsam, weil sie dem Handy zu viel schickt: Bilder in Computergrösse, Dutzende Skripte und Stildateien, Dienste von fremden Servern, die alle laden, bevor der Besucher etwas sieht. Bei der alten Website von Crystal’s Karaoke schickte allein die Galerie 72,3 MB aufs Handy, so viel wie ein kurzer Film. Nach dem Neubau sind es 4,0 MB, und Google gibt der Seite am Handy die Tempo-Note 92 statt 56. Die fünf Ursachen dahinter findest du auf den meisten Seiten, die vor ein paar Jahren gebaut wurden.

Warum sind Bilder die grösste Bremse?

Weil sie in der falschen Grösse ankommen. Die alte Galerie zeigte Kacheln von gut 200 Pixeln Breite, lud dafür aber die Originale mit 2560 Pixeln. Auf der Startseite waren die Bilder 1480 Pixel breit, für einen Bildschirm von 375. Von 28 Bildern hatten 23 keine Massangabe, also sprang die Seite beim Laden, weil der Browser erst beim Eintreffen jedes Bildes wusste, wie viel Platz es braucht. Diese Sprünge misst Google als Layoutverschiebung; die alte Seite lag bei 0,173, die neue bei null.

Ein Neubau ändert daran drei Dinge: Jedes Bild kommt in der Grösse, die das Gerät braucht, in modernen Formaten wie AVIF oder WebP, und mit festen Massen, damit nichts springt. Bilder ausserhalb des Bildschirms laden erst, wenn man zu ihnen scrollt.

Was machen Skripte und Stildateien?

Sie blockieren. Die alte Startseite lud 56 Dateien, darunter rund 470 KB Skripte und 630 KB Stile in 14 Dateien, dazu zehn Schriftfamilien. Der Browser muss vieles davon verarbeiten, bevor er die erste Zeile zeichnet. Die neue Startseite kommt mit 10 Dateien aus, 6 KB Skript, zwei Stildateien und einer Schrift. Nicht, weil sie weniger kann, sondern weil sie nur lädt, was die Seite braucht. Baukästen und Themes laden oft alles, was irgendeine Seite irgendwann brauchen könnte.

Welche Rolle spielen fremde Dienste?

Die alte Seite schickte beim ersten Aufruf 22 Anfragen an neun fremde Server: Messdienste, Werbe-Pixel, Schriften von Google. Jede Anfrage ist eine Verbindung, die aufgebaut werden muss, am Handy mit schwacher Verbindung teuer. Und jede davon lief, bevor jemand zugestimmt hatte, was ein eigenes Thema ist. Die neue Seite macht null Anfragen an fremde Server, bis der Besucher etwas erlaubt.

Wie misst du das selbst?

Mit Lighthouse, dem Werkzeug von Google, das in jedem Chrome-Browser steckt: Entwicklerwerkzeuge, Reiter «Lighthouse», Gerät «Mobil», Analyse starten. Du bekommst eine Note von 0 bis 100 und darunter die Liste der Bremsen, mit Dateinamen. Zwei Werte lohnen den Blick: Wie lange dauert es, bis der grösste Inhalt da ist (LCP), und wie stark springt die Seite beim Laden (CLS). Eine Note allein ist noch keine Zahl; dazu gehört die Bedingung, unter der sie entstand. Lighthouse misst mit gedrosselter Verbindung und drosselt den Prozessor, damit ein durchschnittliches Handy nachgebildet wird. Misst du zweimal, bekommst du leicht verschiedene Werte; wir nehmen bei Vergleichen drei Läufe und den mittleren.

Einfacher: Unser Tempo-Check misst deine Seite am Handy und sagt, was bremst, mit Beleg. Er zeigt auch, ob die Bilder in modernen Formaten kommen und wie schwer die Seite insgesamt ist.

Was bringt es den Gästen?

Dass sie bleiben. Wer abends auf dem Handy ein Lokal sucht, wartet nicht, bis eine Galerie geladen hat. Bei Crystal’s erscheinen die Fotos jetzt auch mit schwachem Netz, die Karte steht als Text, und die Seite ist da, bevor jemand zum nächsten Treffer wischt. Wir versprechen keine Umsätze; die Zahl, die wir haben, ist die Note am Handy, vorher und nachher, gemessen mit demselben Werkzeug.