Fallstudie PagePath: Wie die Website am Handy mehr als dreimal so schnell wurde
Die Website meiner App PagePath hat am Handy 7,7 Sekunden gebraucht, bis der wichtigste Inhalt zu sehen war. Nach zwei Änderungen sind es 2,2 Sekunden, und die Seite ist statt 1,2 MB nur noch 230 KB groß.
Zu den ZahlenWorum es geht
PagePath ist meine eigene App, in der du festhältst, welche Bücher du liest. Sie funktioniert ohne Konto und läuft auf Android und dem iPhone. Das hier ist also kein Kundenprojekt, sondern meine eigene Seite.
Die Website dazu, kindredview.com/pagepath, läuft auf WordPress und ist mit Breakdance und eigenem Code gebaut. Sie soll Leute, die nach einer Lese-App suchen, in den App Store oder zu Google Play bringen. Weil es um eine App geht, muss die Seite vor allem am Handy schnell sein, und genau dort war sie zu langsam.
Was die Seite langsam gemacht hat
Gemessen habe ich mit Lighthouse von Google, in der Einstellung für Handys.
-
Riesige Bilder für kleine Flächen
Die drei App-Screenshots oben auf der Seite lagen als PNG in voller Größe dort: rund 2.560 Pixel breit und jeweils etwa 350 KB schwer. Angezeigt wurden sie in rund 300 Pixeln Breite. Das Handy hat also ein Vielfaches dessen geladen, was es wirklich gebraucht hat.
-
Ein großes Skript für einen kleinen Effekt
Damit das Menü oben stehen bleibt, wenn du scrollst, hat der Page-Builder eine Animations-Bibliothek von einem fremden Server nachgeladen. Lighthouse hat dafür am Handy fast anderthalb Sekunden Rechenzeit gemessen, nur für dieses eine Menü.
Was ich geändert habe
Bilder in passender Größe
Ich habe die Screenshots als WebP in drei Breiten erzeugt, 480, 800 und 1.200 Pixel. Jetzt lädt jedes Gerät nur die Größe, die es anzeigt. Das erste sichtbare Bild lädt sofort, die anderen erst beim Scrollen.
Das Menü mit CSS statt mit Skript
Das stehende Menü macht jetzt eine einzige CSS-Regel. Es sieht genauso aus wie vorher, aber die Animations-Bibliothek lädt gar nicht mehr.
Danach nachgemessen
Ich habe die Seite dreimal gemessen und den mittleren Wert genommen, weil Lighthouse von Lauf zu Lauf etwas schwankt.
Vorher und nachher
Lighthouse, Einstellung für Handys. Vorher gemessen am 11.11.2026, nachher am 12.11.2026.
| Messwert | Vorher | Nachher |
|---|---|---|
| Lighthouse-Punkte (von 100) | 68 | 96 |
| Bis das Wichtigste zu sehen ist | 7,7 s | 2,2 s |
| Größe der Seite | 1,2 MB | 230 KB |
Nachher: Mittelwert aus drei Läufen. Die Werte hängen auch vom Server und vom Zeitpunkt ab und schwanken etwas.
Was du daraus für deine Website mitnehmen kannst
Bei langsamen Seiten sind es oft dieselben zwei Dinge: Bilder, die viel größer sind als nötig, und Skripte, die für einen kleinen Effekt viel Rechenzeit kosten. Beides siehst du von außen nicht, dein Besucher am Handy merkt es aber sofort.
Wie schnell deine Seite ist, kannst du selbst bei PageSpeed Insights von Google testen. Gib dort deine Adresse ein und schau dir den Wert für Mobilgeräte an.
Alle Referenzen ansehenLädt deine Website am Handy zu langsam?
Schick mir die Adresse deiner Seite und schreib dazu, was dich stört. Ich melde mich werktags innerhalb von 24 Stunden bei dir.