HTML Minifier
Мгновенное сжатие HTML для production
Исходный HTML
Опции
Сжатый HTML
Обзор
HTML Minifier удаляет комментарии, схлопывает пробелы между тегами, удаляет необязательные структурные теги-обёртки и минифицирует инлайн CSS/JS, чтобы уменьшить вашу разметку для production — меньшие загрузки, более быстрый парсинг. Вставьте читаемый HTML и мгновенно получите компактный вывод с наглядным сравнением размера до и после.
Что контролирует этот минификатор
- •Схлопывание пробелов: несколько пробелов и переносов строк сокращаются до одного пробела, а пробелы между тегами удаляются полностью
- •Удаление комментариев: удаление HTML-комментариев (<!-- -->) из разметки
- •Удаление структурных тегов-обёрток: удаление тегов <html>, <head> и <body>, которые браузеры подразумевают автоматически
- •Минификация инлайн CSS: удаление комментариев и схлопывание пробелов внутри блоков <style>
- •Минификация инлайн JS: удаление комментариев // и /* */ и схлопывание пробелов внутри блоков <script>
- •Сравнение размера: исходный размер, минифицированный размер и процент уменьшения рядом друг с другом
Когда минифицировать HTML
- •Уменьшение статической страницы перед развёртыванием в production для сокращения размера полезной нагрузки и улучшения времени загрузки
- •Минификация email-шаблона или лендинга, где важен каждый байт HTML
- •Очистка production-вывода от генератора статических сайтов или фреймворка с серверным рендерингом перед отдачей
- •Создание компактного HTML для встраивания inline в шаблонный литерал JS или поле контента CMS
- •Сравнение количества байт до и после для проверки экономии полезной нагрузки страницы при аудите производительности
Как минифицировать HTML
- 1.Вставьте ваш HTML в редактор ввода или загрузите файл .html/.htm
- 2.Выберите, какие параметры минификации применить: комментарии, схлопывание пробелов, теги-обёртки, инлайн CSS/JS
- 3.Минифицированный вывод и процент уменьшения размера появляются автоматически
- 4.Скопируйте результат или скачайте его как файл .html
- 5.Проверьте количество байт до и после, чтобы подтвердить экономию размера перед развёртыванием
Особые случаи, о которых стоит знать
- •Удаление тегов <html>, <head> и <body> безопасно в большинстве браузеров, поскольку они подразумеваются автоматически, но удаляйте их только если вы контролируете весь конвейер доставки — некоторые строгие парсеры или этапы серверной обработки могут ожидать их наличия
- •Схлопывание пробелов между строчными элементами (например, двумя соседними тегами <span>) может изменить отображаемые отступы, поскольку пробел между строчными элементами визуально значим — проверьте отображаемый результат, если ваша вёрстка зависит от этого пробела
- •Минификация инлайн CSS/JS основана на регулярных выражениях, а не на полноценном парсере — она не обнаружит синтаксические ошибки CSS/JS и не переименовывает переменные и не сокращает селекторы
Ограничения
- •Это минификация пробелов/комментариев/тегов-обёрток, а не полное сжатие HTML — нет сокращения значений атрибутов, удаления избыточных атрибутов или оптимизации изображений/ассетов
- •Минификация инлайн CSS/JS намеренно консервативна — для максимального сжатия (сокращение селекторов, удаление мёртвого кода, минификация имён переменных) используйте специализированный инструмент вроде cssnano или Terser непосредственно на исходных файлах CSS/JS
- •Очень большие HTML-файлы могут медленно минифицироваться полностью в браузере — для production build-пайплайнов интегрируйте минификацию HTML в ваш инструмент сборки (например, html-minifier-terser), а не используйте разовый инструмент в браузере
Нужно конвертировать в обратную сторону?
Если у вас есть минифицированный или плохо отформатированный HTML, который нужно сделать читаемым для отладки или ревью, используйте вместо этого HTML Beautifier. Он переформатирует разметку с правильными отступами на основе вложенности тегов и проверяет структуру тегов по мере ввода.