Von 79 auf 11,5 MB
Hintergrundvideos erst laden, wenn man sie sieht — und warum das allein nicht reicht.
Mobil sind die meisten Besucher unterwegs, und genau dort waren die Klinik-Seiten zu langsam. Eine Startseite lud bis zum Seitenende 79 Megabyte. Der größte Brocken: Videos.
Alle Videos, sofort
Die Kopfbereiche der Seiten sind Slider mit Hintergrundvideos. Der Baukasten lud jedes davon sofort — auch die Folien, die noch niemand sieht, und auf manchen Seiten Handy- und Desktop-Fassung zugleich.
Laden, was man sieht
Das Plugin CGCE Performance schreibt jedes automatisch startende Video um: Es lädt erst, wenn es ins Bild kommt, im Slider nur die aktive Folie. Wer weiterscrollt, bei dem hält das Video an, und ein laufender Download wird abgebrochen. Wer Datensparen oder weniger Bewegung eingestellt hat, bekommt nur das Standbild.
Die Standbilder holt sich das Plugin selbst aus dem Video — beim Hosting gab es dafür kein Werkzeug auf dem Server, also übernimmt es der Browser im Backend. Ergebnis auf der Startseite: 11,5 statt 79 Megabyte.
Warum das allein nicht reicht
Die Überraschung kam bei der Messung: Ohne Videos wurden die Seiten viel leichter, die Lighthouse-Punkte bewegten sich aber kaum. Die hängen am Weg bis zum ersten Bild — an Stylesheets und Skripten, die das Rendern aufhalten.
Also kamen weitere Bausteine dazu: Stylesheets, die nicht mehr blockieren, und Terminbuchung und Spamschutz, die erst laden, wenn man sie braucht. Auf einer Seite stieg Lighthouse mobil so von 63–69 auf 73–74 Punkte.
Nichts wird live ausprobiert
Jeder Baustein hat einen Schalter, Ausnahmen für einzelne Seiten und einen Rückweg. Getestet wird vorher gegen gespeicherte Fassungen der echten Seiten, am Handy-Format und gedrosselt — erst dann kommt das Update auf die Seite.