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

Author Автор: Роман Чернышов    Опубликовано: 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 файлы. При более творческом подходе можно еще много чего придумать, но это я оставлю вам, в качестве пищи для размышлений. А свои идеи и мысли можете описывать в комментариях.))

6 комментариев to “Оптимизируем CSS: компрессия на PHP”

  • staiki 30.05.2011 в 11:15 дп

    Огромнейшее СПАСИБО за скрипты!Всё сделал как в рекомендации и о чудо-было 52 ошибки по валидации в CSS а стало 1!СУПЕР!РЕСПЕКТИЩЕ!Делал на phph bb3-не ожидал если честно.Я вэтих делах ноль полный-но вот решил попробовать и всё получилось!Спасибо ещё раз!Ваш сайт в закладках!)))

  • staiki 30.05.2011 в 11:28 дп

    Извиняюсь за дабл и может не в тему-нет ли подобной процедуры копрессии или оптимизации HTML-шаблона?Валидатор выводит 132 ошибки и как исправить-х.з…Может подскажете как и что проделать?

  • staiki 31.05.2011 в 11:53 дп

    А где сама статья?Что-то у меня не отображается..-только комменты..

  • Роман Чернышов 31.05.2011 в 1:12 пп

    Парсер вордпресса статью обрезал, сайчас все исправил. Благодарю за замечание.

  • VitCOM 03.02.2013 в 5:59 дп

    вместо инклюдов
    ————————————-
    $arr = glob(‘*.css’);

    foreach($arr AS &$cssfile){
    $content[] = file_get_contents($cssfile);
    }
    echo implode(», $content);
    ————————————-

  • RuTest 30.12.2013 в 7:10 пп

    При использовании данных способов — страница отображается только после загрузки, тем самым блокирует отображение контента.

Оставить комментарий на staiki

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка