LCP bei 2,1 s mobil, vier Jahre nach dem Audit
Drei Websites in einer, rund 25 URLs und ein Blog, der nur in Lighthouse schnell aussah.
WordPress, eine separate Profil-App und ein Blog
Voices bestand eigentlich aus drei Websites: einer Marketing-Site auf WordPress, einer separaten App für die Sprecherprofile sowie Blog und Podcasts. Ich habe mir rund 25 URLs quer durch alle drei vorgenommen.
Layout-Shifts auf der Startseite, langsame Profile und eine 94 im Blog, von der Besucher nichts hatten
Ich habe mich mit ihren Entwicklern zusammengesetzt, ihnen gezeigt, was zuerst zu fixen war, und ihnen dabei noch einiges beigebracht. Sie legten direkt los: Kurze Zeit später mailte mir ihr Development Manager die Liste mit allem, was sie gebaut hatten – bis hin zu fetchpriority auf den entscheidenden Bildern.
Tom, ihr Marketing-Entwickler, hatte viele meiner Ratschläge umgesetzt, bevor er weiterzog. Bis März 2022 waren die Profile in PageSpeed oft grün. Dann ging ein Schwung neuer Features auf der gesamten Website live, und die Profile rutschten wieder ab. Im Mai mailte mir ihr Development Manager Jayme Cousins: Könnte ich mir das noch einmal ansehen? Am nächsten Montag schickte ich ihm drei Quick Wins. Die Sign-in-Skripte von Google und Apple waren render-blocking geworden, nachdem sie Cloudflares Rocket Loader abgeschaltet hatten. Sie mussten also mit defer ans Ende des Body. Das Logo brauchte Breite und Höhe. Und der LCP war ein CSS-Hintergrundbild – das musste ein echtes Bild mit Preload werden. Für den Mittwoch fanden wir einen Termin, zwischen ihrem Victoria Day und meinem Feiertag Christi Himmelfahrt (meine Frau hätte es gar nicht geschätzt, wenn ich an einem Feiertag gearbeitet hätte). An diesem Tag schickte ich auch Beispielcode mit, inklusive eines kleinen Page-Caches.
Bis August war der Head eines Profils bei 40 kB statt 251 kB.
- 251 kB
- Head-Größe
- 28
- @font-face-Regeln
- 2
- blockierende Skripte
- 40 kB
- Head-Größe
- 0
- @font-face-Regeln
- 0
- blockierende Skripte
Auf dem Desktop lässt sich die Wirkung der zweiten Runde direkt sehen. Im April, nach den neuen Features, lag die Time to First Byte in der Spitze bei 1,1 Sekunden. Bis Oktober war sie bei 0,8 Sekunden und im grünen Bereich. Der LCP sank von 1,8 Sekunden im März auf 1,5.
Vier Jahre später habe ich Voices für diese Seite noch einmal in CrUX aufgerufen: alles durchgehend grün. Auf Smartphones liegt der LCP zwischen 2,0 und 2,3 Sekunden, der INP zwischen 150 und 200 ms, und der CLS steht seit einem Jahr jeden Monat bei 0. Das haben allein ihre Entwickler geschafft.
„Arjen spielte eine zentrale Rolle bei der Optimierung unserer Core Web Vitals. Er hat unsere kritischen Profilseiten in PageSpeed wieder in den grünen Bereich gebracht. Was ich besonders schätze, ist seine Hands-on-Mentalität: Er findet nicht nur die Engpässe, sondern arbeitet direkt mit unserem Entwicklerteam, bis die Fixes tatsächlich live sind.“
Jayme Cousins, Manager Development, Voices.com
Ein Plugin, das Skripte verzögert, trickst Lighthouse aus
Der Test bewertet, was er sieht – und diese Skripte hat er nie gesehen. Das Smartphone eines Besuchers lädt und führt trotzdem jedes einzelne davon aus.
Hinter einem Layout-Shift steckten drei
Der Report zeigte eine einzige CLS-Zahl. Der Trace zeigte drei Shifts hintereinander, und jeder brauchte einen eigenen Fix.
Bring es den Entwicklern bei, und es bleibt grün
Das Audit war 2022. Ihre Entwickler hielten die Seite grün, und CrUX besteht mobil bis heute.
Grün in Lighthouse, rot in der Search Console?
Ich finde heraus, was für deine Besucher langsam ist und warum. Deine Entwickler bekommen die Fixes direkt in der richtigen Umsetzungsreihenfolge.
Mehr Ergebnisse auf meiner Kundenseite.
