Скорость загрузки сайта является одним из основных параметров его эффективности. Этот показатель зависит от множества факторов, таких как сервер, система управления контентом (CMS), объем и тип размещенного на странице контента (тексты, изображения) и многих других нюансов. Существует множество способов, которые помогают ускорить загрузку страниц, среди которых минификация кода на платформе WordPress является очень эффективным.
В данном материале мы рассмотрим, что представляет собой минификация HTML на сайте WordPress, каковы её преимущества и как осуществить этот процесс самостоятельно без оказания помощи специалистов.
Минификация HTML – что это такое простыми словами
Каждая веб-страница представляет собой HTML-документ, который воспринимается браузером, поисковыми роботами и другими обработчиками. Вес документа пропорционален количеству данных, которые он содержит. При этом данными считаются не только теги и ключевые элементы кода, но и пробелы, переносы строк и др.
Минификация HTML подразумевает удаление излишних элементов из кода, оставляя только ценные данные для обработки.
Процесс минификации для CSS аналогичен — сведение кода к одной строке с целью снижения его общего размера.
Основываясь на логике данной практики, можно выделить несколько подходов к её реализации для WordPress-сайтов.
- Первый вариант — это написание минимизированного кода изначально. Однако учитывая, что большинство вебмастеров выбирают готовые шаблоны для WordPress, этот метод не всегда применим. Кроме того, написать код в одной строке с сохранением удобства редактирования очень сложно — это просто непрактично.
- Второй подход заключается в наличии двух версий кода: одной — удобной для разработчиков, и другой — минимизированной для автоматических обработчиков. Этот способ рабочий, но требует много времени на регулярное сжатие «обычного» кода через специализированные сервисы перед загрузкой на сервер.
- Третий вариант — сжатие в процессе загрузки страницы с сохранением исходного кода в формате, удобном для чтения. Это наиболее оптимальный и эффективный способ, устраняющий недостатки двух предыдущих вариантов. Программист сможет легко вносить изменения в код, а обработчикам будет предоставляться минимизированная версия без избыточных символов.
Третий вариант может быть реализован в WordPress различными способами, которые будут рассмотрены далее.
Важно различать минификацию и Gzip-сжатие. Оба процесса направлены на уменьшение объема кода, но Gzip работает иначе: он находит повторяющиеся участки кода и сохраняет один, заменяя остальные указателями на этот сохранённый элемент.
Как сделать минификацию HTML и CSS плагинами
Наиболее простым способом минификации кода на сайте WordPress является использование плагинов. В репозитории WordPress можно найти множество бесплатных и платных вариантов, которые занимаются данной задачей. Рассмотрим некоторые из них подробнее.
Премиум-решение Clearfy Pro
Первое решение — это Clearfy Pro от WPShop, которое нельзя найти в стандартном репозитории.
Команда, разработавшая данный плагин, получила признание благодаря шаблону Root, а Clearfy Pro стал новым успешным продуктом. Этот плагин является платным и одновременно очень функциональным, включая возможность уменьшить размер HTML-кода.
Оптимизация происходит через активацию модуля с помощью одного переключателя и нажатия кнопки «Сохранить изменения».
Что мне нравится в этом решении:
Сам плагин полностью на русском языке и содержит объяснения каждой из опций, включая минификацию.
Разработчики сообщают, что они сокращают только HTML-код, оставляя комментарии, условные теги для Internet Explorer и пробелы в JavaScript. Подобный подход минимизирует риски возникновения проблем с функционированием сайта.
Существует возможность добавления комментария dont minify, чтобы исключить определённые участки из минификации.
Этот инструмент является комплексным, и его установка практически необходима для любого WordPress-сайта, что устраняет необходимость установки отдельного плагина для минификации.
Если вы ещё не знакомы с Clearfy Pro, настоятельно рекомендую его изучить. С его помощью вебмастера могут всего за несколько кликов значительно улучшить работу сайта с точки зрения скорости загрузки, SEO-оптимизации, обеспечения безопасности и удобства для пользователей.
Вставляю ссылку на официальный сайт разработчиков с 10% скидкой на это решение:
Clearfy Pro со скидкой 10%
Избегайте бесплатной версии Clearfy Pro, так как она может вызвать серьёзные проблемы на вашем сайте. Пользуйтесь только лицензионными продуктами.
Бесплатный плагин Autoptimize
Известный многим Autoptimize тоже предоставляет возможность минификации, однако в данном плагине эта функция обозначена как «Оптимизировать код» (Optimize code). Установив его из репозитория WordPress, активируйте опцию сжатия с помощью одного переключателя, а также выберите второй параметр для сохранения комментариев.
Удаление комментариев может негативно сказаться на работе некоторых подключённых сервисов, таких как статистические системы или онлайн-чаты.
Кроме HTML, данный модуль позволяет снизить размер CSS, но тут имеется множество опций, с которыми новичку может быть трудно разобраться.
Следует отметить, что не все сайты нуждаются в оптимизации CSS, поэтому важно учитывать структуру подключения стилей.
Преимущества Autoptimize:
Он доступен бесплатно в репозитории.
Хорошо подходит для опытных вебмастеров, которые осведомлены о том, как улучшить производительность сайта на WordPress, используя доступные инструменты.
Также включает функции кэширования.
Недостатки Autoptimize:
Документация предоставлена только на английском языке.
Существует высокая вероятность возникновения критических ошибок на сайте при неправильном выборе параметров для неопытного пользователя.
Изучение индивидуальных особенностей каждой опции занимает времени, и порой требуется пробный опыт, чтобы найти оптимальные сценарии для определённого сайта.
Устанавливать Autoptimize лишь для минификации HTML нет смысла — это слишком сложный и тяжёлый плагин.
Я рекомендую использовать его опытным вебмастерам на проектах с устаревшими и перегруженными темами, но с предельной осторожностью, понимая, как при необходимости вернуться к рабочей версии сайта.
Простой и удобный WE — Minify HTML
Ранее рассмотренные варианты являются комплексными решениями. Однако в репозитории WordPress также можно найти простые модули, созданные исключительно для минификации. Одним из них является WE — Minify HTML.
Не путайте его с Minify HTML — о котором я расскажу позже.
Данное решение является поистине простым и минималистичным, у него нет настроек. Достаточно установить его на сайт, чтобы минификация производилась автоматически. Однако это также имеет свои недостатки; он охватывает не только HTML-код, но и CSS, а также JavaScript, что может вызвать некоторые ошибки.
Проверить его работу можно простым способом: посмотрите исходный код страницы вашего сайта с установленным и отключённым плагином. Если код сгруппировывается в одну строку при активном WE — Minify HTML, значит, он выполняет свою основную функцию.
Если у вас установлен плагин для кэширования, не забудьте обновить кэш после установки или отключения этого плагина.
WP Super Minify
WP Super Minify отвечает за компрессию CSS и JavaScript, но не затрагивает HTML. После установки плагина в админской панели WordPress в разделе «Инструменты» появляются две опции, состоящие из простых чекбоксов.
Использовать WP Super Minify разумно лишь в особых случаях, когда требуется простое и быстрое решение для сжатия CSS или JavaScript, не затрагивая HTML-код.
Minify HTML
Этот инструмент представляет собой среднее решение между двумя предыдущими вариантами.
После установки в меню «Настройки» добавляется пункт Minify HTML. Здесь можно активировать базовые функции минификации с помощью одного переключателя и указать, какие элементы кода необходимо оставить или удалить, например, комментарии или XHTML-теги и т.д.
Модуль предоставляет меньше возможностей по сравнению с Autoptimize. Для пользователей, говорящих на русском языке, может быть неудобным отсутствие русскоязычной документации, а также то, что интерфейс выполнен на английском языке.
Fast Velocity Minify
Fast Velocity Minify можно легко установить через репозиторий WordPress, и он начинает свою работу сразу после активации. Данный плагин автоматически сокращает размеры HTML и CSS, в то же время предлагая настройки для более детального управления параметрами.
В разделе “Настройки” — “Fast Velocity Minify” можно найти опции, которые позволят либо полностью отключить минификацию HTML, либо настроить её на более тонком уровне.
Существуют также отдельные настройки для CSS, включая возможность указать определённые CSS-файлы, которые не будут подвергаться минификации.
Новая русскоязычная локализация, добавленная в Fast Velocity Minify, позволяет пользователям из России без знания английского языка эффективно использовать этот инструмент для оптимизации своих сайтов.
Плагины кэширования для HTML-компрессии
Часто владельцы сайтов на WordPress устанавливают плагины для кэширования, которые помогают ускорить загрузку страниц для посетителей. Некоторые из этих плагинов также включают функции сжатия HTML. Если вы уже пользуетесь одним из них, ниже приведены инструкции по активации минификации.
W3 Total Cache
В администраторской панели настройки W3 Total Cache размещаются в разделе Performance. Перейдите туда и выберите подкатегорию “Минификация”. Здесь можно активировать функцию сжатия HTML, а также, при необходимости, настроить параметры для CSS и JS.
Обратите внимание на наличие поля “Игнорировать стебли комментариев”, куда можно вводить ключевые слова, которые W3 Total Cache будет отслеживать в HTML-коде. Если такие слова обнаружены, комментарии останутся нетронутыми.
LiteSpeed Cache
LiteSpeed Cache предоставляет возможность сжимать HTML, CSS и JS, и его интерфейс достаточно интуитивно понятен.
Чтобы произвести минификацию, нужно перейти в настройки в раздел “Оптимизация страницы” и выбрать “Настройки HTML”.
Активируйте минификацию и сохраняйте изменения. Аналогично настраиваются параметры для CSS и JavaScript в других вкладках.
WP Fastest Cache
Популярный WP Fastest Cache для кэширования в WordPress также предлагает функцию минификации. В настройках достаточно поставить галочку и нажать “Submit”.
Для минификации CSS также предусмотрена соответствующая опция, однако детализированные настройки отсутствуют.
Сжатие HTML с помощью хука
Существует возможность не устанавливать плагины, если необходимо произвести лишь минификацию HTML. С этой задачей может справиться простой хук. Его можно добавить в файл functions.php вашей темы, но лучше использовать ProFunctions, чтобы изменения не были потеряны при обновлениях темы.
Чтобы сократить количество символов в коде с помощью этого хука, скачайте ProFunctions, установите модуль и активируйте его. Затем в редакторе плагинов выберите его и вставьте следующий код:
function minify_wpr ( $ buffer ) {
$ buffer = preg_replace ( /* регулярное выражение для минификации */ );
return $ buffer;
}
if ( ! is_admin ( ) && ! is_feed ( ) ) {
ob_start ( "minify_wpr" );
}
После вставки скрипта обновите файл. Недостатком данного метода является то, что он полностью удаляет все переносы строк, пробелы, комментарии и прочую “необходимую” информацию. Как уже упоминалось в начале статьи, данный подход не всегда дает идеальный результат, поскольку некоторые сторонние счетчики могут перестать функционировать после такой «жесткой» минификации.
Как проверить, что минимизация кода сработала
Существует несколько методов для проверки результатов. Наиболее простой вариант — это использование онлайн-сервисов, которые показывают размер страницы. При выполнении минификации HTML размер страницы уменьшается, поэтому достаточно сравнить его до и после, чтобы удостовериться в успешной оптимизации. Второй легкий способ — анализировать код. Откройте любую страницу вашего сайта и нажмите Ctrl+U. Если минификация не проводилась, вы увидите код с множеством переносов строк и комментариев, как на приведенном ниже экране. 
После минификации код станет более сжатым и трудным для восприятия, что можно увидеть на следующем примере. 
Выводы
Минификация HTML является актуальной для практически любого сайта, а вот для снижения объемов CSS и JS есть свои нюансы. Для выполнения этого можно воспользоваться различными плагинами, при этом выбор конкретного метода зависит от предпочтений вебмастера.
Рекомендую не устанавливать отдельный плагин для минификации, а использовать функционал уже установленных решений на сайте. Например, если у вас активен плагин кэширования, включите минификацию в его настройках.
Часто я применяю Clearfy Pro на всех новых сайтах на WordPress, включая минификацию именно в этом инструменте. Он предлагает множество полезных функций и фактически становится обязательным для стабильной и безопасной работы проекта. Более того, приобретение лицензии не требует никаких подписок — достаточно один раз купить его на сайте разработчиков для использования на одном домене. При необходимости лицензия может быть расширена на несколько доменов или приобретена неограниченная версия, что я делал в прошлом. Не упустите шанс приобретения Clearfy Pro с приятной скидкой в 10% по промокоду: Промик на Clearfy Pro