Минифицируйте HTML-код мгновенно, чтобы уменьшить размер файла и улучшить скорость загрузки сайта.
Введение
HTML, с которым вы работаете, и HTML, который уходит в браузер, вовсе не обязаны быть одним и тем же файлом. Пока страница собирается, отступы и переносы строк помогают видеть структуру, а комментарии в разметке поясняют разделы или оставляют заметки на будущее. Браузеру для правильного отображения ничего этого не нужно — ему достаточно корректных, хорошо оформленных тегов. Минификация убирает всё, что существует исключительно ради человека, и та же самая страница доезжает до браузера файлом поменьше.
Как этот инструмент минифицирует ваш HTML
- Все комментарии удаляются, без исключений. Вырезается каждый блок
<!-- ... -->, включая старые условные комментарии для Internet Explorer и любой комментарий, который вы, возможно, хотели сохранить, — скажем, лицензию или указание авторства. Здесь нет аналога пометки «этот оставить», которую поддерживает минификатор CSS на этом сайте: если комментарий важен, держите его в рабочей копии и не надейтесь, что он переживёт минификацию. - Содержимое внутри тегов
<pre>,<code>,<script>и<textarea>сохраняет пробелы в точности. Внутри этих тегов переносы и отступы несут смысл — пример кода или блок заранее отформатированного текста отобразился бы неправильно, если бы их схлопнули, — и этот инструмент их не трогает. - В остальных местах пробелы схлопываются, а не удаляются. Цепочка пробелов, табуляций или переносов между двумя строчными элементами (например, ссылкой внутри предложения) сжимается до одного пробела, а не исчезает совсем, чтобы соседние слова не слиплись. Полностью вычищаются пробелы только между структурными тегами верхнего уровня и внутри
<head>: там ничто и так не выводится как текст. - Завершающий слеш у самозакрывающихся тегов приводится к обычному виду.
<img src="photo.jpg" />превращается в<img src="photo.jpg">— оба варианта допустимы в HTML, а короткий экономит по паре символов на каждом таком теге.
Единственный настоящий риск: комментарии внутри форматированного текста
Комментарии удаляются первым проходом по всему вашему тексту, ещё до того как инструмент смотрит, внутри какого тега что находится. Поэтому он не отличит обычный комментарий, который и правда пора убрать, от буквального текста <!-- ... -->, который вы намеренно показываете внутри блока <pre> или <code> — например, в примере из учебного материала, объясняющем, как выглядит комментарий в HTML. В этом конкретном случае текст примера будет вырезан, хотя пробелы вокруг него в том же блоке сохранятся правильно. Это касается только текста, где буквально встречаются символы <!-- и --> внутри форматированного блока; обычные примеры кода, в которых синтаксиса комментариев нет, не затрагиваются.
Что знать перед минификацией
Инструмент меняет только оформление — он не переставляет элементы, не объединяет теги и ничего не выбрасывает из самой структуры страницы. Ограничения по объёму нет: вы работаете напрямую с текстом, а не загружаете файл, так что полный HTML страницы, даже длинной, вставляется и обрабатывается ровно так же, как короткий фрагмент.
Как и с любым минификатором, готовый результат стоит открыть в браузере до публикации — не потому, что преобразование ненадёжно, а потому, что убедиться в правильном виде и поведении страницы перед выкладкой попросту разумно, ровно как вычитать что угодно другое перед отправкой.
Когда этот инструмент к месту
- Подготовка страницы к публикации, когда правки закончены. Пока страница собирается, работайте с читаемой версией, а минифицируйте один раз, прямо перед выкладкой, — это не формат для работы.
- Снижение веса страницы на скромном хостинге или медленном канале. Файл поменьше скачивается быстрее, и в школьной сети или на мобильном интернете это заметнее, чем кажется.
- Сравнение исходного кода с тем, как выглядит HTML в бою. Открыв исходники настоящего сайта, обычно видишь сжатую разметку, совсем не похожую на то, что пишут руками; минифицировать собственную страницу и сравнить две версии — самый наглядный способ понять почему.
Пример
Ученик дописывает страницу-портфолио для занятия по веб-дизайну: в разметке остались комментарии от прошлых черновиков, а внутри блока <pre> лежит пример кода, показывающий, как выглядит комментарий в HTML, — часть рассказа о том, чему он научился. Перед сдачей проекта он вставляет сюда всю страницу. Отображается и работает она точно так же, черновые комментарии исчезли, файл стал меньше — но вместе с ними пропал и пример комментария из блока кода, потому что в нём буквально были символы <!-- и -->. Достаточно переписать этот один пример так, чтобы в нём не было точного синтаксиса комментария, или не пропускать этот кусок через минификацию.
Частые вопросы
Изменится ли внешний вид страницы после минификации?
Нет. Теги и структура сохраняются — меняются только оформление, пробелы и комментарии, а они на отображение не влияют.
Что происходит с комментариями в моём HTML?
Удаляются все до единого — пометить комментарий как «сохранить» здесь нельзя, в отличие от минификатора CSS на этом сайте.
Сохраняются ли пробелы внутри блока <pre> или <code>?
Да, отступы и переносы внутри этих тегов, а также внутри <script> и <textarea>, остаются ровно такими, какими вы их написали. Единственное исключение — если внутри буквально есть синтаксис комментария (<!-- -->) как показываемый текст: он удалится вместе с настоящими комментариями, потому что их вырезание происходит раньше, чем инструмент смотрит, внутри какого тега находится.
Есть ли ограничение по объёму?
Нет — вы вставляете текст, а не загружаете файл, поэтому фиксированного предела, как у файловых инструментов на этом сайте, здесь не предусмотрено.
Сохраняется ли мой код где-нибудь?
Нет. Вставленный HTML обрабатывается ради результата минификации и не сохраняется ни файлом, ни как-то ещё; фиксируется только сам факт обращения к инструменту, но не код.
Какие смежные инструменты пригодятся?
Для других форматов кода есть CSS Minifier и JavaScript Minifier, а вернуть читаемый вид помогут CSS Beautifier и JavaScript Beautifier.
