Artikel-Hilfsmenü
Freitag, 15. September 2017 – aktualisiert am Mittwoch, 25. Dezember 2019
Webseiten schnell laden – wenn Millisekunden zählen – die Zweite
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Combine and compress CSS on the fly
Ich bin ein Speed-Freak. Mit dieser Aussage habe ich den Vorgänger-Artikel zum Thema "Webseiten schnell laden" eingeleitet. Dort ging es um deferred loading von JavaScripts.
Das heutige Thema: Ladezeit von CSS-Dateien
tl;dr;
Folgende Faktoren beeinflussen die Ladezeit:
- CSS-Dateien müssen, um les- und wartbar zu bleiben, strukturiert und ausführlich kommentiert werden. Das bläht zwangsläufig die Dateigröße auf.
- CSS ist in der Regel auf mehrere Dateien aufgeteilt. Auch dies dient dazu, die spätere Wartung zu erleichtern.
- CSS-Ressourcen blockieren das Rendering. Dieser Fehler wird häufig von PageSpeed Insights moniert. Und viele Webseitenbastler verzweifeln an diesem Fehler.
Die o.g. Punkte 1 und 2 lassen sich relativ leicht lösen. Mehrere CSS-Dateien mit einem Texteditor zu einer Datei zusammenzufügen ist kein Hexenwerk. Und um CSS zu komprimieren gibt es zahllose Online-Tools im Web. Das Ergebnis kann zwar hinsichtlich Ladezeitoptimierung befriedigen. Allerdings ist die so erzeugte kombinierte und komprimierte Datei nicht mehr wartbar. Es müssen also die Originaldateien aufbewahrt werden, und bei jeder Änderung der Prozess "Kombinieren und Komprimieren" erneut durchgeführt werden. In der Praxis ist diese Vorgehensweise viel zu aufwendig. Was also tun?
Kombinieren von CSS-Dateien mit PHP
file_get_contents fasst den Inhalt mehrerer Dateien zu einem String in der Variablen $content zusammen:
$content = file_get_contents('pfad_zu/style.css');
$content .= file_get_contents('pfad_zu/style2.css');
$content .= file_get_contents('pfad_zu/style3.css');
usw.
Komprimieren von CSS-Dateien mit PHP
Auch das ist kein Hexenwerk:
// Kommentare entfernen
$content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
// Tabs, Leerzeichen und Zeilenumbrüche entfernen
$content = str_replace(array("\r\n","\r","\n","\t","\s"," "," "),"", $content);
// letztes Semikolon, Leerzeichen nach Doppelpunkt und Leerzeichen vor Klammer entfernen
$content = str_replace(array(";}",": "," {"),array("}",":","{"),$content);
Jetzt haben wir den kombinierten und komprimierten CSS-Code in der Stringvariablen $content vorliegen. Damit könnte man jetzt serverseitig eine neue Datei erstellen, z.B. css_comb.php
<?php
header('Content-type:text/css; charset=utf-8');
echo $content;
?>
Diese Datei wird an Stelle der bisherigen CSS-Dateien im <head>-Bereich eingebunden:
<link rel="stylesheet" type="text/css" href="css_comb.php" />
Ja, es darf eine .php-Datei sein! Die header-Anweisung macht's möglich.
Fehlt noch die Lösung für o.g. Punkt 3 "CSS-Ressourcen blockieren das Rendering."
Nichts leichter als das: Wir verwenden die Stringvariable $content, um das komplette CSS inline einzufügen, an Stelle der externen CSS-Datei css_comb.php
<?php
echo '<style>';
echo $content;
echo '</style>';
?>
Und jetzt alles zusammengefasst:
<?php
echo '<style>';
$content = file_get_contents('pfad_zu/CSS/style.css');
$content .= file_get_contents('pfad_zu/CSS/style2.css');
$content .= file_get_contents('pfad_zu/CSS/style3.css');
// Kommentare entfernen
$content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
// Tabs, Leerzeichen und Zeilenumbrüche entfernen
$content = str_replace(array("\r\n","\r","\n","\t","\s"," "," "),"", $content);
// letztes Semikolon, Leerzeichen nach Doppelpunkt und Leerzeichen vor Klammer entfernen
$content = str_replace(array(";}",": "," {"),array("}",":","{"),$content);
echo $content;
echo '</style>';
?>
Was haben wir erreicht?
- Eine substantielle Verringerung der Dateigröße.
- Alle http-Requests für CSS-Dateien eliminiert.
- Das inline-CSS ist die einzige praktikable Möglichkeit, auch PageSpeed Insights zufrieden zu stellen.
- Die ganze Arbeit wird von PHP auf dem Server in wenigen Millisekunden erledigt.
- Und das Wichtigste: Die Wartung und Pflege des CSS erfolgt wie gewohnt in beliebig strukturierten und kommentierten Einzeldateien.
Der Erfolg lässt sich mit Werkzeugen wie PageSpeed Insights webpagetest.org oder Pingdom belegen.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
1 Kommentar
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Michael schrieb am Sonntag, 19.11.17 23:24 Uhr:
Absolut Super Sache! Ich hab so gut wie fast keine Ahnung von php! Aber nach 5 mal durchlesen hab ich kapiert das es eigentlich ganz einfach ist das, Script einzufügen.
Die Ladezeiten haben sich um ca. 1 Sekunde verkürzt. Page Speed meldet 100 Punkte.
Was will man mehr? :-)
Ganz großes Dankeschön !!
Ich hatte mich in den letzten Monaten auch mit der von Ihnen oben beschriebenen Problematik rumgequält. Hatte es sogar geschafft auf 100 Punkte zu kommen und musste das wieder reduzieren weil die drei Hauptbrowser alle unterschiedlich rendern und es zu unliebsamen kurzen "Zuckungen" beim Aufbau kam.
Das hab ich jetzt noch beim Chrome ganz kurz, aber ich hab schon eine Idee wie
ich das auch verhindere.
Vielen Dank nochmal !