Test: Sind viele kleine CSS-Dateien besser oder eine große?
Radek ŠírAktualisiert 29.9.20253 Minuten LesenDie Best Practice in der Ära von HTTP/2 empfiehlt, CSS in kleinere Dateien aufzuteilen, je nach Komponenten und Seiten. Aber ist der Preis für viele Anfragen nicht zu hoch?
Warum ist das wichtig?
Wenn wir eine Website nach den Core Web Vitals optimieren, versuchen wir, das größte Element auf der Seite (LCP-Element) so schnell wie möglich zu laden. Das bedeutet, dass alles, was vor diesem Element heruntergeladen wird, ebenfalls so schnell wie möglich geladen und verarbeitet werden sollte. Insbesondere betrifft dies Dateien mit Styles und JavaScript.
Wir beschlossen, diese Frage bei einer unserer Optimierungen für einen unserer größten Kunden, Livesport, zu beantworten.
Auf der Livesport-Website, speziell auf der Seite Fortuna Liga, gab es zum Zeitpunkt der Tests 55 kleine CSS-Dateien mit einer Gesamtgröße von 789 kB. Durch die Verwendung von Gzip-Kompression während der Übertragung werden dann 156 kB an den Browser gesendet.
In dieser Situation wurde das LCP-Element in 3.700 ms geladen. (Getestet über eine Fast 3G-Verbindung.)
Ich habe alle Dateien zu einer einzigen zusammengeführt und minifiziert. Die resultierende Datei habe ich in das <head> der Seite eingefügt und die anderen Links zu CSS-Dateien entfernt.
So sehen die CSS-Dateien aus, die bei Livesport heruntergeladen werden.
Durch die Minifizierung verringerte sich das Datenvolumen auf 655 kB, und mit Gzip-Kompression kamen wir auf 96 kB übertragene Daten. Wir sparten 54 Anfragen beim Herunterladen von CSS-Dateien und ungefähr ⅓ des zu übertragenden Datenvolumens.
Nach der Optimierung des CSS wurde das LCP in 3.500 ms geladen.
Das LCP (Largest Contentful Paint) wurde nach dem Ersetzen von 55 kleinen Dateien durch eine große CSS-Datei bei einer 3G-Verbindung um 200 ms früher geladen.
In Prozenten ausgedrückt, war das lediglich eine 5 %-ige Beschleunigung des Renderings des LCP-Elements.
| Anzahl der Dateien | Datenvolumen kB | LCP in ms | |
|---|---|---|---|
| Vor der Änderung | 55 | 789 | 3.700 |
| Nach der Änderung | 1 | 655 | 3.500 |
Diese relativ geringe Beschleunigung des Ladens des LCP-Elements ist unter anderem auf die große Anzahl anderer übertragener Dateien zurückzuführen, wie JavaScripts. Auch deren aufwendige Verarbeitung, insbesondere auf der Seite des Client-Browsers, beeinflusst die Endzeit.
Lohnt es sich, CSS zu einer einzigen Datei zusammenzuführen?
Dieser Test zeigte, dass wir in Bezug auf die Geschwindigkeit nicht viel sparen, wenn wir alles in eine Datei packen. Eine große CSS-Datei ist für das LCP nicht wesentlich schneller als viele kleine.
Es gibt zudem weitere Faktoren. Wir berücksichtigen hier nur die Benutzererfahrung mit einem leeren Browser-Cache. Im realen Betrieb spielt jedoch der Cache eine wesentliche Rolle, und viele kleine Dateien sind vorteilhafter. Vorausgesetzt, Sie können als Entwickler diese einzeln und nicht alle gleichzeitig ungültig machen.
Abschließend noch allgemeine Hinweise zu CSS. Worauf achten?
- Achten Sie darauf, dass alle CSS-Dateien im Output so klein wie möglich sind. Minifizieren Sie stets konsequent.
- Vermeiden Sie Duplikate im Code: verschiedene Icons, Farben oder gar ganze Komponenten. Das sehen wir bei Kunden häufig.
- Überarbeiten Sie – wenn CSS-Dateien groß sind, überlegen Sie sich eine Refaktorisierung, eine Aufteilung nach Komponenten oder das Entfernen nicht genutzter (toter) Komponenten.
- Stellen Sie sicher, dass die Caching-Strategien mit der
max-age-Direktive korrekt sind. - Überprüfen Sie, ob die Gzip- oder Brotli-Kompression auf dem Server aktiviert ist.
- Vermeiden Sie auf der Seite Styles, die nicht im HTML verwendet werden. Auf der Startseite benötigen wir keine Styles für den Kaufprozess.
- Styles außerhalb des ersten Viewports können Sie lazy laden, z.B. mithilfe von JS.
Mehr zur Optimierung von CSS hat auch Martin Michálek oder Harry Roberts geschrieben.