Der Ausgangszustand
Bestandsseite von 2019, gebaut mit einem Page Builder, 34 aktive Plugins.
Die Seite war nicht kaputt. Sie war gewachsen. Über sechs Jahre kamen ein Terminbuchungs-Plugin, zwei Formular-Erweiterungen, ein Cookie-Banner, ein Bewertungs-Widget und eine Bildergalerie dazu, jedes für sich sinnvoll, in Summe eine ordentliche Last.
Im sichtbaren Bereich standen ein Slider mit vier Folien, drei Schriftfamilien von zwei Anbietern und Bilder in voller Kameraauflösung. Kein Einzelfall, sondern der Normalzustand vieler gewachsener Seiten.
Was wir gemessen haben und wie
Labordaten aus Lighthouse, Felddaten aus der Search Console über 28 Tage.
Labor- und Felddaten beantworten unterschiedliche Fragen. Das Labor ist reproduzierbar: gleiches Gerät, gleiche Leitung, gleicher Zustand. Damit lässt sich eine einzelne Maßnahme sauber bewerten.
Das Feld ist die Wahrheit. Dort sitzen echte Menschen mit sechs Jahre alten Telefonen im Funkloch. Wir messen beides, weil das Labor sagt, ob eine Änderung wirkt, und das Feld, ob sie jemandem auffällt.
Core Web Vitals nach dem Relaunch: LCP, CLS und INP – vorher, nachher und vier Wochen später im Feld
Die Maßnahmen im Einzelnen
Jede Maßnahme einzeln gemessen, nicht als Paket. Nur so sieht man, was wirklich zieht.
Wir haben nicht alles auf einmal umgestellt, sondern nacheinander gemessen. Das dauert länger, liefert aber eine belastbare Reihenfolge und die sieht anders aus, als die meisten Checklisten vermuten lassen.
| Massnahme | Aufwand | Wirkung auf LCP |
|---|---|---|
| Slider raus, ein Bild im sichtbaren Bereich | mittel | −1,1 s |
| Bilder als WebP, in der passenden Größe ausgeliefert | klein | -0,7 s |
| Schriften lokal eingebunden, zwei statt drei | klein | -0,4 s |
| Theme neu gebaut statt Page Builder | groß | −0,3 s |
| Caching und Komprimierung am Server | klein | −0,1 s |
| Kritisches CSS inline gestellt | mittel | ±0 |
Die beiden größten Posten waren die billigsten. Slider und Bilder zusammen machen 1,8 der insgesamt 2,5 eingesparten Sekunden aus und für beides braucht es keinen Relaunch, sondern eine Entscheidung.
Was wir uns hätten sparen können
Nicht jede Empfehlung aus dem Netz wirkt in jedem Projekt.
Das kritische CSS. Auf dem Papier eine saubere Sache: Nur das Nötigste kommt inline in den Kopf, der Rest wird nachgeladen. In diesem Projekt lag die Wirkung innerhalb der Messtoleranz, schlicht, weil das neue Theme ohnehin nur wenige Kilobyte CSS mitbrachte.
Geblieben wäre eine zusätzliche Baustelle: Bei jeder Layoutänderung muss das inline gestellte CSS neu erzeugt werden, sonst passt es irgendwann nicht mehr. Wir haben es wieder ausgebaut. Ein halber Tag Arbeit, den wir uns bei ehrlicher Vorabmessung gespart hätten.
CLS: der unspektakuläre Gewinner
0,21 → 0,02. Aufwand: ein Nachmittag.
Die Layoutsprünge kamen aus zwei Quellen: dem Cookie-Banner, der sich nach dem Laden über den Inhalt schob, und Bildern ohne Größenangaben, für die der Browser erst nach dem Download Platz reservieren konnte.
Die Lösung ist unspektakulär, Banner mit fester Höhe einblenden, width und height an jedes Bild schreiben. Es ist die Maßnahme mit dem besten Verhältnis von Aufwand zu Wirkung im ganzen Projekt, und sie taucht in keiner Verkaufspräsentation auf.
Vier Wochen später im Feld
Felddaten sind träge: 28 Tage rollierendes Fenster.
Im Labor stand der LCP bei 1,6 Sekunden. Im Feld waren es nach vier Wochen 2,3 Sekunden. Das ist kein Widerspruch, sondern der Unterschied zwischen einem Testgerät und dem echten Publikum: ältere Telefone, schlechtere Verbindungen, Seiten, die tiefer in der Navigation liegen.
Alle drei Werte lagen damit im grünen Bereich. Das heißt „bestanden“, nicht „fertig“ und der nächste Wert, der auffällig wird, kommt bestimmt.
Fazit
Der größte Teil der Verbesserung kam aus zwei Entscheidungen, die nichts gekostet haben: ein Bild statt vier, und Bilder in der Größe ausliefern, die gebraucht wird. Das kritische CSS war der Aufwand nicht wert, der unscheinbare CLS-Fix dagegen der beste Handgriff im Projekt. Der Relaunch war der Anlass, nicht die Ursache.
Zur Website-Sanierung