Optimierung - Externe CSS-Dateien zusammenfassen um HTTP-Request zu sparen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie kann man mehrere CSS-Dateien zusammenfassen?

02Feb2014

Externe CSS-Dateien zusammenfassen um HTTP-Request zu sparen


Eine schnelle Webseite ist für einen Besucher angenehmer zu bedienen. Daher lautet das Ziel bei der Page Speed Optimierung: runter mit der Anzahl der HTTP-Request (Hypertext Transfer Protocol Anforderung), also die Anfragen vom Browser an den Webserver! Wird zum Beispiel eine CSS (Cascading Style Sheet)-Datei oder ein Script von der aufgerufenen Webseite benötigt, wird eine Anfrage an den Webserver gestellt und der Inhalt geladen. Es sei denn, der Inhalt befindet sich bereits im Browser-Cache des Bedieners.
Was tun? Wir könnten nun alle CSS (Cascading Style Sheet)-Dateien von Hand zu einer zusammenfassen. Aber das ist umständlich, unübersichtlich und erzeugt viel Arbeit.

Mit einem kleinen php-Script (Skriptsprache: Hypertext Preprocessor) werden mehrere CSS (Cascading Style Sheet)-Dateien automatisch zusammengefasst und somit die Anfragen an den Webserver verringert. Außerdem werden mit dem Script Kommentare, Leerzeichen und Zeilenumbrüche entfernt.
Der große Vorteil dieser Variante ist, dass die CSS (Cascading Style Sheet)-Datei beim Ersteller der Webseiten leserlich bleibt und damit auch einfacher geändert werden kann. Die Anregung bekam ich auf der Webseite von Webdesign tepelmann.

Ich habe das Script allerdings noch dahingehend geändert, dass in der Datei noch zusätzlich der Last-Modified-Header ausgegeben wird, um das aktuelle Änderungsdatum bei einer Analyse anzuzeigen. Außerdem werden das letzte Semikolon einer Deklaration, das Leerzeichen nach dem Doppelpunkt, sowie das Leerzeichen vor der Klammer gelöscht.

<?php
  header('Content-type:text/css; charset=utf-8');
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  function get_remote_file($url) {
    if (function_exists('curl_init')) {
      $c = curl_init($url);
      curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
      curl_setopt($c, CURLOPT_HEADER, 0);
      $file = curl_exec($c);
      curl_close($c);
      return $file;
    }
    else {
      die('Error');
    }
  }
  
  // CSS-Dateien zusammenfassen
  $content = get_remote_file('www.webdesign-klamonfra.de/css/reset.css');
  $content .= get_remote_file('www.webdesign-klamonfra.de/css/style.css');
  $content .= get_remote_file('www.webdesign-klamonfra.de/css/hinweis.css');
  $content .= get_remote_file('www.webdesign-klamonfra.de/css/print.css');
  $content .= get_remote_file('.../css/codeschnipsel.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);
  
  // Ausgabe der zusammengefassten CSS-Datei
  echo $content;
  
  // Leert den Ausgabe-Puffer und deaktiviert die Ausgabe-Pufferung
  ob_end_flush();
?>

Damit werden nun nicht mehr alle CSS (Cascading Style Sheet)-Dateien einzeln in der Webseite eingebunden, sondern es wird nur noch das php-Script (Skriptsprache: Hypertext Preprocessor), welches die CSS (Cascading Style Sheet)-Dateien zusammenführt, in den head-Bereich der Webseite eingebunden.

<link rel="stylesheet" type="text/css" 
  href="globales/css_codeschnipsel.php" />

Für diese Seite wird aus 5 HTTP-Request (Hypertext Transfer Protocol Anforderung) für die einzelnen CSS (Cascading Style Sheet)-Dateien nur noch 1 HTTP-Request (Hypertext Transfer Protocol Anforderung) für den Aufruf der Datei "css_codeschnipsel.php" und die Größe ist um 200 Byte verringert worden.


Aber leider gibt es eine kleine Einschränkung!

Bei der animierten Überschrift auf der Startseite von "webdesign klamonfra" oder beim Artikel über die animierte Überschrift benutze ich die Schriftart "Tangerine" und diese muss separat im Kopfbereich der jeweiligen Seite aufgerufen werden, da ansonsten der Internet Explorer 10 und 11 nicht mitspielen und die Schriftart nicht anzeigen.

Zum Seitenanfang springen Λ