Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Webseiten schnell laden – wenn Millisekunden zählen – die Zweite

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

100 von 100 bei PageSpeed Insights

Folgende Faktoren beeinflussen die Ladezeit:

  1. 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.
  2. CSS ist in der Regel auf mehrere Dateien aufgeteilt. Auch dies dient dazu, die spätere Wartung zu erleichtern.
  3. 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?

Der Erfolg lässt sich mit Werkzeugen wie PageSpeed Insights webpagetest.org oder Pingdom belegen.

Creative Commons Lizenzvertrag
Artikeltext (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE

1 Kommentar

  1. 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 !

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Spam kommentarlos zu entfernen.