Оптимизируем 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”
Оставить комментарий
-
Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
-
-
Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
-
-
с 2009 года по сегодняшний день, создано более 300 сайтов...
Огромнейшее СПАСИБО за скрипты!Всё сделал как в рекомендации и о чудо-было 52 ошибки по валидации в CSS а стало 1!СУПЕР!РЕСПЕКТИЩЕ!Делал на phph bb3-не ожидал если честно.Я вэтих делах ноль полный-но вот решил попробовать и всё получилось!Спасибо ещё раз!Ваш сайт в закладках!)))
Извиняюсь за дабл и может не в тему-нет ли подобной процедуры копрессии или оптимизации HTML-шаблона?Валидатор выводит 132 ошибки и как исправить-х.з…Может подскажете как и что проделать?
А где сама статья?Что-то у меня не отображается..-только комменты..
Парсер вордпресса статью обрезал, сайчас все исправил. Благодарю за замечание.
вместо инклюдов
————————————-
$arr = glob(‘*.css’);
foreach($arr AS &$cssfile){
$content[] = file_get_contents($cssfile);
}
echo implode(», $content);
————————————-
При использовании данных способов — страница отображается только после загрузки, тем самым блокирует отображение контента.