Минификатор CSS
Сжимайте файлы CSS и смотрите, сколько именно вы сэкономили.
Работает в браузере. То, что вы вводите, никуда не отправляется.
- Показывает экономию в байтах
- Убирает комментарии
- Ничего не загружается
Как минифицировать CSS
- Вставьте свой CSS.
- Проверьте экономию размера в строке статистики.
- Скопируйте или скачайте минифицированный CSS.
Что убирается
- Комментарии, написанные как /* ... */
- Пробелы и переносы строк между правилами и объявлениями
- Конечная точка с запятой прямо перед закрывающей фигурной скобкой
- Дублирующиеся или избыточные правила, там, где csso может безопасно их объединить
- Лишние точки с запятой и блоки правил, оставшиеся пустыми без единого объявления внутри
Типичная экономия размера
| Исходная точка | Насколько примерно меньше |
|---|---|
| CSS, написанный вручную с комментариями | 20-30% |
| Уже компактный CSS | 5-10% |
| CSS, сгенерированный препроцессором | 10-20% |
Когда минифицировать, а когда нет
- Минифицируйте прямо перед развёртыванием, а не во время активного редактирования, ведь читаемую таблицу стилей гораздо быстрее отлаживать.
- Пропустите минификацию файла, который уже отдаётся сжатым через gzip и невелик, где разница в размере не стоит лишнего шага сборки.
Когда минификация даёт наибольший эффект
- Таблицы стилей, общие для многих страниц, ведь сэкономленные байты умножаются на каждую загрузку страницы.
- Крупные дизайн-системы или библиотеки компонентов со множеством повторяющихся, объединяемых правил.
- Сайты без пайплайна сборки, где написанный вручную CSS отдаётся напрямую без другого шага минификации.
- CSS-фреймворк, урезанный только до реально используемых на странице классов утилит.
Частые вопросы о Минификатор CSS
Насколько меньше станет мой CSS?
Обычно на 10-30%, больше, если в исходнике много комментариев и пробелов, меньше, если он уже компактный.
Минификация меняет внешний вид моей страницы?
Нет. Минификация только убирает пробелы, комментарии и избыточный синтаксис. Правила, применяемые к вашей странице, остаются теми же.
Это объединяет повторяющиеся правила?
Да, там, где это безопасно, что может сжать файл сильнее, чем просто удаление пробелов.
Стоит ли хранить исходный файл?
Да. Держите читаемую версию для редактирования и используйте минифицированную только в продакшене.
Какой минификатор здесь используется?
csso, тот же минификатор CSS, что используют несколько плагинов для сборщиков. Он также объединяет некоторые дублирующиеся и избыточные правила сверх простого удаления пробелов.
Минифицированный CSS всё ещё безопасно вставлять в таблицу стилей?
Да, это обычный CSS с убранными пробелами. Любой браузер или инструмент сборки читает его точно так же, как исходный.
Удаляет ли это нужные мне вендорные префиксы, вроде -webkit-?
Нет. Свойства и значения с вендорными префиксами остаются точно такими, как написаны. Минификация убирает только пробелы, комментарии и безопасно объединяемые правила, но никогда не свойство, которое реально объявлено в вашем CSS.
Что происходит с CSS-переменными (пользовательскими свойствами)?
Они остаются как есть, включая имена и значения с --, ведь минификация не переименовывает и не разворачивает пользовательские свойства.