CSS und Page Speed

Rund um die Optimierung von CSS Dateien gibt es einige verschiedene Herangehendweisen. Je nach serverseitigen Einstellungen führen verschiedene Methoden zum Erfolg. Einige verschiedene Varianten werden in einem Tutorial vorgestellt. Ihr müsst nur noch prüfen welche der Varianten zur CSS Optimierung bei Euch eingesetzt werden können und so einen fehlerfreien Erfolg bringen.

CSS minimieren

Bei der Page Speed Analyse trifft man oft auf den Punkt Minify CSS. Wenn davor ein grünes Häkchen steht, dann ist nichts weiter zu tun. Bei gelb oder gar rot ist Handlungsbedarf. Hier sind ist eine Anleitung um die CSS Dateien zu minieren zu finden, inkl. einigen Onlinetools. CSS minimieren

nicht verwendeten CSS Code entfernen

Hier werden all die CSS Codezeilen aufgelistet die auf der aktuell analysierten Webseite nicht verwendet werden. Schnelles Löschen der Zeilen sollte vermieden werden, denn sie können auf anderen Unterseiten verwendet werden. Mehrere CSS Dateien könnten hier die Lösung des Problems sein.
nicht verwendeten CSS Code entfernen

CSS Sprites

Mittels CSS Sprites kann die Anzahl der http Request´s deutlich gesenkt werden. Um CSS Sprites nutzen zu können bedarf es Änderungen an den Bildern des Designs, sowie an der CSS Datei. Mittels Onlinetools kann dies schnell realisiert werden.
CSS sprites für Bilder verwenden

CSS in den Dokumentkopf

Alle CSS-Dateien sollten innerhalb des HEAD-Bereiches des Quellcodes einer Webseite geladen werden. Es sollte vermieden werden, verschiedene CSS-Dateien innerhalb des BODY-Bereich zu laden. Dies ist jedoch bei verschiedenen Vermarkter-Codeschnipseln, wie z.B. Adsense, nicht immer möglich.
CSS in den Dokumentkopf

@import von CSS-Dateien

In der Page Speed Analyse wird stellenweise der Fehler “@import in CSS vermeiden” angezeigt. Um dieses Problem schnell abzustellen gibt es zwei unterschiedliche Lösungsansätze.
@import in CSS vermeiden

CSS Dateien zusammenfassen

Da für jede einzelne CSS-Datei, welche für das Design benötigt wird, ein Request gestartet werden muss, kann sich so bei mehreren CSS-Dateien die Ladezeit der Webseite erhöhen. Einfacher ist es alle CSS-Dateien zu einer einzigen zusammen zu fassen. Das geht schnell und einfach mit einer PHP-Datei.
CSS Dateien zusammenfassen