Das Problem mit ungenutztem CSS-Code und wie ihr es beheben könnt

Der Performance-Verlust, welcher mit ungenutztem CSS-Code einhergeht, ist enorm. Was aufgrund der kleinen Dateigröße oft vernachlässigt wird oder nicht weiter auffällt, sorgt gerade bei großer Last dann dennoch für starke Verzögerungen im Ladevorgang. Das solltet ihr keinesfalls unterschätzen.

Bei einer CSS-Datei, die 500 Kilobyte groß ist, kann oft mehr als die Hälfte eingespart werden, da der meiste Code auf der jeweiligen Seite schlichtweg nicht notwendig ist. Bei vielen Projekten ist dies tatsächlich der Fall, sodass fast 80 Prozent der geladenen CSS-Datei häufig gar nicht genutzt werden. Eine 80 Prozent kleinere Datei wäre somit das Ergebnis einer entsprechenden Optimierung. Das Stylesheet wird daher nicht nur deutlich schneller geladen, sondern kann vom Browser auch zügiger interpretiert werden, weshalb die Website anschließend ruck zuck dargestellt wird.

Ein weiteres sehr typisches Problem ist, dass die Übersicht großer CSS-Dateien mit der Zeit verloren geht. Was am Anfang noch einfach zu verstehen ist, wird zunehmend komplexer. Außerdem wird die CSS-Datei gerne komprimiert und auch minimiert bearbeitet, weil es oftmals einfacher ist als eine ständige Umwandlung der Datei.

Mit der Zeit wird dann vergessen, welche die nächst höhere oder tiefere CSS-Eben ist und welche Klassen eigentlich wofür verantwortlich sind. Vor allem, wenn die CSS-Datei aufgrund der Minimierung absichtlich sehr klein gehalten oder nicht kommentiert wird, bläht sie sich zusätzlich auf und schnell ist die Übersicht vollständig verschwunden. Ein großes Problem.

Um das erste Problem zu umgehen, ist es ratsam, mehrere CSS-Dateien zu erstellen, die immer nur den jeweils benötigten CSS-Code enthalten und somit auch ausschließlich die Fragmente laden, die aktuell tatsächlich gebraucht werden.

Im Klartext bedeutet dieses Vorgehen immer nur den CSS-Code zu integrieren, der für die Darstellung der Website auch wirklich notwendig ist. Auf der Startseite wird also nicht die Autorenbox der Beitragsansicht interpretiert und in den eigentlichen Artikeln ist kein CSS-Code enthalten, der das Blog-Archiv formatiert. Auf diese Weise werden die CSS-Dateien winzig klein, weil sämtlicher Überschuss entfernt wird.

Ebenfalls wichtig ist es, die korrekt formatierte und kommentierte Version großer CSS-Dateien zu behalten. Im Alltag kommt es immer wieder vor, dass die entsprechenden Entwickler*innen im Unternehmen die Ursprungsversionen gar nicht mehr aufbewahrt haben. Oder aber der Code ist nicht allzu gut kommentiert und formatiert, weshalb er später schwer verständlich erscheint.

Zugegeben ist CSS keine Quantenphysik und durchaus einfach zu verstehen, doch bei richtiger Formatierung erklärt sich dort alles auf den ersten Blick. Gerade Abhängigkeiten und Fallbacks sind dann wesentlich besser zu erkennen. Daher ist es wichtig, nicht nur die optimierte Version zu behalten, sondern auch die Ursprungsdatei. Natürlich in erster Linie bei großen Projekten mit Hunderten von Zeilen und mehreren Dateien.

Selbstverständlich gibt es für derartige Aufgaben heutzutage praktische WordPress-Plugins und Online-Tools. Diese Hilfsmittel übernehmen die meisten Arbeiten für euch und funktionieren somit weitgehend automatisiert. Gerade in WordPress ist es mit Plugins wie Perfmatters und Swift Performance kinderleicht entsprechende Optimierungen vorzunehmen, ohne über viel Fachwissen verfügen zu müssen. Kostenlos sind dabei Erweiterungen wie Autoptimize, die ähnliche CSS-Optimierungen vornehmen, wenn auch nicht ganz so umfangreich.

Ebenfalls existieren jede Menge Online-Tools, die bestehende Websites auf Stylesheets prüfen und diese dann entsprechend nach ungenutztem CSS-Code scannen. PurifyCSS ist eines dieser Tools, welches zudem gleich die prozentuale Größe des derzeitigen Zustands und der optimierten Datei ausgibt. Ebenso sind PurgeCSS und UnCSS zu nennen.

Ein guter händischer Trick ist zudem, jeden Style nach und nach mit einem auffälligen Border, Padding oder Background zu versehen. Leuchtend rot beispielsweise, sodass sofort auffällt, wenn der jeweilige Style aktiv auf der aktuellen Website genutzt wird. Damit können ungenutzte CSS-Befehle effektiv aussortiert oder per Seite angepasst werden. Bei kleineren Projekten ist die händische Methode immer besser, als sich auf eine automatische Erkennung zu verlassen. Letztere funktioniert normalerweise nicht hundertprozentig.

Viele Online-Tools scheitern an bestimmten Klassen, die eben nur auf sehr wenigen oder speziellen Seiten eingesetzt werden. Andere erkennen unterschiedliche Typen CSS-Dateien nicht, weil diese anders als erwartet eingebunden werden. CSS-in-JS ist auch ein Thema für sich, welches von derartigen Tools in der Regel ignoriert wird.

Die WordPress-Plugins helfen dann zwar bei der Optimierung von vorhandenem CSS-Code, entfernen aber nicht zwangsläufig die ungenutzten Zeilen. Somit bringen viele der Optimierungen wenig, wenn es darum geht, den CSS-Bloat loszuwerden, der sich über die Jahre hinweg angesammelt hat.

Über die Jahre ist dabei gleich ein passendes Stichwort. Statt alles sofort zu wollen, ist es oft ratsam, die CSS-Dateien von jemanden mit viel Detailwissen aufräumen zu lassen. Am besten von demjenigen im Team, der sich am meisten damit auskennt und beschäftigt, jemand der wirklich vertraut mit dem Quellcode eurer Website ist. Immer wenn mal etwas Zeit ist, könnte er die Dateien durchgehen und händisch aufräumen. Das ist mühsam, meist aber der einzig zuverlässige und somit auch beste Weg, damit weder zu viele, noch zu wenige Befehle entfernt werden.