Минификатор HTML и CSS онлайн: сжатие кода

Минификатор HTML и CSS

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

Как пользоваться

1. Вставьте код в левое поле. Инструмент определит, HTML это или CSS (можно выбрать и самому).
2. Посмотрите на параметры под полями и отключите то, что не нужно.
3. Нажмите «Копировать» или «Скачать», чтобы получить файл. Строка над кнопками показывает, сколько байт было в коде и сколько стало.

Что он делает с CSS

• Удаляет комментарии. Комментарии, начинающиеся с /*! (лицензии), остаются, если вы не отключите эту опцию.
• Удаляет пробелы и переводы строк, а также пробелы вокруг { } ; , и вокруг >, + и ~ в селекторах.
• Удаляет последнюю точку с запятой в правиле: a{color:red;} становится a{color:red}.
• Сокращает цвета: #ffffff становится #fff, а #aabbccdd — #abcd.
• Удаляет ноль перед точкой: 0.5em становится .5em.
• Удаляет пустые правила и правила, в которых только пустые правила.

Пример:

/* the button */
.btn:hover , .btn:focus {
    color : #ffffff ;
    margin : 0.5em 0 ;
    box-shadow : 0 0 0 0.2rem rgba( 0 , 123 , 255 , 0.25 ) ;
}

превращается в

.btn:hover,.btn:focus{color:#fff;margin:.5em 0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}

Инструмент никогда не трогает текст в кавычках (content: "a b"), адрес в url(...) и пробелы, которые нужны CSS: пробелы вокруг + и - в calc(), пробел в селекторе потомка (a :hover — это не a:hover) и значение пользовательского свойства (--name). Современный CSS с вложенностью, @media, @supports, @layer и @keyframes поддерживается.

Что он делает с HTML

• Удаляет комментарии. Условные комментарии старого Internet Explorer (<!--[if IE]>) и комментарии, начинающиеся с <!--!, остаются.
• Превращает любую последовательность пробелов и переводов строк в один пробел и удаляет её там, где она не отображается: между блочными тегами (<div>, <p>, <li>, <td> и подобными) и на концах блока.
• Сохраняет один пробел между строчными элементами. В <b>a</b> <i>b</i> пробел — часть текста, и без него слова слиплись бы.
• Записывает теги в коротком виде: один пробел между атрибутами, ни одного вокруг =, один пробел между именами классов.
• Минифицирует CSS в <style> и в атрибуте style="" и записывает JSON-LD (<script type="application/ld+json">) без пробелов.
• Не меняет <pre>, <textarea>, <script>, тексты атрибутов и сущности вроде  .

Чего он не делает

• JavaScript не минифицируется. Код в <script> остаётся как есть, и страница сообщает об этом. Плохой минификатор JavaScript ломает программы, поэтому для него используйте инструмент сборки.
• Он не переименовывает классы, не объединяет правила, не удаляет неиспользуемый CSS, не убирает кавычки у атрибутов и необязательные теги (</li>, </p>). Инструменты, которые это делают, экономят ещё несколько процентов и время от времени ломают страницу. Этот выбирает безопасность.
• Он не создаёт source map.

Сколько это экономит

Написанный вручную CSS с комментариями и отступами обычно теряет от пятой части до трети объёма, а HTML намного меньше, потому что в нём в основном текст. Если ваш сервер уже сжимает файлы gzip или Brotli, выигрыш в переданном размере меньше, поскольку повторяющиеся пробелы хорошо сжимаются. Узнать, использует ли это ваш сайт, можно с помощью проверки Brotli, а вес страницы — с помощью проверки размера страницы.

Хорошая практика

• Сохраняйте исходные файлы. Не правьте минифицированные: их трудно читать.
• Для сайта, который вы собираете, минифицируйте на этапе сборки (Vite, esbuild, webpack, Gulp), а не вручную. Эту страницу используйте для быстрой проверки, для фрагмента или для файла, у которого нет сборки.
• Проверяйте результат. Откройте страницу и посмотрите на неё, прежде чем размещать минифицированный код на рабочем сайте.

Ограничения

• Инструмент читает код так, как это делает браузер, но не проверяет его корректность. Сломанный HTML или CSS станет короче, но останется сломанным.
• Тип определяется по первому символу: код, начинающийся с <, считается HTML. Если это не так, выберите HTML или CSS сами.
• Очень большой файл (несколько мегабайт) может замедлить страницу, потому что работу выполняет ваш браузер.
• Код не сохраняется. В браузере остаётся только выбор параметров.