Eine Website einmal schnell zu machen, ist leicht. Schwierig ist, sie schnell zu halten, während laufend Funktionen dazukommen: Jede neue Komponente, Schrift oder Bibliothek macht die Seite etwas schwerer, und niemand merkt es, bis sich die Website langsam anfühlt. Deshalb ist Geschwindigkeit bei uns kein einmaliges Audit mehr, sondern ein Test, den jede Änderung bestehen muss.
Wo wir angefangen haben
Als wir diese Website zum ersten Mal ernsthaft gemessen haben, sprang das Layout beim Laden (ein Cumulative Layout Shift von etwa 0,2), und der Hauptinhalt brauchte bei gedrosselter Mobilverbindung 4 bis 6 Sekunden, bis er erschien. Das Haupt-Stylesheet wog komprimiert 41 KB – vor allem, weil Komponenten und Validierungscode für den Admin-Bereich auch an Besucher ausgeliefert wurden.
Was wir geändert haben
- Besucher bekommen nur Besucher-Code. Die UI-Bibliothek des Admin-Bereichs und die Bibliothek für Formularvalidierung gelangen nicht mehr auf die öffentliche Website. Ein Test durchläuft die Importe der Website und schlägt fehl, wenn sich eine davon wieder einschleicht.
- CSS nur für das, was auf der Seite ist. Das Haupt-Stylesheet schrumpfte von 296 KB auf 98 KB, komprimiert auf 16 KB.
- Schriften, die das Layout nicht verschieben. Wichtige Schriften werden vorgeladen, und die Seite lädt keinen Code mehr vorab, den sie vielleicht nie braucht.
Der Test, der dafür sorgt, dass es so bleibt
Bei jedem Pull Request baut die CI die Website, liefert sie wie in Produktion aus – HTTP/2, TLS, Komprimierung – und führt Lighthouse auf vier zentralen Seiten jeweils dreimal aus; gewertet wird der Median. Das Budget: jeder Score mindestens 95, der größte Inhalt in unter 2 Sekunden sichtbar, Layout Shift unter 0,1, Blockierung des Main Threads unter 200 ms. Reißt eine Änderung das Budget, wird die CI rot, und die Änderung wird nicht gemergt. Parallel läuft eine Barrierefreiheitsprüfung, die auf den abgedeckten Seiten derzeit keine Verstöße gegen WCAG AA findet.
Das Ergebnis
In der CI erreichen die Seiten in allen vier Lighthouse-Kategorien 100 Punkte, der Hauptinhalt ist in unter einer Sekunde sichtbar. Auf der Live-Website erzielt die Startseite 100 Punkte mit dem Hauptinhalt nach etwa 1,2 Sekunden, eine Produktseite 98.
Wir sagen auch offen, was noch nicht perfekt ist: Seiten auf Japanisch und in anderen CJK-Sprachen sind langsamer, weil ihre Schriften deutlich größer sind. Dafür gibt es eine eigene Aufgabe.
Warum das für Sie wichtig ist
Eine langsame Seite verliert Besucher, bevor sie ein Wort gelesen haben – und Suchmaschinen merken das auch. Wenn Sie mit uns eine Landingpage oder einen Onlineshop bauen, ist dieses Budget inklusive: Es gehört zu unserer Arbeitsweise und ist kein Extra.