Geschwindigkeit ist kein abstraktes Thema für Technik-Enthusiasten, sie entscheidet darüber, ob ein Besucher bleibt oder geht. In dieser Fallstudie zeige ich dir anhand eines realen Projekts, wie ich eine Website von einem Lighthouse Score von 40 auf über 97 gebracht habe und welche Maßnahmen den größten Unterschied gemacht haben.
Der Ausgangszustand
Die bestehende Website war auf WordPress aufgebaut, mit einem Premium-Theme, das über 30 JavaScript-Dateien und 12 CSS-Dateien auf jeder einzelnen Seite lud. Die Bilder waren als PNG in Originalauflösung eingebunden, manche davon über 3 Megabyte groß. Die Ladezeit auf dem Smartphone lag bei über 8 Sekunden und der Lighthouse Score pendelte zwischen 35 und 45. Besucher sprangen ab, bevor die Seite überhaupt vollständig geladen war.
Bildoptimierung: der größte Hebel
Der erste und wirkungsvollste Schritt war die Umstellung der Bilder. Statt einzelner PNG-Dateien werden jetzt alle Bilder im modernen AVIF-Format ausgeliefert, mit WebP als Fallback und dem Original als letzte Instanz. Das geschieht über das picture-Element, sodass der Browser automatisch das beste Format wählt. Allein diese Maßnahme reduzierte die übertragene Datenmenge um rund 85 Prozent. Ein Bild, das vorher 2,4 Megabyte groß war, wiegt jetzt 180 Kilobyte und sieht auf dem Bildschirm identisch aus.
Code-Splitting: nur laden, was gebraucht wird
Bei einer React-Website lässt sich der Code in einzelne Pakete aufteilen, die erst geladen werden, wenn sie wirklich benötigt werden. Die Preisseite muss nicht den Code für die Kontaktseite mitschleppen und das PDF-Modul wird erst geladen, wenn jemand tatsächlich eine Rechnung erstellt. Durch diese Aufteilung sank die initiale Ladezeit auf unter 1,5 Sekunden, weil der Browser beim ersten Aufruf nur das Nötigste herunterladen muss.
Font-Loading: unsichtbar, aber entscheidend
Schriftarten sind ein oft unterschätzter Flaschenhals. Wenn der Browser auf eine Schrift warten muss, bevor er Text anzeigt, springt das Layout und der CLS-Wert steigt. Durch die Umstellung auf font-display: swap und das Laden der Schriften über ein nicht-blockierendes Link-Element wird der Text sofort in einer Systemschrift angezeigt und nahtlos ersetzt, sobald die eigentliche Schrift verfügbar ist. Der Besucher bemerkt davon nichts, aber Google bewertet es positiv.