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

минификация html WordPress
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

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

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

Пример неминифицированного кода

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

Пример минифицированного кода

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расширение Clearfy Pro для минификации

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

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

Минификация с помощью Clearfy Pro

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

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

Возможность ускорить код, минифицировав файлы HTML, CSS и JS.
Удаление мусора: отключение эмодзи, RSS-лент, jQuery Migrate и другого функционала, который не используется и засоряет код.
Профессиональная SEO оптимизация: генерация правильного файла robots.txt, автоматическое подключение атрибута alt к каждой картинке, подстановка заголовков Last Modified и многое другое.
Защитные функции: сокрытие url-админки, ограничение на количество введенных неправильно паролей (обезопасит от брутфорса), черные и белые списки IP-адресов и пр.

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

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

Autoptimize расширение для WP

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

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

Многие активные пользователи Wordress утверждают, что Autoptimize может конфликтовать с другими модулями. Поэтому не рекомендую устанавливать этот плагин.

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

Модуль WE — Minify HTML

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

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

WP Super Minify

WP Super Minify WordPress

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

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

Minify HTML

Minify HTML бесплатное расширение

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

Вы можете по желанию сжать код HTML, JS или CSS, удалить разметку у комментариев или воспользоваться другими полезными опциями.

Fast Velocity Minify

Расширение Fast Velocity Minify

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

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

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

W3 Total Cache

w3 total cache модуль

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

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

WP Rocket

WP Rocket расширение

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

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

WP Fastest Cache

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.

Создай свой первый сайт на WordPress

Александр

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

Оцените автора
Добавить комментарий

×
Обнови свой WordPress!

Держи скидку 15% на премиум тему Reboot

Купить со скидкой ⋙