Минифицировать HTML

Удалите комментарии и пробелы и сожмите CSS и JavaScript внутри страницы — не нарушив те отступы, которые действительно отображаются. Ваш исходный код не покидает браузер.

Не сохраняется
Без очереди и ожидания
Без регистрации и водяных знаков

Удалить комментарии Сжать пробелы Только там, где они не отображаютсяМинифицировать встроенный CSS Минифицировать встроенный JavaScript Убрать кавычки у атрибутов Допустимо, но ломает некоторые шаблонизаторы

Ваш HTML

Минифицировано

Здесь появится минифицированный HTML.

Как это работает

Вставьте HTML

Или перетащите файл. Ничего не сохраняется — для исходного кода это важнее, чем для большинства файлов.

Выберите, насколько глубоко сжимать

Комментарии, пробелы, встроенный CSS и встроенный JavaScript включаются отдельными переключателями.

Скопируйте или скачайте

Вы увидите, насколько уменьшился код, — размер до и после.

Пробелы, которые важны, и пробелы, которые нет

В HTML пробел между двумя строчными элементами — это настоящий пробел, и именно это отличает аккуратный минификатор от того, что ломает страницы. Уберите перевод строки между двумя ссылками — и слова на экране слипнутся; схлопните отступы внутри блока pre или textarea — и изменится само содержимое, ведь пробелы там и есть содержимое. Поэтому пробелы удаляются только там, где они гарантированно не отображаются, а там, где отображаются, остаются в неприкосновенности. Минификатор, который вычищает все пробелы подряд, выдаст файл поменьше и страницу, которая заметно выглядит не так.

Комментарии удаляются: они нужны тому, кто поддерживает исходный код, а не читателю. Исключение — условные комментарии, потому что это инструкции, а не заметки. Избыточные атрибуты отбрасываются: type="text/javascript" у элемента script уже десять лет подразумевается по умолчанию, а method="get" у формы сообщает то, что форма делает и так.

Удаление кавычек у атрибутов — допустимый HTML, и по умолчанию оно выключено — намеренно. Спецификация разрешает значение атрибута без кавычек, если в нём нет пробелов и неудобных символов, и браузеры прекрасно с этим справляются. А вот шаблонизаторы часто нет: выражение Blade, Twig, Handlebars или JSX внутри атрибута без кавычек перестаёт корректно разбираться, и ошибка всплывает при сборке в файле, который никому не хочется читать. Выигрыш мал, а риск — нет, поэтому эта функция включается только вручную.

Честная мера выигрыша — размер после сжатия, а не до. Серверы отдают HTML в gzip или brotli, а эти алгоритмы отлично справляются с повторяющимися пробелами, так что документ, который после минификации уменьшился со 100 KB до 70 KB, при передаче может сократиться всего с 12 KB до 11 KB. Минифицировать HTML стоит, но это самая скромная из трёх экономий: основной вес — в таблицах стилей и скриптах.

Если нужно другое

Для целого сайта, а не отдельного файла, этому место в сборке, а не во вкладке браузера. Все современные фреймворки и генераторы статических сайтов минифицируют HTML при сборке, а ручная минификация прекращается в тот момент, когда кто-то о ней забывает. Библиотеки, на которых они построены, настраиваются вплоть до отдельных преобразований — это пригодится, когда проблемы создаёт одно конкретное правило.

Прежде чем оптимизировать разметку, проверьте, сколько на самом деле весит страница. Почти на любом реальном сайте HTML — это погрешность на фоне изображений, шрифтов и JavaScript: Lighthouse или сетевая панель самого браузера покажут это за секунды, и обычно оказывается, что одна неоптимизированная картинка в шапке весит больше, чем вся разметка страницы.

Частые вопросы

Мой код где-нибудь сохраняется?

Нет, и для исходного кода в этом весь смысл. Ничего не сохраняется, и ни один сервер его не видит. Вставить закрытый исходный код в онлайн-минификатор, который куда-то его отправляет, — это раскрытие информации, что бы сайт ни писал о сроках хранения. И это как раз то, что делают в спешке, не задумываясь.

Минификация не испортит внешний вид страницы?

Не при тех настройках, что здесь. Пробелы схлопываются только там, где они не отображаются: между блочными элементами, такими как div и элементы списка. Пробел МЕЖДУ СТРОЧНЫМИ элементами сохраняется, потому что без него два слова заметно слипаются: "</span> <span>" — это настоящий пробел на экране, а "</span><span>" — нет. Содержимое <pre> и <textarea> остаётся нетронутым байт в байт. А удаление необязательных закрывающих тегов намеренно выключено: это допустимый HTML, но многие шаблонизаторы и почтовые клиенты плохо разбирают результат.

Что именно удаляется?

Комментарии, пробелы, которые никогда не отображались, и всё лишнее внутри блоков <style> и <script>. Структура разметки, атрибуты и текст не затрагиваются: инструмент проверяет себя, разбирая страницу до и после и сверяя, что количество элементов, пункты списков и видимый текст совпадают.

Стоит ли убирать кавычки у атрибутов?

Только если результат идёт прямо в браузер. Это допустимый HTML и немного экономит, но атрибуты без кавычек ломают некоторые шаблонизаторы, некоторые почтовые клиенты и большинство примитивных парсеров. По умолчанию эта функция выключена, а при включении страница вас предупредит.

Минифицируются ли CSS и JavaScript внутри страницы?

Да, и то и другое — так же, как в наших минификаторах CSS и JavaScript. Одно исключение: если во встроенном CSS используется нативная вложенность или современные медиазапросы, сжатие CSS на этот раз отключается — минификатор CSS старше этих возможностей и молча удалил бы правила. HTML всё равно минифицируется, и страница сообщает вам об этом, а не возвращает страницу без части стилей.

Насколько меньше станет файл?

Для написанного вручную HTML с отступами и комментариями — обычно на 10–30%. Дальше основную работу делает gzip на вашем сервере. Минифицировать заранее всё равно полезно, потому что эффекты складываются, но не ждите, что одна минификация уменьшит файл вдвое.

Можно ли минифицировать весь сайт сразу?

Здесь — по одной странице. Для сайта из многих страниц минифицируйте на этапе сборки или деплоя, чтобы каждая страница в каждом релизе обрабатывалась одинаково, — а в системе контроля версий храните читаемый исходный код, а не минифицированный результат.

Полезно знать: Пробелы схлопываются только там, где они не отображаются, поэтому текст внутри pre и textarea остаётся нетронутым, а пробелы между строчными элементами сохраняются. Удаление кавычек у атрибутов — допустимый HTML, но оно ломает некоторые шаблонизаторы, поэтому по умолчанию выключено.

Разместите этот инструмент на своём сайте

Бесплатно для любого блога, страницы класса или справочной статьи. Вставьте один фрагмент кода — и посетители смогут пользоваться инструментом прямо на вашей странице.