Как пользоваться: Минификатор CSS
- Вставьте свой CSS, перетащите файл
.cssв поле ввода или нажмите Пример. - Оставьте оптимизации включенными (все они безопасны) или снимите отметку с тех, которые вам не нужны.
- Проверьте экономию под редактором, затем нажмите Копировать или Скачать и сохраните
styles.min.css. - Нужно прочитать минифицированный файл? Переключитесь на Форматирование.
Что такое минификация CSS?
Минификация CSS удаляет всё, что браузеру не нужно: комментарии, отступы, переносы строк, последнюю точку с запятой в каждом правиле, а также переписывает некоторые значения в более короткую эквивалентную запись. Полученная таблица стилей работает так же, но весит меньше, поэтому загружается и разбирается быстрее. Поскольку CSS является блокирующим отрисовку ресурсом, меньший файл стилей может напрямую улучшить First Contentful Paint и Largest Contentful Paint.
Что меняет этот минификатор
| Оптимизация | До | После |
|---|---|---|
| Комментарии и пробелы | /* Buttons */ .btn , .link { … } | .btn,.link{…} |
| Последняя точка с запятой | {color:red;} | {color:red} |
| Цвета | #FFFFFF, #aabbccdd | #fff, #abcd |
| Нулевые единицы | margin:0px 0em | margin:0 0 |
| Числа | 0.50rem, 1.0 | .5rem, 1 |
| Пустые правила | .unused{} | (удаляется) |
Почему это безопасно
Агрессивные минификаторы иногда ломают таблицы стилей. Этот применяет только те преобразования, которые не могут изменить поведение:
- Строки, значения
url()и экранированные символы защищены и никогда не изменяются. - Единицы измерения удаляются только у длин:
0s,0degи0%сохраняют свои единицы (transition: 0sи селекторы ключевых кадров без них не работают), а содержимоеcalc(),min()иclamp()не трогается, так какcalc(0 + 10px)является недопустимым. - Сокращение
flexпропускается (flex: 1 1 0pxиflex: 1 1 0в старых движках не всегда одинаковы), а значения пользовательских свойств теряют только лишние пробелы. - Пробелы в селекторах сохраняются там, где они имеют значение:
a :hover(любой наведённый потомок) отличается отa:hover. @layer name {}сохраняется даже пустым, поскольку объявляет порядок слоёв. Лицензионные комментарии, начинающиеся с/*!, по умолчанию сохраняются.
Минификация и сжатие
Минификация и сжатие gzip/Brotli дополняют друг друга. Сжатие убирает повторы, а минификация удаляет байты, которые сжатие не может убрать, например комментарии. Значение Размер после gzip показывает примерный объём данных, который будет передан по сети, если ваш сервер сжимает ответы (большинство делает это). Для максимального эффекта также удалите неиспользуемые правила с помощью инструмента вроде PurgeCSS и встраивайте только критический CSS для содержимого над сгибом.
Хотите изучить минифицированный файл? Используйте режим «Форматирование» здесь или форматировщик CSS. Проверяете производительность всей страницы? Запустите тест скорости страницы.
Также ищут как: альтернатива cssnano, css compressor онлайн.
Инструменты, которые хорошо сочетаются с Минификатор CSS
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
- JavaScript форматтер — Распакуйте и отформатируйте JavaScript, JSON или JSX с нужными отступами и стилем скобок.
- Сжатие изображений — Уменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.
- SQL-форматтер — Вставьте запрос или целую миграцию и получите читаемый SQL: по одному предложению в строке, выровненные JOIN и единый регистр ключевых слов с учётом синтаксиса вашей базы данных.
Часто задаваемые вопросы
Может ли минификация сломать мой CSS?
calc()). Если в исходном CSS есть синтаксическая ошибка, она сохранится в результате, поэтому проверяйте CSS, если он ведёт себя странно.Насколько уменьшится мой CSS?
Нужно ли всё равно использовать gzip или Brotli?
Почему некоторые комментарии сохраняются?
/*!, по соглашению содержат лицензионные уведомления, которые должны оставаться вместе с кодом. Снимите отметку «Сохранять /*! license */ комментарии», чтобы удалить и их.