CSS komprimieren und die Performance verbessern

Cascading Style Sheets (dt. „gestufte Gestaltungsbögen“), vor allem unter der Abkürzung CSS bekannt, ist eine Stylesheet-Sprache, mit deren Hilfe Webinhalte und deren Darstellungsvorgaben wie z. B. Farben oder Layout getrennt definiert werden können. Die HTML- und XML-Dokumente enthalten dann lediglich Angaben zum Inhalt bzw. zur inhaltlichen Gliederung und zur Bedeutung der einzelnen Website-Bestandteile, während die gestalterischen Mittel in sogenannten CSS-Dateien gesondert aufgeführt werden. Werden Stylesheets verwendet, muss der Webserver diese beim Aufruf einer Seite zusätzlich zum HTML-Dokument und den implementierten multimedialen Inhalten (Bilder, Videos etc.) an den Browser weiterleiten, was wiederum Auswirkungen auf die Ladezeiten hat. Je komplexer und größer die CSS-Dateien sind, desto länger muss der Besucher warten, bis die Seite vollständig geladen ist. Indem Sie die Codes der verwendeten CSS komprimieren, können Sie die Größe der CSS-Dateien deutlich verringern und die Performance Ihrer Website verbessern.

Die Möglichkeiten der CSS-Optimierung

Der Ladezeit einer Website wird eine immer größere Wichtigkeit zugeordnet – insbesondere im Zuge des Aufstiegs mobiler Geräte und Datenverbindungen. Gleichzeitig ist der Aufgabenbereich von CSS gewachsen: So übernimmt die Stylesheet-Sprache zunehmend auch Funktionen von JavaScript. Insbesondere Templates von Content-Management-Systemen wie WordPress warten oftmals mit überladenen CSS-Dateien auf, die den Aufbau beim Webseitenaufruf unnötig bremsen. An dieser Stelle stellen wir Ihnen einige Tipps und Tricks vor, mit deren Hilfe Sie Ihre CSS komprimieren und so für kürzere Ladezeiten sorgen:

  1. Vermeiden Sie den übermäßigen Einsatz von Inline-CSS (direkt am HTML-Element untergebrachte Styles), insofern es sich nicht um den Anfangsbereich der HTML-Seite handelt. Gleiches gilt auch für style-Tags (individuelle CSS-Eigenschaften, die vom Standard des jeweiligen Stylesheets abweichen).
  2. Kombinieren Sie mehrere CSS-Dateien in einem PHP-Skript. So muss der Client nur die PHP-Datei abrufen, anstatt jeweils eine HTTP-Anfrage pro Stylesheet senden und abwarten zu müssen.
  3. Verwenden Sie nach Möglichkeit Kurzschreibweisen wie: body { margin: 20px 10px 5px 10px } anstelle von ausführlichen Formulierungen wie: body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px }
  4. Vermeiden Sie außerdem Überqualifizierungen. Kommen bestimmte Tags sowieso ausschließlich in einem Element (z. B. in einer Liste) vor, muss das Element nicht extra erwähnt werden.
  5. Nutzen Sie für Farben die Hex-Werte anstelle der RGB-Notation.
  6. Den Universalselektor „*“ sollten Sie nur im äußersten Notfall gebrauchen. Eine Darstellungsvorgabe mit Universalselektor gilt für jedes Element, sodass der Browser auch zunächst alle Elemente mit der jeweiligen Vorgabe versorgen muss.
  7. Verkleinern Sie die CSS-Datei, indem Sie unnötige Leerzeichen, leere Zeilen und Kommentare löschen. So muss beispielsweise hinter dem Doppelpunkt und hinter dem Semikolon kein Leerzeichen stehen. Auch das abschließende Semikolon nach dem letzten Glied der Aufzählung können Sie streichen. Durch diesen Vorgang verliert die CSS-Datei zwar ihren systematischen Aufbau und die Übersichtlichkeit, wird vom Browser aber wesentlich schneller interpretiert.

Da die Minimierung der CSS-Datei kompliziert ist, sollten Sie in jedem Fall eine Sicherungskopie anlegen, solange die CSS noch übersichtlich ist. So können Sie im Nachhinein leichter Änderungen vornehmen oder Fehler beheben. 

CSS komprimieren: Online- und Offline-Tools

Für alle, die den Aufwand einer manuellen CSS-Optimierung umgehen möchten, gibt es diverse Webanwendungen sowie Offline-Applikationen, mit deren Hilfe Sie die CSS komprimieren können. Die Tools nehmen Ihnen die mühsame Arbeit ab und entfernen zumindest Leerzeichen, Tabulatoren, Kommentare und Zeilenumbrüche sehr zuverlässig. Auch die Umwandlung des Farbcodes gelingt mit den meisten Programmen. Das Ergebnis können Sie sich direkt als CSS-Datei herunterladen oder per Copy-and-Paste herauskopieren. Wir präsentieren Ihnen drei Anwendungen im Kurzporträt:

CSS Minifier

Die Online-Anwendung CSS Minifier erreichen Sie über die Seite cssminifier.com. Kopieren Sie hier einfach Ihren CSS-Code in das Feld „Input CSS“ und starten Sie den Prozess über einen Klick auf „Minify“. Im Feld „Minified Output“ sehen Sie im Anschluss das Ergebnis, das sie entweder manuell kopieren oder über „Download as File“ herunterladen können. CSS Minifier kürzt den Code um sämtliche Zeilenumbrüche und Leerzeichen und entfernt auch das abschließende Semikolon in Aufzählungen. Außerdem wandelt das Tool RGB-Codes problemlos in die komprimierte Hex-Variante um.

CSS Compressor

Die Web-Anwendung CSS Compressor unterscheidet sich insofern von CSS Minifier, als Sie ein paar Optionen für die Komprimierung des Codes zur Auswahl haben. Rufen Sie zunächst die Website csscompressor.com auf und kopieren Sie Ihre CSS in das Feld „CSS Source Code Input“. Nun können Sie den Komprimierungsgrad festlegen. Über „Show advanced options“ setzen Sie anschließend Häkchen bei den gewünschten Optimierungsgrößen wie z. B. Farben („Compress colors“) oder Leerzeichen („Remove unnecassary backslashes“). Über „Compress“ starten Sie die Komprimierung mit CSS Compressor. Zusätzlich zum Ergebnis im Feld „Compressed JavaScript“ liefert das Tool auch Auskünfte über die Input- und Output-Größe Ihrer CSS-Datei sowie die erzielte Minimierung in Prozent.

Free CSS Toolbox

Free CSS Toolbox ist eine kostenlose Software für Web-Entwickler, die Sie sich auf der Seite des Entwicklers Blumentals Software downloaden können. Wie der Name bereits verrät, handelt es sich um eine Sammlung von Tools – unter anderem sind auch die Formatierung und Überprüfung von CSS-Codes möglich. Im Menü „CSS Formatting Options“ wählen Sie die zu optimierenden CSS-Parameter aus und starten die Komprimierung anschließend über „Re-Format Now“. Free CSS Toolbox entfernt dabei problemlos Leerstellen und das letzte Semikolon, und auch die Größe der Farben wird minimiert. Das Programm läuft auf allen Windows-Betriebssystemen ab XP.

Schnellere Ladezeiten dank optimierten CSS

Je umfangreicher Sie Ihre Website oder Ihren Webshop gestalten, desto mehr sind Sie auf Stylesheets – in den meisten Fällen CSS – angewiesen. Dass die Belastung für Ihren Webserver bei zunehmender Anzahl und Größe der CSS-Dateien stetig steigt, verwundert nicht. Soll eine beliebige Seite durch den Client (Browser) geöffnet werden, müssen immer alle CSS-Daten abgerufen und weitergeleitet werden. Aus diesem Grund ist die Optimierung der Stylesheets mehr als empfehlenswert. Online- und Offline-Tools wie die vorgestellten Beispiele ermöglichen selbst Neulingen unter den Webentwicklern, unwichtige Informationen aus der CSS-Datei zu streichen. Den maximalen Optimierungsgrad erreichen Sie mit den Anwendungen allerdings nicht. Hierfür müssen Sie selbst zur Tat schreiten oder die Hilfe einer Fachkraft in Anspruch nehmen.

War dieser Artikel hilfreich?