Медленные сайты раздражают пользователей. Поисковики анализируют скорость загрузки и отображают веб-страницы с плохими показателями ниже конкурентов. Чтобы не терять трафик из поисковых систем и удерживать постоянных посетителей, нужно следить, чтобы скорость загрузки оставалась высокой.
Один из наиболее простых и эффективных способов ускорить сайт — это минификация HTML WordPress. Поговорим о ней в этой статье.
- Минификация HTML WordPress простыми словами
- Для чего нужно сжатие HTML и CSS на сайтах WordPress
- Чем минификация HTML и CSS отличается от GZIP сжатия
- Три способа уменьшить вес кода HTML
- Как сделать минификацию HTML и CSS плагинами
- Премиум-решение Clearfy Pro
- Бесплатный плагин Autoptimize
- Простой и понятный WE — Minify HTML
- WP Super Minify
- Minify HTML
- Fast Velocity Minify
- Используем плагины кэширования для HTML-компрессии
- W3 Total Cache
- WP Rocket
- WP Fastest Cache
- Сжатие html с помощью хука
- Как проверить, что сжатие HTML сработало
Минификация 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
Сделать минификацию HTML-кода с его помощью можно буквально в один клик. Для этого потребуется перейти во вкладку «Код» пункта меню «Clearfy Pro» в админке сайта WordPress и передвинуть всего лишь один ползунок.
После того, как вы включите минификацию HTML, рекомендую обратить внимание и на другие полезные опции премиального SEO-плагина. Они помогут значительно ускорить сайт, повысить другие SEO-показатели. В результате веб-ресурс взлетит в поисковых системах на несколько строчек вверх, а пользователи будут намного дольше задерживаться на сайте.
У этого модуля WordPress только один недостаток — необходимость покупки платной версии. Однако вложения быстро окупятся его несомненными достоинствами, среди которых можно выделить следующие:
-15% на лицензию Clearfy Pro
Бесплатный плагин Autoptimize
В отличие от предыдущего решения, плагином Autoptimize можно пользоваться бесплатно.
Чтобы сделать минификацию HTML-кода, нужно зайти в настройки плагина и поставить галочку напротив соответствующего пункта. В качестве дополнительной опции он также позволяет убрать HTML-разметку комментариев.
Многие активные пользователи Wordress утверждают, что Autoptimize может конфликтовать с другими модулями. Поэтому не рекомендую устанавливать этот плагин.
Простой и понятный WE — Minify HTML
Огорчает, что у него нет никаких настроек. Невозможно при желании выбрать только сжатие HTML без минификации CSS.
WP Super Minify
К сожалению, как и в предыдущем случае, невозможно выбрать, какие опции хотим отключить, а какие — оставить.
Minify HTML
А вот этот небольшой бесплатный модуль Minify HTML порадовал гибкостью настроек.
Вы можете по желанию сжать код HTML, JS или CSS, удалить разметку у комментариев или воспользоваться другими полезными опциями.
Fast Velocity Minify
Используем плагины кэширования для HTML-компрессии
Для минификации HTML можно также использовать модули кэширования ВордПресс. Во многие из них встроена соответствующая функция.
W3 Total Cache
В W3 Total Cache опцию сжатия можно отыскать в основных настройках плагина.
Для ее применения потребуется установить галочку напротив пункта Minify и сохранить изменения.
WP Rocket
Но чтобы воспользоваться всеми доступными опциями, придется купить лицензию.
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.
