Как пользоваться: Минификатор HTML
- Вставьте HTML или откройте файл
.html. - Выберите, что удалить: пробелы, комментарии, атрибуты
typeпо умолчанию и избыточные значения булевых атрибутов. - Оставьте включённой минификацию встроенных CSS и JavaScript, чтобы уменьшить и блоки
<style>, и блоки<script>. - Скопируйте или скачайте минифицированный HTML и сравните размеры выше.
Что удаляет минификация HTML?
Написанный вручную и сгенерированный HTML содержит отступы, переводы строк и комментарии, которые браузер игнорирует. Их удаление уменьшает объём данных, которые браузеру нужно загрузить до начала отрисовки. Обычно экономия составляет 10–25 % от исходного HTML, а для шаблонов с глубокими отступами и длинными комментариями может быть больше.
| До | После |
|---|---|
<!-- nav --> | (удалено) |
<button disabled="disabled"> | <button disabled> |
<script type="text/javascript"> | <script> |
class=" card featured " | class="card featured" |
Отступы между элементами <li> | (удалено) |
Безопасная работа с пробелами
Пробелы в HTML не всегда лишние: пробел в <strong>Free</strong> plan разделяет два слова. Этот минификатор оставляет один пробел между строчными элементами и текстом, удаляет пробелы только вокруг блочных элементов, таких как div, p, li и section, и никогда не трогает содержимое <pre> и <textarea>, где пробелы являются частью содержимого.
Что сохраняется
- Условные комментарии (
<!--[if IE]>) и комментарии, начинающиеся с<!--!. - Кавычки в атрибутах: их удаление почти ничего не даёт и может сломать значения атрибутов с пробелами.
- Скрипты с типами, отличными от JavaScript, например шаблоны. JSON-LD минифицируется как JSON.
Минификация HTML в продакшене
Для сборочного конвейера используйте встроенный минификатор вашего фреймворка или html-minifier-terser. Для разовых страниц, email-шаблонов, встроек CMS и пользовательского кода в Webflow этот инструмент быстрее. После минификации убедитесь, что сервер тоже сжимает HTML: проверить это можно с помощью теста сжатия сайта. Чтобы снова сделать минифицированный HTML читаемым, используйте форматер HTML.
Также ищут как: минифицировать css js онлайн.
Инструменты, которые хорошо сочетаются с Минификатор HTML
- Минификатор JavaScript — Вставьте JavaScript и получите готовый к продакшену минифицированный код от Terser — того же движка, что используют Vite, webpack и Rollup, — с наглядным сравнением до и после и размерами в gzip.
- Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
- SVG Оптимизатор — Очистите SVG, экспортированные из Figma, Illustrator, Inkscape или Sketch, с помощью SVGO.
- Gzip сжатие и распаковка — Сжимайте текст или любой файл алгоритмами gzip, zlib или raw deflate, либо вставьте Base64 или откройте файл .gz, чтобы распаковать его.
Часто задаваемые вопросы
Улучшает ли минификация HTML SEO?
Может ли минификация сломать верстку?
Минифицирует ли он CSS и JavaScript внутри HTML?
<style> и атрибуты style минифицируются, а блоки <script> обрабатываются с помощью Terser. Если в скрипте синтаксическая ошибка, он остаётся без изменений.