CSS komprimieren und die Performance verbessern

Ein wichtiger Bestandteil der Optimierung der Ladezeit Ihrer Webseiten ist die effiziente Handhabung von CSS-Dateien. Durch gezielte Komprimierung und Best Practices lässt sich die Performance erheblich verbessern, was zu schnelleren Ladezeiten und einer besseren Nutzererfahrung führt.

Was ist CSS?

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 müssen die Besuchenden der Website warten, bis die Seite vollständig geladen ist. Indem Sie die Codes des verwendeten CSS komprimieren, können Sie die Größe der CSS-Dateien deutlich verringern und die Performance Ihrer Website verbessern. Eine weitere Möglichkeit zur Verbesserung der Ladezeiten ist das sogenannte Lazy Loading, bei dem CSS-Dateien nur bei Bedarf geladen werden. Dies reduziert die initiale Ladezeit, da nicht alle Stylesheets sofort geladen werden müssen, sondern erst dann, wenn sie tatsächlich benötigt werden.

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. HTTP/2 ermöglicht es mittlerweile jedoch, mehrere parallele Requests effizient zu verwalten, wodurch einzelne CSS-Dateien schneller geladen werden können, ohne dass eine vorherige Zusammenführung zwingend erforderlich ist.
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 zusätzlich 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: Kostenlose Online-Tools

Für alle, die den Aufwand einer manuellen CSS-Optimierung umgehen möchten, gibt es diverse kostenfreie Webanwendungen, mit deren Hilfe Sie CSS online 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 direkt kopieren und 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. Sie haben hierbei die Wahl aus vier verschiedenen vorkonfigurierten Optionen, die sich an der Lesbarkeit des komprimierten CSS orientieren. Über „Show advanced options“ können Sie darüber hinaus manuell Häkchen bei den gewünschten Optimierungsgrößen wie z. B. Farben („Compress colors“) oder Zeichen („Remove unnecessary backslashes“) setzen. Ü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.

CSS-Kompressor von Gillmeister Software

Der CSS-Kompressor von Gillmeister Software ist ein kostenloses Tool für Web-Entwickler, das eine mühelose Komprimierung von CSS-Codes ermöglicht. Der Kompressor entfernt dabei problemlos Leerstellen und das letzte Semikolon. Auch Kommentare werden aus dem CSS-Code gestrichen. Insgesamt kann laut Hersteller eine Reduktion von bis zu 30 Prozent erwartet werden.

Schnellere Ladezeiten dank optimiertem 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-Tools wie die vorgestellten Beispiele ermöglichen selbst Neulingen unter den Webentwicklerinnen und 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.