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.
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 Webseitenaufbau 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:
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.
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:
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.
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 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.
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.
Wer eine Website erstellen möchte, sollte sich bewusst machen, was er mit seiner Website bezweckt und welche Funktionen die Seite bieten soll. Nur so kann man bei der Websitegestaltung einem roten Faden folgen: Denn am Anfang des Webdesigns steht immer die Planung – auf ihr gründet die Umsetzung jeder Internetseite. Was gilt es zu beachten, worauf sollten Sie Wert legen? Wenn Sie ausreichend Zeit...
Die Typografie war für Webdesigner lange Zeit eine eher uninteressante Angelegenheit. Heutzutage sieht die Lage dank diverser technologischer Fortschritte gänzlich anders aus: Mit kreativen Webfonts setzen Sie auf einfache Art und Weise Highlights, ohne dass die Benutzer die jeweiligen Schriftarten auf ihren Geräten installiert haben müssen. Bei der Suche nach den geeigneten Webfonts gilt es...
Das Speichervolumen von Computern nimmt Jahr für Jahr zu. Immer mehr Giga- und Terabyte stehen zur Verfügung. Trotzdem ist es sinnvoll, die Größe von Dateien gering zu halten – insbesondere wenn Sie eine eigene Website betreiben. Denn komprimierte Daten bedeuten schnellere Ladezeiten, zufriedenere Besucher und ein besseres Google-Ranking. Vor allem Bilder sollten Sie für die Verwendung auf Ihrer...
Wenn Sie eine neue Webanwendung entwickeln wollen, stehen Sie vor der Wahl, den Code komplett neu zu schreiben oder alternativ auf Frameworks zurückzugreifen. Diese Code-Sammlungen enthalten ein anwendungsbereites Gerüst, das Sie in der Folge an die eigenen Vorstellungen anpassen können. Das CSS-Framework YAML stellt Ihnen beispielsweise eine responsive Rahmenstruktur zur Verfügung, die bereits...
Ein Website-Traffic-Checker verschafft Ihnen schnell einen Überblick darüber, wie viele Besucher eine Website anzieht und auf welchem Wege sie auf die Seite gelangen. Das ist wichtig um folgende Fragen zu beantworten: Wie erfolgreich ist eine Seite? Lohnt sich eine Zusammenarbeit? Insbesondere auch im Rahmen einer Konkurrenzanalyse ist ein Website-Traffic-Check sinnvoll. Wir stellen Ihnen sechs...
