Минимизация CSS- и JS-файлов и HTML-кода на сайте
Одним из пунктов оптимизации сайта является минимизация кода, который передается браузеру посетителя в момент открытия сайта. Сюда относится как содержимое CSS-файлов и JS-файлов, так и HTML-код страниц. Данные меры позволяют заметно сократить размер итогового кода и немного ускорить загрузку сайта.
Минимизация происходит за счет удаления лишних пробелов, табуляции и пустых строк. Расскажу, каким образом я делаю это на своих сайтах.
Минимизация HTML-кода
Загляните в исходный код этого блога, чтобы посмотреть, как это будет выглядеть в результате. Как видите, почти весь код страницы не отформатирован и “собран в кучу” (о том, почему “почти”, будет сказано ниже).
Реализуется это с помощью двух небольших вставок PHP-кода, в котором используются регулярные выражения.
Первую часть необходимо вставить в самое начало исходного кода вашего сайта (т.е. прямо перед <!DOCTYPE ...>
):
<?php
/*
* HTML-минимизация
*/
ob_start();
?>
А вторую часть, напротив, необходимо вставить в самый конец исходного кода сайта, т.е. после тега </html>
:
<?php
/*
* HTML-минимизация
*/
$out = ob_get_clean();
$out = preg_replace('/(?![^<]*<\/pre>)[\n\r\t]+/', "\n", $out);
$out = preg_replace('/ {2,}/', ' ', $out);
$out = preg_replace('/>[\n]+/', '>', $out);
echo $out;
?>
При этом содержимое тега pre
добавлено в исключение, т.е. не минимизируется, это необходимо для правильного отображения примеров кода.
К сожалению, я далеко не специалист в регулярных выражениях, поэтому в данном моем решении присутствует недостаток – JS-код и CSS-код, который вставлен соответственно в тегах <script></script>
и <style></style>
, остается не минимизированным (можете увидеть это в исходнике страниц блога). Кроме того, касательно минимизации такого JS-кода есть свои особенности, поэтому я не стал рисковать.
Буду рад, если кто-то в комментариях подскажет, как грамотно устранить данный недостаток, не ломая при этом работоспособность скриптов.
Минимизация CSS-файлов и JS-файлов
Для этого я использую замечательный бесплатный инструмент Minify. Это PHP-приложение, которое кладется в отдельную папочку на сайте и через которое пропускаются все необходимые файлы.
Можно минимизировать как отдельные файлы, так и сгруппировать несколько файлов в один, тем самым сократив количество запросов к серверу.
Подключается он просто:
- Копируем папку
/min/
в корень своего сайта. - Открываем файл
/min/config.php
в текстовом редакторе и в строке$min_enableBuilder = false;
меняемfalse
наtrue
. - Заходим по адресу
http://ваш_сайт/min/builder/
и вводим логин и парольadmin
. Откроется инструмент для получения ссылок на файлы, пропущенные через минимизатор. - Указываем относительные пути до нужных файлов, нажимаем “Update” и получаем ссылки на минимизированные версии.
- После того, как получили все необходимые ссылки, лучше закрыть доступ к билдеру. Для этого в
config.php
обратно меняемtrue
наfalse
в строке$min_enableBuilder = true;
.
Если у вас несколько файлов одного типа, то рекомендую воспользоваться группировкой (для этого редактируется файл /min/groupsConfig.php
). В билдере, да и в самом этом файле показаны примеры, как объединить несколько CSS- или JS-файлов.
Кстати, даже если у вас всего один файл, и вы хотите при минимизации сократить путь до него, тогда тоже можно использовать группировку.
К примеру, на этом блоге я сделал так:
- Исходный файл –
https://dimox.name/wp-content/themes/dimox.name/style.css
- Группировка в groupsConfig.php:
return array( 'style.css' => array('//wp-content/themes/dimox.name/style.css'), );
- Результат –
https://dimox.name/min/g=style.css
Есть еще одна особенность Minify, которая кому-то может понадобиться. На некоторых серверах для корректной работы минимизатора необходимо в файле .htaccess
(который в папке /min/
) убрать знак #
в строке #RewriteBase /min
. Я однажды столкнулся с этим при переносе сайта на другой хостинг, и данная правка мне помогла.
На этом все, спасибо за внимание. Надеюсь, эта информация окажется для вас полезной.
Комментарии (19)
Отличная тема с Minify, никак руки не доходили разобраться с ним… Он кеширует минимизированные файлы или каждый раз заново чистит?
Да, он их кэширует.
Остановился на плагине WP Minify Fix. Также есть хороший плагин Autoptimize, но в кеш maxcache оптимизированные страницы не попадают, пришлось отказаться от него (.
Когда-то с интересом следил за развитием сервиса webo.in где тогда тестировалась работа его скриптов. Там тогда разбирались что облегчать )) пробелы, лишние теги, создание спрайтов для вёрстки. С вводом платной версии стало неинтересно ))
Любопытное решение в плане отстранённости от движка.
Что-то подобное как раз просится для реализации на getsimple
По-моему, это экономия на спичках. Ну удалишь ты все пробелы и т.п., так это всего на несколько килобайт уменьшит страницу, а не в 2-3-5 раз, что не скажется критично на скорости загрузки даже на диалапе, которого ни у кого уже практически нет давно.
Сжатие яваскприта часто в разы уменьшает вес файла, посмотрите на примере jquery, например: скриншот
А обычно разных скриптов подключается по несколько штук..
я особо бы ob_start() не увлекался, сайт в таком режиме ест раза в 2 больше памяти сервера, для какой-то мелочи еще можно, но не на весь сайт
Крутяк, спасибо за статью!)
Здравствуйте. На ГитХабе обнаружил ссылку http://wordpress.org/plugins/bwp-minify/ Надо полагать автор библиотеки реализовал ее в виде плагина для ВордПресс? Кто нибудь применял?
По сути этот то же самое, только больше автоматизации. Я пока не юзал.
Плагин очень хороший – рекомендую!
Спасибо за наводку на minify, действительно все предельно просто и главное работает
Одно слово grunt
Gulp теперь в тренде и больше возможностей у него. Ну и коммьюнити больше тоже.
Вот как раз сейчас занимаюсь оптимизацией сайта – статья оказалась очень полезной! спасибо!
Скачал последнюю версию Minify с сайта, распаковал в папку на сервере, но при заходе по ссылке со сжатой версией файла вылазит ошибка, а скрипт не загружается.
А W3 Total Cache почему не использовать?
Я один раз воспользовался Minify на одном из своих первых сайтов. Не знаю, может что-то не так сделал, но сайт у меня слег полностью. Вроде все делал по инструкции. Пришлось восстанавливать через резервную копию(((
Интересно, но сложно. А грузить сервер дополнительными скриптами совсем негоже… Есть вариант сжатия файла на локальном компьютере с последующей закачкой на сервер. Конечно, надо иметь у себя его нормальную копию (процесс сжатия необратим).
Делается это данной программой: https://erichware.com/inform/txt2lin.htm