Site icon Vavik96

Объединить внешние файлы CSS, чтобы уменьшить количество HTTP запросов

admin

Чем быстрей веб-страница, тем удобней она для пользователей. Таким образом, цель состоит в том, что бы при ​​оптимизации страниц: уменьшить количество «HTTP-Request», то есть запросов от браузера к веб-серверу! Например, если при загрузке страницы необходим файл CSS или JavaScript, отправляется запрос на веб-сервер и контент загружается. Это происходит в том случае, если содержимое не находится уже в кэше браузера пользователя.

Что можно сделать? Мы можем объединить все файлы в одном CSS вручную. Но это утомительно, запутанно и требует много усилий.

С небольшим PHP скриптом несколько файлов CSS будут автоматически объединены, и таким образом, снизят запросы к серверу. Кроме того, с помощью скрипта удаляются комментарии, пробелы и переводы строк, то есть происходит сжатие.
Большим преимуществом этого метода является то, что файл CSS остается читаемым для владельца сайта и поэтому может быть легко изменён.

<?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();
?>

Таким образом, теперь не все файлы CSS по отдельности интегрированы в веб-сайт, а только один php скрипт, который объединяет в себе все файлы стилей, встроенных в головной части страницы.

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

В этом примере остался только 1 HTTP запрос к файлу «css.php» и размер от пяти HTTP запросов для отдельных файлов CSS был снижен на 200 байт.

Но, к сожалению, есть небольшое ограничение!

В анимационном заголовке на домашней странице были использованы внешние шрифты, и это должно быть прописано отдельно в заголовке каждой страницы. В противном случае Internet Explorer 10 и 11 не видят шрифт.

Оригинал / Перевод

Exit mobile version