Automatische CSS Optimierung

10. Feb 2013

Dieser Artikel zeigt Ihnen, welche CSS-Optimierungen automatisch durchgeführt werden können und Ihnen so eine Menge Arbeit ersparen.

Dieser Artikel fasst zusammen, welche CSS-Optimierungen von Weblication CMS automatisch durchgeführt werden und Ihnen als Designer so eine Menge Arbeit ersparen. Er zeigt, welche Vorteile die Optimierungen bringen, und wie diese auch zukünftige Entwicklungen berücksichtigen können.

Browserspezifische CSS3 Schreibweisen automatisch generieren

Noch unterstützen unterschiedliche Browser die CSS3 Funktionen nur über browsersezifische Präfixe, wie z.B. -webkit, -moz, -ms oder -o. Die CSS3 Definitionen vielfach mit den jeweiligen Präfixen zu definieren, ist mit deutlichem Aufwand verbunden, sowohl bei der erstmaligen Definition als auch bei der nachträglichen Anpassung.

Weblication generiert Ihnen die browserspezifischen CSS3 Einstellungen automatisch. Sie brauchen lediglich die im CSS3 Entwurf definierte Schreibweise zu nutzen. In der Original-CSS finden keine Anpassungen statt, sondern nur in der für die Ausgabe optimierten CSS.

CSS3Pie einbinden

CSS3 wird erst ab der Version 10 des Internet Explorers ausreichend unterstützt. CSS3Pie ist ein Tool, welches ältere Internet Explorer Versionen in die Lage versetzt, CSS3 Effekte darzustellen. Schatten, abgerundete Ecken und Gradienten lassen sich über CSS3Pie auch mit Internet Explorer darstellen, die kein CSS3 unterstützen. 

Nachdem Sie CSS3Pie über das Weblics-Portal installiert haben, können Sie die CSS3Pie-Funktion im Projekt aktivieren. Im CSS selbst müssen Sie keine Anpassungen vornehmen. Neben der automatischen CSS3 Generierung, wird auch das CSS3Pie-Skript im optimierten CSS eingebunden. In der Original-CSS hingegen sehen Sie von CSS3Pie nichts, so dass Sie diese Funktion jederzeit deaktivieren können, wenn sie nicht mehr benötigt wird.

CSS Variablen nutzen

Wiederverwendbare CSS-Definitionen lassen sich in Variablen auslagern. Farben und Rahmen können so z.B. global definiert werden und wirken sich auf die gesamte Seite aus. Mit den einfachen CSS-Variablen steht ein transparentes Prinzip zur Verfügung, mit dem beliebige Zeichenketten bei der Optimierung ersetzt werden können. Auch der Weblication Layoutwizard nutzt CSS-Variablen intensiv. Farbschemen beispielsweise basieren vollständig auf CSS-Variablen. Eigene Layouts sind ebenfalls bis zu einem gewissen Grad vollständig über CSS-Variablen umsetzbar. 

Die Ersetzung von CSS-Variablen muss nicht separat aktiviert werden. Sie geschieht bei der automatischen Optimierung der CSS Datei.

Mehrere CSS Dateien automatisch zu einer Datei zusammenführen

Bei gleicher Größe ist es effektiver, eine Datei statt mehrere Dateien anzubieten, da die Anzahl der Server-Anfragen so reduziert werden kann. Alle in einer Seite eingesetzten CSS Dateien lassen sich zu einer einzelnen Datei zusammenführen, die dann schneller abgerufen werden kann. Sie müssen auch hierbei nichts weiter zu unternehmen, als diese Funktion in der Projektkonfiguration zu aktivieren.

CSS minimieren

Um CSS leserlich zu halten, werden die Definitionen durch Leerzeichen, Tabulatoren und Umbrüche formatiert. Diese Formatierungszeichen verbrauchen an sich bereits Speicher und müssen somit übertragen werden. CSS zu minimieren hat keinerlei Einfluss auf die Funktion der CSS-Definitionen und sollte somit im Live-Betrieb einer Webseite grundsätzlich aktiviert werden. Während der Entwicklungsphase kann diese Einstellung hingegen hinderlich sein, da man sich beim Debuggen nicht an den über die Developer-Tools angezeigten Zeilennummern orientieren kann. Die eigentliche Funktion beim Debuggen wird hingegen nicht beeinflusst. Die Minimierung und die Zusammenführung von CSS lassen sich beliebig kombinieren und beeinflussen sich nicht gegenseitig. 

CSS komprimieren

CSS wird grundsätzlich komprimiert ausgeliefert, falls die notwendigen Module auf dem Apache Server verfügbar sind. Sie müssen sich so um nichts kümmern und die ausgelieferte CSS-Datei ist um ca. 80% kleiner, was die Übertragung erheblich beschleunigt und die Datenmenge reduziert. 

Da inzwischen praktisch alle Browser das gzip Format zum Komprimieren von Dateien unterstützen, ist der Einspareffekt durch komprimierte CSS Dateien für alle sinnvoll. Sollte ein Browser oder Spider keine Komprimierung unterstützen, erhält er die unkomprimierte Version. Gerade auch im Zusammenhang mit Responsive Webdesign ist es wichtig, dass die Standard-CSS möglichst klein ausgeliefert wird, da der Zugriff über mobile Endgeräte oft noch über Verbindungen mit niedriger Bandbreite, wie z.B. GPRS geschieht.

Data URLs automatisch generieren

Kleine Bilder, wie z.B. Link-Icons, die im CSS als Hintergrundbilder definiert werden, sind zwar sehr schnell geladen, oft handelt es sich allerdings um eine große Anzahl unterschiedlicher Bilddateien, so dass sehr viele kleine GET-Anfragen durchgeführt werden müssen.

Diese Bilder lassen sich automatisiert direkt in die CSS-Datei einbetten, womit die GET-Anfragen vollständig entfallen. Bei einer Data URL wird statt der Bild-URL das Bild selbst im CSS definiert. Weblication kümmert sich hier um die gesamte Generierung und Einbettung in die CSS Datei. Da die Data URLs nur in der optimierten CSS Datei erscheinen, bleibt die Original-CSS einfach zu pflegen und der Designer muss sich um nichts weiter kümmern.

Optimiertes und zukunftssicheres CSS

Bereits bei den beschriebenen Optimierungen wird deutlich, dass den Verantwortlichen beim Aufbau von Webseiten mit Weblication CMS viel Arbeit abgenommen wird. Selbst wenn alle CSS-Optimierungen aktiviert sind, bleibt die CSS-Datei für den Entwickler übersichtlich, da die Optimierungen nur in der generierten CSS vom CMS automatisch umgesetzt werden.

Um die CSS-Optimierungen nutzen zu können, genügt es generell, diese einmalig zu aktivieren. Sie müssen keine externen Tools öffnen und keine webbasierten Tools aufrufen, um irgendwelche Optimierungen manuell durchzuführen.

Bei allen Optimierungen ist kein manuelles Deployment notwendig. Sie können praktisch in Echtzeit entwickeln. Weblication erkennt automatisch, ob sich etwas geändert hat, um dann und nur dann eine erneute Optimierung durchzuführen.

Zuletzt ist die Zukunftssicherheit ein nicht minder wichtiger Vorteil der integrierten CSS-Optimierung. Die derzeit optimalen CSS-Definitionen werden sich auch zukünftig den Entwicklungen des Browser-Marktes anpassen. Was momentan optimal ist, muss es in Zukunft nicht sein. Ob CSS3 Browser-Präfixe neue Komprimierungsmethoden oder der Wegfall von Browsern, die kein CSS3 unterstützen, alle Entwicklungen können durch ein Software-Update berücksichtigt werden und ersparen Ihnen zukünftig manuelle CSS Anpassungen.