Один из ключевых показателей сайта — скорость работы. Она зависит от разных факторов: сервера, выбранной CMS, количества и размера контента (текст, изображения) на конкретной странице и многих других. Есть много способов увеличить скорость загрузки страницы, и минификация при использовании CMS WordPress является одним из самых действенных.
В статье разберем, что такое минификация HTML WordPress-сайта, какой она может дать эффект, и каким способом ее провести самостоятельно без привлечения специалистов.
Минификация HTML – что это такое простыми словами
Любая страница в интернете — это HTML-документ, который считывается обработчиком (браузером, роботом поисковой системы и пр.). Размер документа тем больше, чем больше в нем данных. И в качестве данных засчитываются не только теги и другие части кода, но и пробелы или переносы строк.
Минификация HTML предполагает удаление всего лишнего из кода, чтобы оставить для прочтения только полезные данные.
Технология для CSS идейно ничем не отличается — это сокращение кода до одной строки с целью уменьшения итогового размера.
Исходя из логики процесса, разумно предположить несколько способов его исполнения в случае с ВордПресс-сайтом.
- Изначально писать минифицированный код. Учитывая, что сама CMS WordPress уже готова, и шаблоны к ней большинство вебмастеров покупают, а не создают с нуля, этот метод не подходит. В свою очередь, разработчики WP или отдельной темы не готовы писать код изначально минифицированным (в одну строку без переносов и пробелов) — это практически нереально с точки зрения удобства. Вносить изменения в такой код потом тоже будет крайне затруднительно.
- Иметь 2 версии кода — удобный для программистов и минифицированный для роботов. Рабочий, но неудобный вариант. После внесения исправлений в “обычный” код, его потребуется каждый раз сжимать онлайн при помощи специальных сервисов и грузить на сервер. Такой подход будет занимать много времени.
- Проводить сжатие при загрузке страницы, сохраняя исходный код в читаемом виде. Лучший вариант из трех, лишенный перечисленных выше минусов. Программист сможет читать и править все необходимое прямо в файлах сайта, а обработчики получат минимизированную быструю версию кода без “лишних” символов.
Третий вариант в WordPress можно реализовать несколькими способами, про которые речь пойдет ниже.
Не путайте процесс минификации с Gzip-сжатием. Они оба направлены на уменьшение итогового размера кода, но принцип работы Gzip в другом. При таком сжатии выявляются все повторяющиеся моменты в коде и сохраняется только один из них, а последующие заменяются указателями на сохраненный вариант.
Как сделать минификацию HTML и CSS плагинами
Самый простой способ минифицировать код сайта на WordPress — это использовать плагины. В репозитории ВордПресс не составит труда найти несколько десятков вариантов, которые справляются с такой задачей. Ниже рассмотрим некоторые из них.
Премиум-решение Clearfy Pro
Начну с варианта, который отсутствует в репозитории — это разработка Clearfy Pro от WPShop.
Команду изначально прославил шаблон Root, а Clearfy Pro стал еще одним их хитом. Данное решение является премиальным и хорошо себя зарекомендовавшим. Оно одновременно простое и функциональное, в том числе позволяет уменьшить размер ХТМЛ.
Сам процесс оптимизации выполняется с помощью модуля активацией одного переключателя и нажатием кнопки “Сохранить изменения”.
Если вы еще не знакомы с Clearfy Pro, то настоятельно рекомендую изучить его. С ним вебмастер может в несколько кликов улучшить работу своего сайта с точки зрения скорости загрузки, SEO-оптимизации, защиты, удобства для пользователей и многого другого.
Даю ссылку на официальный сайт разработчиков и скидку в 15% на само решение:
Избегайте бесплатную nulled-версию Clearfy Pro, которая способна привести к серьезным проблемам в работе сайта. Используйте только лицензионное ПО.
Бесплатный плагин Autoptimize
Знакомый многим Autoptimize тоже умеет минифицировать, но здесь эта опция называется “Оптимизировать код” (Optimize code). Установив его из репозитория WordPress, одной галочкой включите сжатие, а второй укажите, чтобы не удалялись комментарии.
Удаление комментариев может негативно сказаться на работе некоторых подключенных сервисов статистики, онлайн-чатов и других внешних инструментов.
Помимо HTML, при помощи данного модуля можно уменьшить CSS. Но здесь уже имеется немало опций, среди которых начинающему вебмастеру будет трудно разобраться.
Отмечу, что оптимизация CSS требуется далеко не на всех сайтах, важно смотреть на структуру подключения стилей.
Ставить Autoptimize только для минификации HTML не имеет никакого смысла — это слишком тяжелый и сложный плагин.
Я бы рекомендовал устанавливать его опытным вебмастерам на проекты со старыми перегруженными темами. Но использовать возможности Autoptimize следует с предельной осторожностью и пониманием, как при неисправности откатить сайт до рабочей версии.
Простой и понятный WE — Minify HTML
Два рассмотренных выше решения являются комплексными. Но нетрудно найти в репозитории WordPress и простые модули, которые созданы исключительно для минификации. Одним из таких является WE — Minify HTML.
Не перепутайте его с Minify HTML — про него я подробнее расскажу ниже.
Рассматриваемое решение настолько простое и минималистичное, что у него даже нет настроек. Его достаточно просто установить на сайт, после чего автоматически будет выполнена минификация. Но есть в этом и минус — он своей работой захватывает не только HTML-код, но и CSS, а также JS, что может приводить к ошибкам.
Убедиться, что данное ПО сделало свою работу, достаточно просто. Посмотрите исходный код любой страницы сайта с включенным плагином и с выключенным. Если он “собирается” в одну строку при включении WE — Minify HTML, значит — выполняет возложенные на него функции.
Если у вас стоит надстройка кэширования, не забудьте сбросить кэш после включения/отключения плагина.
WP Super Minify
Решение WP Super Minify выполняет компрессию CSS и JavaScript на WordPress, но не затрагивает 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” располагаются опции, которые позволят полностью отключить минификацию ХТМЛ или ее детально настроить.
Есть отдельные настройки и для стилей, в том числе возможность прописать конкретные файлы CSS, которые не будут подвержены оптимизации.
Не так давно в Fast Velocity Minify добавили русскоязычную локализацию, что позволило российским пользователям без знания английского языка использовать это решение для оптимизации сайта.
Плагины кэширования для HTML-компрессии
Зачастую вебмастеры устанавливают на WordPress-сайт плагины кэширования, которые позволяют ускорить работу ресурса у посетителей. Некоторые из этих плагинов содержат настройки для сжатия HTML. Если пользуетесь одним из таких, приводим инструкции, как включить минификацию.
W3 Total Cache
В панели администратора настройки W3 Total Cache находятся в разделе Perfomance. Перейдите в него и выберите подраздел “Минификация”. Здесь галочкой активируется функция сжатия HTML, а при необходимости задаются также параметры для CSS и JS.
Отмечу наличие поля “Игнорировать стебли комментариев”. Туда вводятся ключевые слова, которые W3 Total Cache будет искать внутри разметки. Если такие слова найдены, то комменты не будут стерты.
LiteSpeed Cache
LiteSpeed Cache позволяет минимизировать HTML, CSS и JS. У него достаточно понятная структура.
Чтобы в нем сжать страницы, зайдите в настройках в подраздел “Оптимизация страницы” и перейдите здесь в “Настройки HTML”.
Включите минификацию страницы и сохраните изменения. Аналогичным образом в других вкладках настраивается CSS, JavaScript.
WP Fastest Cache
Популярный вариант для кэширования WP Fastest Cache тоже имеет опцию минификации. В настройках самого инструмента достаточно отметить один чекбокс и нажать “Submit”.
Там же есть и соответствующая галочка для минификации CSS, но детальные настройки отсутствуют.
Сжатие HTML с помощью хука
Есть вариант вовсе не устанавливать плагины, если нужно выполнить только минификацию HTML. С этой задачей справится простой хук. Его можно добавить прямо в functions.php темы, но я рекомендую использовать ProFunctions, чтобы при обновлении темы или ее смене не потерять изменения.
Для уменьшения количества символов в коде с помощью хука, скачайте ProFunctions, установите модуль и активируйте его. Далее в редакторе плагинов выберите его и вставьте следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function minify_wpr($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_wpr"); } |
Вставив скрипт, обновите файл:
Минус данного способа в том, что затираются все переносы строк, пробелы, комментарии и прочее “лишнее”. В начале статьи я уже отмечал, что такой подход не всегда работает идеально, поскольку некоторые сторонние счетчики могут перестать работать после столь “жесткой” минификации.
Как проверить, что минимизация кода сработала
Есть несколько способов это сделать. Самый простой — использовать онлайн-сервисы, которые показывают размер страницы. При минификации HTML уменьшается размер страницы, то есть достаточно сравнить размер до и после, чтобы понять — сработало или нет.
Второй простой способ — это анализ самого кода. Откройте любую страницу на сайте и нажмите Ctrl+U. Если минификация не проводилась, то вы увидите примерно то, что показано на скриншоте ниже — код с большим количеством переносов строк и комментами в нем.
Если минификацию провести, то исходник станет более компактным и менее удобным для чтения, как это можно видеть на примере ниже.
Выводы
Провести минификацию HTML имеет смысл практически на любом сайте, чего не скажешь об уменьшении CSS и JS — с ними есть нюансы. Выполнить такие действия помогут разнообразные плагины, а выбор конкретного метода зависит от того, что предпочитает вебмастер.
Я бы рекомендовал не устанавливать отдельный плагин для минификации и использовать возможности одного из тех решений, которые уже применяются на сайте. Например, если используется плагин кэширования, то включайте соответствующую опцию в нем.
Лично я устанавливаю на каждый WordPress-сайт с нуля Clearfy Pro и включаю минификацию именно в нем. Он имеет множество полезных опций и фактически обязателен сейчас для нормальной безопасной работы проекта.
К тому же, в нем нет никаких платных подписок — его достаточно один раз купить на сайте разработчиков, чтобы использовать на домене. При необходимости можно расширить лицензию на несколько доменов или купить неограниченную, что я давно и сделал.
Рекомендую не упустить возможность приобрести Clearfy Pro сейчас с приятной скидкой в 15% по промокоду: