Prüfpunkt co2.css.ungenutztDatenmenge je Aufruf
Warum meldet die Prüfung ein Stylesheet, das zu 90 % ungenutzt bleibt?
Viele Themes und Frameworks liefern ein großes Stylesheet für alle denkbaren Bausteine aus, und jede Seite lädt es ganz. Die Prüfung misst im Browser, welcher Teil eines Stylesheets auf der gemessenen Seite benutzt wird. Ist ein Stylesheet entpackt mindestens 200 KB groß und benutzt die Seite davon höchstens 10 %, entsteht der Befund.
Frameworks bringen Regeln für Bausteine mit, die eine Seite nie zeigt
Der Web Almanac 2024 hat ungenutztes CSS auf den Seiten des HTTP Archive gemessen. Im Median bleiben beim Laden 52 KB am Telefon und 56 KB am Desktop ungenutzt; jede zehnte Seite lädt mehr als 200 KB CSS, das sie nicht braucht. Die Autoren sehen einen Grund in umfangreichen CSS-Frameworks: Sie sparen Entwicklungszeit und bringen viele Stile mit, die eine einzelne Seite nie verwendet. Dazu kommen Themes, die für jeden denkbaren Baustein vorsorgen, vom Preisvergleich bis zum Veranstaltungskalender.
Bis das Stylesheet verarbeitet ist, bleibt der Bildschirm leer
Ein Browser muss jedes externe Stylesheet laden, lesen und verarbeiten, bevor er überhaupt etwas zeichnet; so beschreibt es Google in der Dokumentation zu Lighthouse. Danach prüft er für jedes Element der Seite, welche Regeln darauf zutreffen. Je mehr ungenutzte Regeln, desto länger kann diese Berechnung dauern. Für den Besucher am Telefon heißt das: Er sieht eine weiße Fläche, während sein Gerät Regeln für Kalender, Karussells und Tabellen durchgeht, die auf dieser Seite gar nicht vorkommen.
Ein großes Stylesheet für alle Seiten hilft vor allem Wiederkehrern
Ein einziges Stylesheet für die ganze Website hat einen Vorteil: Liegt es im Zwischenspeicher, lädt jede weitere Seite ohne neue Anfrage. Die Autoren des Web Almanac nennen das eine Abwägung: Es spart Anfragen und hilft wiederkehrenden Besuchern, erhöht aber die Last des ersten Aufrufs. Wer über eine Anzeige oder ein Suchergebnis auf eine einzelne Seite kommt, lädt das ganze Stylesheet und sieht vielleicht nur diese eine Seite. Ein schlankes Grund-Stylesheet für alle Seiten und kleine Ergänzungen für Shop, Kalender oder Formulare bedienen beide Gruppen.
Wie die Prüfung misst
Sie nutzt die Abdeckungsmessung von Chromium, dieselbe wie der Reiter „Coverage“ in den Chrome-Entwicklerwerkzeugen. Gemessen wird beim Laden der Seite. Regeln für Zustände, die erst nach einem Klick oder bei einer anderen Bildschirmbreite gelten, zählen dabei als ungenutzt. Deshalb ist die Grenze hoch angesetzt: Ab 90 % enthält das Stylesheet sicher weit mehr, als die Seite braucht.
Warum es Strom kostet
Das Stylesheet wird bei jedem ersten Besuch übertragen und im Kopf der Seite meist so geladen, dass der Browser erst zeichnet, wenn er es gelesen hat. Von einem Stylesheet mit 200 KB braucht die Seite dann höchstens 20 KB; der Rest kostet Übertragung und Rechenzeit auf jeder Seite, die es lädt.
Beispiele
Bootstrap
@import "bootstrap/scss/bootstrap";
/* alle Module */@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities/api";
/* nur, was die Seite verwendet */So gehen Sie es an
- Öffnen Sie die Seite in Chrome, Entwicklerwerkzeuge, Reiter „Coverage“, und laden Sie neu. Die Liste zeigt je Datei den ungenutzten Anteil.
- Dünnen Sie das Stylesheet aus: mit PurgeCSS, bei Tailwind über die Quellenangabe (content in Version 3, @source in Version 4) oder bei Bootstrap mit den Modulen, die Sie verwenden.
- Legen Sie das CSS für den ersten Bildschirm direkt ins Dokument und laden Sie den Rest nach. Das beschleunigt die erste Anzeige; den Befund löst erst das Ausdünnen.
- Sehen Sie danach die Seiten mit den meisten Bausteinen an, damit alle benötigten Regeln erhalten bleiben.
Tipps aus der Praxis
- Lighthouse in Chrome listet jedes Stylesheet, bei dem sich mindestens 2 KiB einsparen lassen, samt der möglichen Ersparnis. Die Liste zeigt, wo sich das Ausdünnen zuerst lohnt.
- Klicken Sie sich während der Coverage-Messung durch Menü, Aufklapper und Formular und ändern Sie die Fensterbreite. Was danach noch als ungenutzt markiert ist, braucht diese Seite in keinem Zustand.
- PurgeCSS entfernt alles, was es in Ihren Vorlagen nicht findet, auch Klassen, die erst ein Skript setzt, etwa für ein geöffnetes Menü. Nehmen Sie solche Klassen in die Ausnahmeliste (safelist) auf, sonst fehlt nach dem Ausdünnen ihr Stil.
- Prüfen Sie nach einem Theme-Wechsel, ob Stylesheets des alten Themes oder abgeschalteter Erweiterungen weiter geladen werden.
Weiter im Prüfbereich CO₂ & EmpCo
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Wie viele Schriftdateien braucht eine Website?Ab 6 Schriftdateien mit zusammen 300 KB meldet die Prüfung den Befund und nennt, wie viele Schriftschnitte die Seite benutzt. So reichen wenige Dateien.
- Warum laden Videos und PDFs besser erst auf Klick?Zeigt ein prefetch auf ein Video, Archiv oder PDF, laden Chrome, Edge und Firefox die Datei bei jedem Besuch mit. Die Prüfung meldet das mit der Adresse.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
