Cжать код HTML в WordPress: проверенные три метода

Плагины для оптимизации кода

Хорошим тоном в HTML для оптимизации кода является минификация в WordPress. Данное направление применяется для уменьшения веса документа за счет удаления лишних переносов строк и пробелов. Процедура полностью безопасная, а для владельцев сайтов на вордпресс еще и легкая.

Как выглядит сжатый и полный HTML код WordPress

Чтобы показать различие, приведу в пример две конфигурации минифицированного и полного кода. Видим что различие на лицо.

Простой
Сжатый

Пути сжатия кода – плюсы и минусы каждого способа

Для уменьшения HTML есть три пути, которые определят по какому идти в оптимизации.

  • Писать код изначально в одну строку
  • Создать документ с логичной структурой, сжать онлайн и закачать на сервер
  • Для WordPress есть плагины, чтобы сжать HTML в браузере

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

Параметры / Способы123
Дальнейшая разработкаТрудно разобраться, продолжение работы другим специалистом затруднительна.Трудность в том что при каждом изменении файла нужно его сжать и снова загружать на сервер.Разработка в любое время не отнимет время на разбор, для админа будет показан читаемый код, для роботов и посетителей сжатый.
Удобство написанияТолько мазохисты пишут HTML в строку.Время на создание уходит столько же, но тратится на преобразование.Время на минификацию не тратится, все происходит автоматически.
Простота методаОчень сложно придерживаться такого написания и держать много информации в голове. Поиск ошибок займет много времени.Код править без проблем, но нужно каждый раз перезаписывать документы на сервере.В автоматическом преобразовании вы не участвуете в минификации.

Автоматический способ легче использовать, тем более на WordPress есть несколько хороших решений. Если не любите читать, то вот авторская видео–инструкция.

Автоматический метод минификации HTML в WordPress

Отличным способом будет установка плагинов WordPress, чтобы сжать разметку. Данный подход не нагрузит базу данных и создаст максимально короткую запись HTML. Для достижения цели возьму Clearfy PRO.

Включаем бегунок и минифицируем html
Включаем

Заходим в раздел КОД, внизу переключаем кнопку в зеленую зону и сохраняем изменения. После код сайта станет полностью сжатым.

Clearfy PRO имеет много настроек и возможностей для улучшения показателей ресурса любого типа, а именно еще 49 пунктов. Для читателей WPtemplate выдам промо на 15%, нажимайте на кнопку скидка вычисляется автоматом.

Clearfy

В плагине Autoptimize

Не отступает от современных требований модуль Autoptimize. Не советую к применению такие комбайны, но вариантов мало, поэтому выведу все имеющиеся.

Отмечаем чекбокс в Autoptimize
Настройка в Autoptimize
  1. Переходим Настройки, находим одноименный раздел
  2. Открываем раздел JS,CSS
  3. Находим пункт «Параметры HTML»
  4. Отмечаем как минимум первый чекбокс, второй по желанию если не нужны комментарии в коде
  5. Внизу нажимаем сохранить настройки

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

Minify HTML

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

Minify по поиску в админке
Minify

Отмечу что Minify HTML не обновлялся два года, поэтому рекомендую следить за его работой при каждом обновлении WordPress.

Используем код в function.php

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

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

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");
}
Прописываем код в function.php
Вставляем функцию
  • Открываем Внешний вид — Редактор тем
  • Заходим в функции в правой колонке
  • В начало после <?php вставляем скопированное содержимое (не смотрите что он не полностью на скриншоте, ниже продолжается)
  • Нажимаем обновить

С помощью трех простых методов смогли минифицировать HTML код в WordPress, применяя нехитрые инструкции. Но рекомендую к применению Clearfy PRO он станет находкой в оптимизации вордпресс.

Лифанов Валентин

Делаю обзоры, создаю сайты на WordPress с 2008 года. Данный блог покажет плюсы и минусы любой темы и плагина, и даст полезные советы.

Оцените автора
Лучшие шаблоны и плагины для WordPress
Добавить комментарий