Home / Pagespeed / CSS Dateien mit PHP zusammenfassen

CSS Dateien mit PHP zusammenfassen

Wird ein Projekt größer und besteht aus verschiedenen Designelementen, dann kann es schnell sehr unübersichtlich für den Webmaster und Designer werden, falls alle CSS-Klassen in einer CSS-Datei zusammengeführt werden. Dann ist es übersichtlicher mehrere CSS-Dateien zu erstellen und diese in dem HEAD-Bereich des Quellcodes nacheinander einzubinden. Doch was für die Übersichtlichkeit von Vorteil ist, ist für die Geschwindigkeit der Webseite bei dem Laden (Performance) eher von Nachteil. Denn durch jede einzelne CSS-Datei muss der Server einen Request starten. Je mehr Requests benötigt werden, desto langsamer wird die Webseite.
Daher ist es empfehlenswert die einzelnen CSS-Dateien wieder zusammenzufassen. Dafür gibt es verschiedene Herangehensweisen.
Eine relativ einfache Variante ist das Zusammenfassen von CSS-Dateien in einem Ordner mittels eines kleinen PHP-Codes.

Vorgehensweise CSS Dateien zusammenfassen:
Kopiert den nachfolgenden Code in eine leere PHP-Datei und speichert diese dann ab. Z.B. unter der Bezeichnung kombi_css.php und ladet diese dann in den Ordner mit den CSS-Dateien. Empfehlenswert und Bedingung ist bei dieser Variante alle CSS-Dateien in einem einzigen Ordner abzulegen um sie anschließen mittels dem PHP-Code zusammenfassen zu können.

Solltet Ihr die kombi_css.php Datei nicht direkt in den CSS-Ordner ablegen können, dann müsst Ihr unbedingt den Pfad zu dem CSS-Ordner in der PHP-Datei anpassen. Ändert dazu bitte die Zeile
$css_verzeichnis = ".";
Diese PHP-Datei wird dann ganz normal mittels INCLUDE_ONCE in dem HEAD-Bereich der Webseite aufgerufen. Das kleine Script fasst automatisch alle in dem Zielordner befindlichen CSS-Dateien zu einer einzigen zusammen. Testet dies einfach in dem Ihr den Quelltext der Webseite öffnet und darin auf die kombi_css.php-Datei klickt. Dann werdet Ihr feststellen, dass alle in dem CSS-Ordner befindlichen CSS-Dateien zu einer einzigen zusammengefasst sind.

1 Star2 Stars3 Stars4 Stars5 Stars (1 Bewertungen, Durchschnitt: 4,00 von 5)
Loading...

Check Also

Reihenfolge der Formate und Skripts optimieren

Wenn der Punkt Reihenfolge der Formate und Skripts optimieren bei der PageSpeed Analyse angezeigt wird, …

1 Kommentar

  1. Ein prima Script aber was vielleicht hier noch wichtig wäre zu erwähnen, ist die Tatsache, dass die Reihenfolge der CSS Dateien sehr wichtig ist.

    Es gibt durchaus viele moderne Layouts (meist Themes von CMS etc.) in denen zunächst eine „Base-CSS“ das Layout regelt und mit Hilfe einer „Custom-CSS“ dann die Feinheiten der Seite eingestellt werden. Dabei überschreibt die Custom-CSS teilweise Stylings aus der Base-CSS.

    Dies führt zu Darstellungsproblemen wenn die Base-CSS NACH der Custom-CSS geladen- oder wie hier ans Ende einer Datei gepackt werden sollte.

Schreibe einen Kommentar zu Mischa Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

This site uses Akismet to reduce spam. Learn how your comment data is processed.