Минимизация 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-приложение, которое кладется в отдельную папочку на сайте и через которое пропускаются все необходимые файлы.

Можно минимизировать как отдельные файлы, так и сгруппировать несколько файлов в один, тем самым сократив количество запросов к серверу.

Подключается он просто:

1. Копируем папку /min/ в корень своего сайта.
2. Открываем файл /min/config.php в текстовом редакторе и в строке $min_enableBuilder = false; меняем false на true.
3. Заходим по адресу http://ваш_сайт/min/builder/ и вводим логин и пароль admin. Откроется инструмент для получения ссылок на файлы, пропущенные через минимизатор.
4. Указываем относительные пути до нужных файлов, нажимаем “Update” и получаем ссылки на минимизированные версии.
5. После того, как получили все необходимые ссылки, лучше закрыть доступ к билдеру. Для этого в config.php обратно меняем true на false в строке $min_enableBuilder = true;.

Если у вас несколько файлов одного типа, то рекомендую воспользоваться группировкой (для этого редактируется файл /min/groupsConfig.php). В билдере, да и в самом этом файле показаны примеры, как объединить несколько CSS- или JS-файлов.

Кстати, даже если у вас всего один файл, и вы хотите при минимизации сократить путь до него, тогда тоже можно использовать группировку.

К примеру, на этом блоге я сделал так:

• Исходный файл – http://dimox.name/wp-content/themes/dimox.name/style.css
• Группировка в groupsConfig.php:

  return array(
  	'style.css' => array('//wp-content/themes/dimox.name/style.css'),
  );
  

• Результат – http://dimox.name/min/g=style.css

Есть еще одна особенность Minify, которая кому-то может понадобиться. На некоторых серверах для корректной работы минимизатора необходимо в файле .htaccess (который в папке /min/) убрать знак # в строке #RewriteBase /min. Я однажды столкнулся с этим при переносе сайта на другой хостинг, и данная правка мне помогла.

На этом все, спасибо за внимание. Надеюсь, эта информация окажется для вас полезной.