Оптимизируем CSS: компрессия на PHP

Автор: Роман Чернышов    Опубликовано: 13 января 2011

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

В качестве оптимизации и уменьшения размера CSS файла, можно воспользоваться несколькими способами. Все они ориентированны на то, что файл CSS будет обрабатываться функциями PHP.

Первый способ.. Для начала нужно переименовать файл стилей из:
style.css в style.css.php
Затем в шаблоне вашего сайта заменить тег подключения стиля на следующий:

В самом же фале стилей (теперь он определяется веб-сервером как скрипт на PHP), нужно добавить следующие строки:
в начале файла

<link rel="stylesheet" type="text/css" href="/style.css.php" media="screen" />

в конце файла

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Этот способ архивирует весь CSS код и затем отдает браузеру, который в свою очередь его распаковывает и применяет к странице сайта. Размер передоверяемого фала в разы меньше, при передаче обычным способом.

Второй способ. Использование кеширования браузером. При данном подходе, файл стилей загрузившийся единожды в дальнейшем будет подгружаться уже напрямую из кеша браузера, тем самым значительно экономить время и трафик, а также нагрузку на сервер.

Так же переименовываем файл стилей (присваиваем ему расширение .php). В начале файла добавляем следующий код:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

И напоследок третий способ. Заключающийся в удалении из фалов стилей всех ненужных комментариев, знаков табуляции и ненужных пробелов. Тем самым оптимизируя подключаемый файл.

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
 /* удаляем комментарии */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
 /* удаляем табуляции , пробелы и прочий мусор. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
 
 /* ваш CSS файл */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
 
  ob_end_flush();
?>

В данном способе менять расширение у файла со стилями не нужно, достаточно лишь только в самом коде шаблона вашего сайта прописать следующие строки:

Разумеется все три способа оптимизации можно использовать одновременно. И тем самым значительно оптимизировать CSS файлы. При более творческом подходе можно еще много чего придумать, но это я оставлю вам, в качестве пищи для размышлений. А свои идеи и мысли можете описывать в комментариях.))

CSS, PHP     css, php, компрессия, оптимизация