CodeKitHubЧто это за инструмент?
Минификатор HTML удаляет всё, что браузеру не нужно для корректного отображения страницы: комментарии, лишние пробелы между тегами, избыточные атрибуты вроде type="text/javascript" и необязательные закрывающие слэши. В результате получается функционально идентичный HTML, который загружается и разбирается быстрее.
Этот инструмент построен на html-minifier-terser — том же минификаторе, что используется во многих популярных инструментах сборки, поэтому он понимает структуру HTML, а не слепо удаляет пробелы. Он не трогает чувствительное к форматированию содержимое внутри <pre>, <textarea> или встроенных блоков <script>/<style>, а также умеет минифицировать CSS и JS, встроенные в вашу разметку.
Зачем его использовать?
- Настоящий парсер, а не регулярные выражения — безопасен в сложных случаях вроде блоков <pre>, инлайн-скриптов и условных комментариев.
- Минифицирует также содержимое встроенных <style> и <script>, а не только окружающую разметку.
- Показывает точное количество сэкономленных байт перед публикацией файла.
- Режим форматирования превращает сжатый однострочный HTML обратно в нечто, что можно читать и редактировать.
- 100% локальная обработка — ваша разметка и любые приватные данные в ней никогда не покидают браузер.
Как использовать
- Вставьте свой HTML в поле ввода или нажмите «Загрузить пример», чтобы попробовать образец.
- Нажмите «Минифицировать», чтобы сжать код, или «Форматировать», чтобы привести его в порядок с отступом в 2 пробела.
- Проверьте сообщение под полями — режим минификации показывает уменьшение размера; если HTML не удаётся разобрать, вы увидите точную ошибку вместо сломанного результата.
- Нажмите «Копировать», чтобы получить результат.
Пример
Ввод
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- greeting -->
<p class="greeting">
Hello, world!
</p>
</body>
</html>Результат
<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>Комментарии, отступы и переносы строк удалены; doctype сокращён. Видимая страница отображается идентично.
Практические советы
- Минифицируйте непосредственно перед развёртыванием, а не во время разработки — храните читаемый HTML в системе контроля версий и минифицируйте только результат сборки.
- Если страница ведёт себя странно после минификации, проверьте, нет ли JavaScript, зависящего от точных пробелов внутри текстовых узлов (редко, но встречается в некоторых старых виджетах).
- Форматирование минифицированного HTML с боевого сайта — быстрый способ изучить его структуру перед написанием парсера или отладкой проблем с версткой.
- Комбинируйте с минификаторами CSS и JS ниже, если ваш процесс сборки хранит стили и скрипты в отдельных файлах.
Где это применяется в реальных рабочих процессах
Статические сайты, шаблоны писем и лендинги, созданные вручную, часто публикуются с теми же отступами и комментариями, что использовались при разработке. Минификация перед развёртыванием реально, пусть и скромно, сокращает объём передаваемых данных — а для HTML-писем количество символов иногда влияет на порог обрезки в Gmail, так что более компактная разметка даёт практическую пользу помимо скорости.
Режим форматирования не менее полезен и в обратную сторону: вставка минифицированной страницы из просмотра исходного кода и её переформатирование часто оказываются самым быстрым способом понять структуру лендинга конкурента или отладить сторонний виджет.
Типичные сценарии использования
- Сократить объём статического лендинга или шаблона письма перед публикацией.
- Переформатировать минифицированный HTML-фрагмент, полученный из просмотра исходного кода, чтобы понять его структуру.
- Очистить HTML, вставленный из WYSIWYG-редактора или экспорта CMS, который часто содержит избыточные пробелы.
- Быстро проверить корректность вручную написанного HTML-фрагмента, поскольку ошибка разбора отображается как понятное сообщение.
Часто задаваемые вопросы
Загружается ли мой HTML куда-либо?
Нет. И минификация, и форматирование выполняются локально в вашем браузере с помощью JavaScript. Всё, что вы вставляете, никогда не отправляется на сервер, поэтому инструмент безопасен для внутренних шаблонов или неопубликованных страниц.
Может ли минификация сломать мою страницу?
Не должна — инструмент использует настоящий HTML-парсер (html-minifier-terser), который понимает структуру тегов, поэтому сохраняет чувствительные к пробелам элементы вроде <pre> и <textarea> и не объединяет атрибуты некорректно. Тем не менее всегда стоит выборочно проверять важные страницы после минификации, особенно если они полагаются на нестандартные инлайн-скрипты.
Минифицируются ли также CSS и JavaScript внутри HTML?
Да. Встроенные блоки <style> и <script> минифицируются на месте с использованием тех же движков, что и в отдельных инструментах минификации CSS и JS, так что извлекать их вручную не нужно.
Насколько обычно уменьшается размер HTML?
Это зависит от того, сколько пробелов, комментариев и форматирования было в исходнике — вручную написанный HTML с большим количеством отступов и комментариев обычно сжимается на 20-40%. HTML, уже сгенерированный фреймворком и достаточно компактный, сэкономит меньше.
Могу ли я преобразовать минифицированный HTML обратно в читаемый формат?
Да — вставьте минифицированный HTML и нажмите «Форматировать» вместо «Минифицировать», чтобы получить обратно правильно отформатированную, читаемую разметку.