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

Author Роман Чернышов    Category CSS, PHP     Tags , , , Комментариев 6 Дата 13 Янв

css php Оптимизируем CSS: компрессия на PHPХочу поделиться с читателями моего блога, кое какими наработками, а так же идеями по уменьшению размера файлов стилей. Как известно порой в процессе разработки веб-приложений, много внимания уделяется его интерфейсу и дизайну, в результате получаются очень весомые файлы 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 пп

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

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...