CSS-Dateien zu kombinieren (Combine external CSS) kann und muss bei der PageSpeed-Analyse unterschiedlich bewertet werden. Jeder Webmaster muss technologisch prüfen ob seine für das Webdesign verwendeten CSS-Dateien kombiniert werden können. Teilweise ist dies nicht möglich, vor allem bei extern eingebundenen CSS-Dateien wie z.B. über google-Adsense. Solche CSS Dateien werden per INCLUDE-Befehle oder mittels JavaScript-Dateien eingebunden.
Sobald man mehrere CSS Dateien im Quellcode der eigenen Webseite eingebunden hat, egal ob interne oder externe, dann werden diese in diesem PageSpeed Analyse-Punkt mit aufgelistet. Auch wenn die CSS-Dateien schon mittels GZIP komprimiert sind, werden diese dennoch in der Liste der verwendeten CSS-Dateien aufgeführt.
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 der Vielzahl von CSS http Request´s 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).
Ziel sollte es sein, die Anzahl eingebundenen CSS-Datei so gering wie möglich zu halten.
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:<link rel="stylesheet" href="reset.css" type='"text/css" media="screen" />
<link rel="stylesheet" href="style.css" type='"text/css" media="screen" />
<link rel="stylesheet" href="blue.css" type='"text/css" media="screen" />
dann:<link rel="stylesheet" href="reset.css,style.css,blue.css" type='"text/css" media="screen" />
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 wäre der PageSpeed Punkt CSS Dateien kombinieren gelöst.
