Как сделать минификацию HTML и CSS на WordPress-сайте

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

Один из наиболее простых и эффективных способов ускорить сайт — это минификация HTML WordPress. Поговорим о ней в этой статье.

Минификация HTML WordPress простыми словами

При написании HTML и других файлов веб-разработчики стараются соблюдать стандарты оформления кода. Такие правила придуманы для того, чтобы код выглядел структурированно и понятно. Для этого у программистов принято каждую новую команду или инструкцию писать с новой строки. Чтобы в следующий раз, когда сам разработчик откроет листинг, он легко смог разобраться в собственном коде. А еще для того, чтобы другие кодеры тоже быстро сообразили, что к чему.

Если какой-либо из этих элементов не умещается на одной строке и его нужно перенести на другую, во всех последующих строках разработчик делает отступ для наглядности. Логически связанные куски кода снабжает комментариями, чтобы было понятно, к какой операции относится эта часть программы.

Код до минификации:

Код после минификации:

Все это служит только для удобства последующей разработки. Код, написанный в одну строку, практически невозможно разобрать и поправить в случае необходимости. Однако для корректного отображения страницы в браузере абсолютно не важно, соблюдаются стандарты кодирования или нет.

В завершение работы с HTML и CSS файлами и перед отправкой на сервер можно удалить из них все это оформление, включая пробелы, отступы и комментарии. Эта операция удаления всего лишнего называется минификацией. Для чего она служит, рассмотрим далее.

Для чего нужно сжатие HTML и CSS на сайтах WordPress

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

Поисковики тоже не любят медленные сайты. Они постоянно отслеживают скорость загрузки разных страниц одного и того же веб-ресурса. И если этот показатель становится критически низким, то сайт уходит вниз в поисковой выдаче, уступая место конкурентам.

Одним из способов уменьшить время загрузки веб-страниц является минификация HTML и CSS файлов. После сжатия размер страницы может сократиться в два раза и больше.

Чем минификация HTML и CSS отличается от GZIP сжатия

При минификации сжатие достигается путем удаления комментариев, пробелов, отступов и пустых строк в файлах HTML и CSS.

Технология GZIP работает немного по-другому. Файлы хранятся на сервере в несжатом виде. Сжатие производится непосредственно перед их передачей от сервера в браузер. А после того, как файлы попадают на устройство пользователя, они распаковываются обратно для корректного отображения в браузере.

Три способа уменьшить вес кода HTML

Провести минификацию WordPress можно одним из трех способов. Но у каждого варианта есть свои плюсы и минусы.

• Изначально писать весь код в одну строку. Писать HTML-теги в одну строку крайне неудобно. Код получается неразборчивый. Если вдруг потребуется открыть листинг и что-то в нем поправить, понять, что было написано ранее, очень трудно. Иными словами, это крайне неудобный способ, в применении которого нет никакого смысла.
• С помощью онлайн-сервисов или программ сжать файлы перед тем, как выложить на сервер. При использовании второго метода код остается разборчивым и удобным для редактирования до тех пор, пока не окажется на сервере. При необходимости внесения изменений прямо на сервере программист столкнется с проблемой. Листинг будет совершенно неразборчивым, как и в первом случае.

• Воспользоваться одним из специальных плагинов для WordPress. Наиболее эффективный метод, который экономит время, уменьшает размер файла и одновременно сохраняет его в удобном для редактирования виде — это использование специальных плагинов WordPress для сжатия.

Как сделать минификацию HTML и CSS плагинами

В репозитории WordPress встречается два вида модулей для минификации. Одни из них представляют собой многофункциональные комбайны с множеством настроек для поисковой оптимизации веб-ресурса.

А другие имеют ограниченный функционал и предназначены только для одной цели — сжатия HTML-кода.

Премиум-решение Clearfy Pro

Clearfy Pro — мощный плагин для WordPress, обладающий большим количеством настроек для ускорения и оптимизации работы сайта.

Сделать минификацию HTML-кода с его помощью можно буквально в один клик. Для этого потребуется перейти во вкладку «Код» пункта меню «Clearfy Pro» в админке сайта WordPress и передвинуть всего лишь один ползунок.

У этого модуля WordPress только один недостаток — необходимость покупки платной версии. Однако вложения быстро окупятся его несомненными достоинствами, среди которых можно выделить следующие:

-15% на лицензию Clearfy Pro

Бесплатный плагин Autoptimize

В отличие от предыдущего решения, плагином Autoptimize можно пользоваться бесплатно.

Чтобы сделать минификацию HTML-кода, нужно зайти в настройки плагина и поставить галочку напротив соответствующего пункта. В качестве дополнительной опции он также позволяет убрать HTML-разметку комментариев.

Простой и понятный WE — Minify HTML

WE — Minify HTML — маленький плагин, который достаточно просто установить и активировать. Никакие другие манипуляции не потребуются.

Огорчает, что у него нет никаких настроек. Невозможно при желании выбрать только сжатие HTML без минификации CSS.

WP Super Minify

WP Super Minify позволяет минимизировать как файлы HTML, так и изображения. Достоинством модуля является его легкость. Установка практически не скажется на работе сервера.

К сожалению, как и в предыдущем случае, невозможно выбрать, какие опции хотим отключить, а какие — оставить.

Minify HTML

А вот этот небольшой бесплатный модуль Minify HTML порадовал гибкостью настроек.

Fast Velocity Minify

Fast Velocity Minify — минималистичный модуль WordPress для сжатия HTML, CSS и JS. Не требует дополнительных настроек. Для использования нужно только установить и активировать.

Используем плагины кэширования для HTML-компрессии

Для минификации HTML можно также использовать модули кэширования ВордПресс. Во многие из них встроена соответствующая функция.

W3 Total Cache

В W3 Total Cache опцию сжатия можно отыскать в основных настройках плагина.

Для ее применения потребуется установить галочку напротив пункта Minify и сохранить изменения.

WP Rocket

WP Rocket — это мощный модуль WordPress, который включает не только функционал для кэширования. Он также позволяет оптимизировать код HTML путем задействования настройки сжатия.

Но чтобы воспользоваться всеми доступными опциями, придется купить лицензию.

WP Fastest Cache

В WP Fastest Cache минификация HTML доступна в бесплатной версии. Сжатием JS файлов можно воспользоваться только при условии приобретения платного пакета.

Сжатие html с помощью хука

Минификацию HTML в WordPress можно выполнить и без плагинов. Для этого потребуется вставить небольшой код в файлы темы.

Сначала рекомендую установить бесплатный плагин ProFunction. Он позволяет вносить все правки, которые раньше вы бы делали через файл functions.php основной или дочерней темы.

После установки и активации ProFunction потребуется перейти в редактор плагинов. Затем в поле «Выберите плагин для изменения» найти ProFunction и добавить в него следующий код:

function minify_html($buffer) {
$buffer = preg_replace(
array(
'/\>[^\S ]+/s',
'/[^\S ]+\</s',
'/(\s)+/s',
'/<!--(?![^<]*noindex)(.*?)-->/'
),
array(
'>',
'<',
'\\1',
''
),
$buffer
);
return $buffer;
}
if(!is_admin() && !is_feed()) {
ob_start("minify_html");
}

Как проверить, что сжатие HTML сработало

После всех манипуляций по минификации рекомендую походить по страницам и проверить работоспособность сайта. Если что-то сломалось, придется отменить всю проделанную работу и попробовать другой способ.

Чтобы проверить, сработала ли минификация, перейдите на любую страницу сайта, щелкните правой кнопкой мыши и выберите «Исходный текст страницы». Весь код HTML должен отобразиться в одну строку.

Из всех перечисленных способов сжатия кода и ускорения загрузки сайта наиболее эффективный — установка и настройка модуля Clearfy Pro. Он решает проблему медленной скорости в комплексе. Помимо этого, позволяет в пару кликов произвести важные настройки технической и поисковой оптимизации, о которых многие забывают.

Clearfy со скидкой

Как понять, что вам нужны и другие опции этого плагина? В пару кликов сделайте анализ своего сайта на WPAudit.ru.