Normalerweise sollte es vermieden werden, ungenutzten CSS-Code im jeweiligen Projekt zu hinterlassen, doch dennoch kommt genau das immer wieder vor. Fast zwangsläufig entstehen bei größeren Angeboten gigantische CSS-Dateien, bei denen es alles andere als einfach ist, den notwendigen Überblick zu behalten. Und wo die Übersicht fehlt, kommt früher oder später die Unordnung ins Spiel.

In unserem heutigen Beitrag klären wir zunächst einmal, was das Problem an ungenutztem CSS-Code ist. Außerdem geben wir Tipps und Tricks, wie dieser vermieden oder im Nachhinein noch entfernt werden kann. Seid also gespannt und lest gleich weiter.

Problem ungenutzter CSS Code

Problem 1: Performance-Verlust

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.

Problem 2: Fehlende Übersicht

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.

Lösung 1: Mehrere CSS-Dateien laden

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.

ungenutzter css-code

Lösung 2: Formatierte CSS-Datei aufbewahren

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.

WordPress-Plugins und Online-Tools

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.

Optimierung über längere Zeit durchführen

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.

by A-DIGITAL one

Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance die wir seit 1999 an den Tag legen.

Mit unserem Team von über 35 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.