Da ich letzten Freitag ja Geburtstag hatte und das Wochenende doch recht lang wurde, komme ich leider erst heute dazu etwas für den Webmasterfriday - dieses Mal mit dem Thema CSS optimieren - zu schreiben. Mancher fragt sich, was das nun mit SEO zu tun hat. Obwohl es nicht bestätigt ist, gehe ich fest davon aus, das auch die Ladegeschwindigkeit einer Seite ein Faktor für gutes SEO ist. Nicht zuletzt dadurch, dass die Seite sich für den Besucher (für den wir ja eigentlich suchmaschinenoptimieren) schneller aufbaut. Aus dem Grund wollen wir uns heute anschauen, wie wir CSS-Dateien ordentlich aufbauen und wie man diese gekonnt optimieren kann.

Was sind Cascading Style Sheets?

Cascading Style Sheets werden verwendet um HTML-Elemente zu gestalten. Dazu bedient man sich Methoden um die (Hintergrund-)Farbe zu ändern, verschiedene Schriftarten zu verwenden, Inhalte zu positionieren und vieles mehr. Man trennt also Gestaltung von HTML-Code (so wie es überall sein sollte). Allerdings gibt es mehrere Varianten CSS zu schreiben. Für welche man sich entscheidet, bleibt jedem selber überlassen - welchen Stil, welche Art - diese Art von Fragen wollen wir uns zuerst stellen

Den richtigen CSS-Schreibstil finden

Vorweg kann man sagen, dass es keinen allgemein gültigen Weg gibt welches der beste CSS-Schreibstil ist. Es gibt allerdings einige Tricks, mit welchen man sich das Leben sehr viel leichter machen kann.

Schreibe wartbaren Code

Wie bei der PHP- oder Templateprogrammierung sollte man darauf achten, dass man seinen CSS-Code übersichtlich gestaltet, am besten auch hier mit Einrückungen. Je mehr man den Code an sich gestaltet, desto leichter lässt er sich später lesen. So kann man z. B. eine Oberklasse für Navigation anlegen und alle Felder die dazugehören nach Rechts einrücken. Darunter würden dann Elemente wie sortierte und unsortierte Listen fallen (ul, ol, li). Zusätzlich zur CSS-Optimierung sollte man auch aussagekräftige Klassennamen verwenden. Mit Box1 kann man in einem halben Jahr nichts mehr anfangen (ich weiß wovon ich rede - habe das Problem mit meinen alten Skripten am eigenen Leib erfahren). Besser wäre z. B. navigationsbox-rechts (oder so ähnlich).

Benutze CSS-Shorthand Techniken

Eine andere Möglichkeit viele Zeilen Code und damit verbunden auch Dateigröße und Bandbreite zu sparen ist der Einsatz der Shorthand-Technik. In dem man mehrere Elemente (z. B. beim Attribut padding), welche man in mehrere Zeilen aufteilt (padding-left usw...) nimmt man in dieser Technik gesammelt in einer Zeile. Ich habe hier mal 3 Beispiele zurechtgelegt, welche den Grundgedanken darstellen sollen. Zunächst einmal die CSS-Variante ohne Shorthand, am Beispiel von 3 verschiedenen Klassen.

.klasse-padding {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

	color: #000000;
}

.klasse-border {
	border-color: #CCC;
	border-style: dashed;
}

.klasse-font {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: bold;
	font-style: italic;
	font-variant: small-caps;
	font-family: verdana,serif;
}

Wie man am Code erkennen kann, benötigen wir für die Klasse "padding" um alle Seiten anzusprechen 4 Zeilen plus 1 Zeile für die Farbe. Für einen Rahmen benötigen wir je eine Zeile für die Farbe, sowie eine für die Linienart. Ganz stark merkt man es bei Schriftsätzen. Her benötigen wir ganze 6 Zeilen um eine Schritart komplett durchzugestalten. Schauen wir uns einmal an wie ein optimierter Shorthand-Code aussieht.

.klasse-padding {
	padding: 5px 5px 5px 5px;
	color: #000;
}

.klasse-border {
	border: 1px dashed #CCC;
}

.klasse-font{
	font: 1em/1.5em bold italic small-caps verdana,serif;
}

In der Padding-Klasse können wir uns 3 Zeilen und 3 Zeichen sparen, in dem wir die Angaben für alle Seiten in eine Zeile übernehmen. Hier geht die Reihenfolge von oben herab im Uhrzeigersinn (Top - Right - Bottom - Left).
Die Borderanweisungen können auch in einer Zeile zusammengefasst werden. Wir definieren hier eine Größe, die Linienart und am Ende noch die Farbe.
Am meisten können wir bei Font-Anweisungen einsparen. In diesem Beispiel haben wir alle Anweisungen in eine einzelne CSS-Anweisung gepackt.

Weiterführende Links zum Thema CSS Shorthand

• Videoscreencast zum Thema CSS-Shorthand von Chris Coyier (css-tricks.com)
• CSS Shorthand Guide zusammengefasst von Dustiandiaz.com
• CSS Shorthand Cheat Sheet von Leigeber.com

CSS-Dateien komprimiert ausliefern

Eine ganz andere Möglichkeit bietet uns die Methode CSS-Dateien on-the-fly von allem unnötigen zu entschlacken und so die Dateigröße so gering wie möglich zu halten. Dazu bedienen wir uns ein wenig PHP sowie einigen regulären Ausdrücken und nützlichen Server-Tricks.

Die Perishable Press Methode

Basis dieser Methode für CSS-Komprimierung ist das wir die css-Datei in .php umbenennen, damit dies auch ausführbar wird. Zum Beispiel könnte man anhand einer WordPress-Datei den Dateinamen style.css.php verwenden.
Bei dieser Methode starten wir zunächst den gzhandler, also die Funktionen die unsere Daten per gzip ausgeben. Nachteil dieser Methode ist, das dies Serverlastig ist und somit im Extremfall auch ein negativer Effekt erzeugt werden kann. Den folgenden Code müsst Ihr in den ersten Zeilen der CSS-Datei einfügen.

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Die Reinhold Weber Methode

Die Reinhold Weber Methode ist in meinen Augen eine der besten Methoden um CSS-Dateien komprimiert an den Browser auszuliefern. Mit dieser Methode entfernen wir vor dem Laden der CSS-Datei sämtliche unnützen Zeichen sowie Kommentare. Die Datei wird also auf ein Minimum reduziert. Dazu bedienen wir uns wie in der Perishable Press Methode den Umstand dass wir anstatt einer CSS-Datei eine PHP-Datei als Stylesheet laden. In dieser PHP-Datei können wir dann beliebig viele CSS-Dateien einbinden, welche nacheinander on-thy-fly optimiert werden. Hierzu der passende Code für die PHP-Datei:

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');

  ob_end_flush();
?>

CSS-Dateien vorab komprimieren

Eine letzte Komprimierungsmöglichkeit die ich ankratzen möchte, ist die Möglichkeit css-Dateien (auch javascript-Dateien) vorab zu komprimieren und diese dann im bereits gepackten Format auszuliefern. Das bietet den Vorteil dass der Server nicht damit beschäftigt ist Dateien zu komprimieren, da wir diese bereits vorher lokal in das gzip-Format gebracht haben. Hier müssen wir nach der Komprimierung lediglich die .htaccess ein wenig abändern. <br /> <br />
Um Dateien in das gzip Format zu bringen bedienen wir uns dem Kommandozeilen-Programm gzip. Mittels "gzip -c <dateiname> > <dateiname>.gz" wird die ganze CSS-Datei komprimiert und als gzip gespeichert. Hier sind relativ hohe Komprimierungsraten zu erwarten, was wieder gut für unsere Bandbreite ist. Wir legen uns der Übersicht halber einen extra CSS-Ordner an, in denen wir jeweils die komprimierte CSS-Datei sowie die komprimierte CSS-Datei kopieren. Jetzt müssen wir noch die .htaccess anpassen, damit diese sofern der Browser dies unterstützt sofort die gzip-Variante anfordert.

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^js/(.*)\.js$ /js/$1.js.gz [L]
RewriteRule ^css/(.*)\.css$ /css/$1.css.gz [L]
AddEncoding x-gzip text.gz

Weiterführende Links

• 3 Methoden zur CSS-Komprimierung von catswhocode.com
• CSS und Javascript Dateien komprimiert ausliefern von alinki.com

Sonstige CSS-Optimierungs-Tipps

Neben diesen Methoden zur Optimierung von CSS-Dateien gibt es noch einige einfache Möglichkeiten wie man seinen Code übersichtlich und schnell gestalten kann.

• Keine doppelten Klassen- und ID-Namen
• Span-Elemente nutzen
• ID's und Klassen strikt trennen
• Keine unnützen Klassen im Code belassen
• Mit RSS-Feeds immer aktuell bleiben

Besonders auf den letzten Punkt möchte ich Euch drängen. Es gibt unzählige Blogs, welche tagtäglich - spätestens wöchentliche neue CSS-Tipps und Tricks verraten. So bleibt man immer aktuell und bei einem guten CSS-Stil.

Abschließendes

Auch wenn das Thema sich nicht ganz um SEO dreht, hoffe ich dennoch dass Ihr einen Mehrwert durch diesen Post habt. Ich bin wie gesagt nicht sicher ob sich Google dafür interessiert wie schnell die Seite geladen ist aber ein Besucher welcher nicht 5 Sekunden warten muss, wird es Euch sicherlich in Form von einem erneuten Besuch danken. Ebenso ist ein sauber strukturierter Code 10x einfacher zu warten als wenn man es einfach "hinprogrammiert".

Habt Ihr Kritik, Anregungen oder eigene Erfahrung mit dem Thema gemacht? Ich freue mich auf Eure Kommentare.