CSS Optimierung

Worum gehts?

Mit CSS wird Ihre Webseiten nach Ihren Wünschen in Form und Farbe gebracht. Mit diesen Anweisungen wird bestimmt wie groß der Text ist, welche Elemente wie groß sind und welche Hintergrundfarbe bestimmte Bereiche haben. Kurzum, ohne CSS sind heutige Webseiten nicht mehr vorstellbar.

Das hört sich doch super an, wo ist das Problem? In der Regel werden viele CSS Anweisungen benötigt um einer Webseite Struktur zu geben und das löst man in der Regel mit Bibliotheken, also allgemein zu verwendenden Standardregeln und eigenen Anweisungen. Dabei lädt man also verschiedene Dateien um die gesamte Optik der Seite zu bestimmen. Daran ist eigentlich nichts falsch, aber es werden oft Regeln eingebunden, ohne das diese zum Einsatz kommen und somit lädt man einige Kilobyte bevor die Seite überhaupt sichtbar wird. Auf Mobilen Endgeräten mit beschränkten Ressourcen an CPU und Netzwerkbandbreite führt dies zu Verzögerungen der Anzeige der Webseite.

Möchte man seinen Besuchern eine schnell ladende Webseite bieten, muss man jetzt also dafür sorgen, dass die CSS Dateien möglichst klein ausfallen, da diese erst geladen werden müssen bevor überhaupt etwas angezeigt werden kann.

Daraus ergeben sich folgende Optimierungsziele:

  1. Anzahl der CSS Dateien verringern

  2. Größe der einzelnen CSS Dateien verringern

Um die Anzahl der CSS Dateien zu verringern, werden diese oft einfache zusammengefasst. Also quasi hintereinander in eine einzelne Datei geschrieben. Das löst immerhin das Problem der Anzahl Dateien und pro Request des Browsers werden alle Regeln auf einmal geladen. Soweit so gut. Man muss hier jedoch aufpassen, dass einige URL-Attribute relative Pfade enthalten und diese werden relativ zur CSS Datei interpretiert. Wenn man mehrer CSS Dateien zusammenkopiert, verändern sich diese Pfade ggf. und müssen umgeschrieben werden.

Die Größe der CSS Dateien kann man aber nur verringern, wenn man Inhalt entfernt. Dabei prüft man die Regeln in den Dateien gegen die tatsächliche Webseite und lässt Regeln entfallen, die keine Anwendung finden. z.B. könnte ein CSS-Framework Regeln für Überschriften h1 bis h9 zur Verfügung stellen, auf Ihrer Webseite benutzen Sie jedoch maximal h1, h2 und h3. Dann können die folgenden Regeln entfallen, ohne dass sich der Inhalt ihrer Webseite ändert. Wenn dieses Beispiel auch sehr vereinfacht ist, zeigt es doch die grundsätzliche Vorgehensweise. Wenn Sie nur wenige Regeln aus einer Bibliothek nutzen, können so erhebliche Einsparungen erfolgen.

In der Realität ist diese Prüfung jedoch gar nicht trivial. So werden heute vielfach Inhalte per Javascript erst durch Benutzerinteraktion in die Seite eingefügt. z.B. wird ein Warenkorb erst geladen, wenn ein Benutzer auf ein Warenkorb-Symbol klickt oder eine Meldung wird erst angezeigt, wenn ein Benutzer ein Produkt in den Warenkorb gelegt hat. Hier muss man darauf achten alle diese Besonderheiten im Blick zu halten und diese CSS Selektoren erhalten.

Auch aus Lizenzgründen sollte darauf geachtet werden, dass die Lizenztexte in den CSS Dateien erhalten bleiben.

Neben diesen Methoden sollten man auch noch die Dateien komprimieren. Dabei werden alle für den Menschen wichtigen Einrückungen und Leerzeichen sowie Zeilenumbrüche entfernt. Danach sind die Dateien nur noch schwer zu lesen, dafür aber vom Browser schneller zu laden.

Es gibt noch weitere Tricks um die CSS Datei zu verkleinern. So werden z.B. nicht benötigte Semikola weggelassen und Farbnamen können in den jeweiligen Hexcode umgeschrieben werden. Manche Attribute können auch in anderer Schreibweise dargestellt werden und sparen somit einige Zeichen.

Natürlich optimiere ich die CSS Dateien nicht von Hand, sondern setze auf CSS Parser und diverse andere Bibliotheken, aus denen ich mir ein Toolset zusammengestellt habe.