Combine external CSS - CSS kombinieren

Der Punkt Combine external CSS bei der PageSpeed-Analyse ist unterschiedlich zu werten. Zum einen werden damit externe CSS Dateien gemeint, die auf der eigenen Seite eingebunden sind (teilweise werden solche CSS Dateien über Include-Befehle oder durch JavaScript-Dateien mit eingebunden) und zum anderen werden auch CSS-Dateien darin aufgeführt die auf dem eigenen Webspace gehostet werden, und somit eigentlich nicht in den Punkt externer CSS Dateien gehören.

Sobald man mehrere CSS Dateien im Quellcode der eigenen Webseite eingebunden hat, egal ob interne oder externe, dann werden diese in diesem PageSpeed-Punkt angezeigt. Auch wenn die CSS-Dateien schon mittels GZIP komprimiert sind, dennoch werden sich aufgelistet.
Der Grund liegt darin, die Anzahl der http Request´s so gering wie möglich zu halten. Je mehr CSS Dateien geladen werden, desto höher ist die Anzahl der http Request´s. Um dieses Problem zu lösen gibt es verschiedene Herangehensweisen.

Variante 1: Manuelles Zusammenfassen der CSS Dateien

Wenn es technisch möglich ist, dann sollten die verschiedenen CSS Dateien in einer einzigen CSS Datei zusammengefasst werden. Auch wenn dies zu einer sehr großen Datei führt (eventuell lässt sich diese noch minimieren und mit GZIP komprimieren).
Wird dann nur noch eine einzige CSS Datei für das komplette Design benötigt, dann ist der Punkt Combine external CSS gelöst.

Variante 2: CSS kombinieren mittels .htaccess und PHP

Um die Anzahl der http Request´s zu minimieren und damit gleichzeitig die Ladegeschwindigkeit einer Webseite zu erhöhen ist es empfehlenswert mehrere CSS Dateien zu kombinieren (miteinander zu verbinden).
Unter Verwendung eines kleinen Scriptes ist es möglich alle CSS Dateien zu einer einzigen zu verbinden und diese gleichzeitig mittels GZIP zu komprimieren. Das Script ist kostenlos verwendbar und kann unter
+rakaz.nl – compress JS und CSS
heruntergeladen werden. Es besteht nur aus einer PHP Datei namens combine.php, sowie einem .htaccess Befehl.

Kleine Anleitung:
Ladet Euch die PHP Datei herunter und passt in dieser den Pfad zu den CSS Dateien an. Dann fügt Ihr den entsprechenden .htaccess Code in die Eure .htacess Datei ein (achtet dabei auf die richtige Pfadangabe). Dann ladet diese beiden Dateien (combine.php und die geänderte .htaccess auf den Server hoch). Jetzt könnt Ihr im Quellcode des Designs noch das Aufrufen der CSS Dateien anpassen.

Beispiel: So wird aus:

dann:

Fertig. Damit werden alle CSS Dateien zu einer einzigen zusammengefasst und mit GZIP komprimiert (klappt natürlich nur wenn die GZIP-Komprimierung auf dem Server aktiviert ist). Damit ist der Punkt Combine external CSS gelöst.