Оптимизируем 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”
Оставить комментарий
- Перенести ли домены с Рег.ру на Бегет? спросил (а) Виктор
- RuCaptcha bot и бан по IP спросил (а) Родмик
- MySQL запрос с несколькими JOIN спросил (а) Александр
- MySQL выбрать данные из двух таблиц спросил (а) Виталий
- Редирект при переносе сайта на WordPress спросил (а) Николай
- Интеграция сайта со СДЭК по API к записи
- Интеграция сайта со СДЭК по API к записи
- PHP. Кириллица в регулярных выражениях к записи
- Скрипт постраничной навигации (расширенная версия) к записи
- Прогон сайта по профилям, стоит ли? к записи
- Парсинг телефонов с Авито к записи
- Прогон сайта по профилям, стоит ли? к записи
Archive
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (37)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Март 2016 (1)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (42)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (8)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Регистрация программы для ЭВМ или базы данных в Роспатенте 27.12.2020
- Парсер для форума XenForo 22.12.2020
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей 18.12.2020
- PHP скрипт для проведения акций с призами на сайте(автоматизированный маркетинг) 16.12.2020
- Скрипт калькулятора емкости HDD для видеонаблюдения 03.12.2020


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