CSS optimieren, CSS im Browser Cache ablegen, Traffickosten senken
Tutorial 3:

CSS optimieren

CSS-Datei Optimierung durch komprimieren und ablegen im Browser Cache

Im folgenden Tutorial wird beschrieben wie man die Dateigröße vorhandener CSS-Dateien optimieren kann,
sowie durch Ablegen der CSS-Dateien im Browser-Cache den Seitenaufbau beschleunigen und Ladezeiten verringern kann.

Grundlegend sollte man darauf achten das auf der Webseite immer nur die CSS-Dateien eingebunden sind die auch benötigt werden.
Hilfreich sind dabei modulare CSS-Dateien für Texte und Farben. Dabei werden CSS-Elemente in Gruppen gegliedert
zum Beispiel Gruppen für die Font-Family, Farbe, Größe sowie die Höhe, Effekte.
Darauf wird in einem folgenden Tutorial genauer eingegangen, jetzt beschränken wir uns auf bereits vorhandene CSS-Dateien.

Diese sind oft zur besseren Lesbarkeit gegliedert wie in diesem Beispiel.

Durch diese lesbare Formatierung ist die CSS-Datei für den Programmierer gut lesbar,
aber sie wird durch die vorhandenen Leerzeichen, Zeilenumbrüche sowie Kommentare auch größer als sie sein müsste.
Dem Browser ist es egal ob der Programmierer seine CSS-Datei gut lesen kann.
Möchte man nun eine solche CSS-Datei optimieren sollte man also alle Umbrüche und Leerzeichen verschwinden lassen,
sowie die Kommentare entfernen. Am Ende würde also der ganze CSS-Code in nur einer Zeile stehen.

Wem das zu drastisch ist der kann auch folgende Methode anwenden,
oder die von optimierte-website.de entwickelte PHP-Klasse ow_cachedcss verwenden.


Dabei werden für jede CSS-Klasse alle Styles hintereinanderweg in eine Zeile geschrieben.
Am Besten fängt man bei dieser Methode ganz unten an und arbeitet sich bis zum Anfang nach oben durch.

Vergleicht man die neu erstellte CSS-Datei mit dem Original wird so schon einen sichtbaren Unterschied in der Dateigröße feststellen.
Und sie ist immer noch gut lesbar.
Ein Tipp noch: Nach Möglichkeit auf Hintergrund-Bilder in CSS-Dateien verzichten,
da diese von vielen Browsern mit geladen werden unabhängig davon ob diese benötigt werden oder nicht.
Das verzögert spürbar den Seitenaufbau und treibt die Traffic-Kosten unnötig in die Höhe.

Hat man die Dateigröße auf ein Minimum reduziert, kann man zum nächsten Schritt übergehen dafür zu sorgen
dass die CSS-Datei im Browser-Cache abgelegt wird und nicht bei jedem Seitenaufruf neu vom Server geladen wird.
Das hat den Vorteil das der Browser die CSS-Styles bereits kennt, die Seite sich schneller aufbaut,
der Webserver weniger belastet wird und obendrein noch Traffickosten gespart werden.
Zu diesem Zweck wurde von optimierte-website.de die PHP-Klasse ow_cachedcss entwickelt
die hier zum kostenlosen Download bereitsteht.

CSS-Dateien optimieren,komprimieren und Browserseitig cachen lassen mit der PHP-Klasse ow_cachedcss

ow_cachedcss besteht aus 2 Dateien. Zum einen aus der Datei ow_cachedcss.php welche auch im HTML-Code der CSS-Datei vorangestellt wird.
Diese Datei befindet sich im gleichen Verzeichnis wie die anderen HTML-Dokumente bzw. PHP-Dateien.



Die zweite Datei class.ow_cachedcss.php befindet sich im Ordner ow_classes/

In der Datei ow_cachedcss.php hat man die Möglichkeit die Gültigkeit, also die Dauer (Angabe in Sekunden)
wie lange ein Browser die CSS-Datei bereithalten soll einzustellen.
Außerdem kann man die Komprimierung an oder aus stellen (true/false).
Standardmäßig ist eine Zeit von 604800sec. (7 Tage) eingestellt sowie die Komprimierung eingeschaltet.
Die Klasse wurde mit den gängigsten Browsern getestet.
Nutzt man diese Klasse kann man sich die oben beschriebenen Optimierungen ersparen da die Klasse das für einen übernimmt.


(c) optimierte-website | 02.11.2006