ПаветтаМинификация CSS
Минификация убирает из стилей всё, что нужно человеку и не нужно браузеру: комментарии, переносы, отступы, лишние точки с запятой. Дополнительно сокращаются цвета до трёх символов, нули до нуля без единиц и дробные значения без ведущего нуля.
Что именно убирается из стилей
Минификация убирает из стилей всё, что нужно человеку и не нужно браузеру: комментарии, переносы строк, отступы, последнюю точку с запятой в блоке. Дополнительно сокращаются цвета до трёх символов, нули пишутся без единиц измерения, а дробные значения — без ведущего нуля. Смысл правил не меняется, меняется только их запись.
Выигрыш обычно составляет от двадцати до сорока процентов исходного объёма — тем больше, чем аккуратнее был отформатирован файл. Поверх минификации сервер отдаёт файл сжатым: gzip или brotli добавляют ещё кратное сокращение, потому что в стилях много повторяющихся последовательностей.
Инструмент показывает исходный и сжатый вариант рядом и считает разницу в байтах и процентах. Обратной операции нет: восстановить форматирование можно, а комментарии уже не вернуть, поэтому минифицируют всегда копию.
| Что убирается | Пример до | После |
|---|---|---|
| Комментарии | /* карточка */ | — |
| Пробелы и переносы | color: red; | color:red |
| Цвет | #ffffff | #fff |
| Единицы у нуля | margin: 0px | margin:0 |
| Ведущий ноль | 0.5em | .5em |
От телеграфных кодовых книг до brotli
Экономия на записи старше вычислительной техники. Телеграфные компании брали плату за слово, и в ходу были кодовые книги, где целая фраза заменялась одним условным словом. Отправитель платил за одно слово вместо двадцати, а получатель разворачивал сообщение по той же книге.
В программировании сжатие исходников появилось вместе с медленными модемами девяностых: страница весом в сто килобайт грузилась на скорости 28,8 килобит почти полминуты, и каждый лишний перенос строки стоил времени. Тогда же родились первые упаковщики скриптов.
Сегодня минификация — обязательный шаг сборки: её делают инструменты вроде cssnano и esbuild, а исходное форматирование сохраняют в отдельном файле карт кода, чтобы отладчик показывал читаемую версию. Сжатие brotli, появившееся в 2015 году, выигрывает у gzip ещё пятнадцать-двадцать процентов на текстовых файлах. Отдельный шаг сборки — удаление неиспользуемых правил: инструменты вроде PurgeCSS сверяют селекторы с разметкой и выбрасывают то, что нигде не встречается.
Как минифицировать и что проверить
Вставьте исходный CSS и заберите сжатый. Работайте с копией: минифицированный файл кладут на сервер, а править продолжают исходный. Если стили собираются сборщиком, минификация уже входит в его конвейер, и ручной прогон нужен разве что для одиночного файла или встроенного блока стилей.
Проверьте результат перед выкладкой. Минификаторы иногда спотыкаются на хаках для старых браузеров и на нестандартных конструкциях внутри строк — сравните вид страницы до и после. И помните, что главный выигрыш даёт сжатие на сервере: без gzip или brotli экономия от минификации теряется на фоне того, что можно было получить. Перевести размеры в относительные единицы поможет конвертер CSS-единиц. Порядок правил минификатор не меняет: каскад в CSS зависит от порядка, и любая перестановка сломала бы вёрстку. Сокращаются только запись и синонимы, смысл правил остаётся прежним. Встроенные стили в атрибуте style минификатор не трогает: он работает с содержимым тега style и отдельными файлами, а разметку оставляет как есть.
Оценивайте выигрыш в цифрах. Сорок процентов от файла в двести килобайт — это восемьдесят килобайт, заметная величина на медленной мобильной сети. Сорок процентов от файла в пять килобайт экономят два килобайта, и ради них городить сборку смысла нет.
| Типичная экономия | 20–40 % |
| Сжатие сверху | gzip, brotli |
| Выигрыш brotli над gzip | 15–20 % |
| Год появления brotli | 2015 |
| Что не восстанавливается | комментарии |
| Отладка минифицированного | карты кода |
| Работать с | копией файла |
| Проверять | хаки и строки |
Как пользоваться
Инструмент показывает результат и экономию сразу в двух видах: в чистых байтах и с оценкой того, сколько останется после gzip — потому что на сервере файл почти всегда отдаётся сжатым, и настоящая выгода заметно меньше той, что показывают счётчики символов. Есть и обратное действие: минифицированный код разворачивается в читаемый вид с отступами.
- В левое поле — файл целиком или кусок.
- Сжать или развернуть обратно в читаемый вид.
- Переключателями: сокращать ли цвета, нули и убирать ли последнюю точку с запятой.
- Кнопкой копирования. Рядом показана экономия в байтах и после gzip.
Частые вопросы
Сколько реально экономит минификация
На чистых байтах обычно от 15 до 30% для рукописного CSS с комментариями и отступами. После gzip выигрыш падает примерно до 3–8%, потому что архиватор и так хорошо жмёт повторяющиеся пробелы и переносы. Это не значит, что минификация бесполезна: экономия остаётся, просто она в разы меньше цифры, которую показывает разница в символах.
Что именно можно убирать безопасно
Комментарии, переносы строк, отступы, пробелы вокруг скобок и двоеточий, последнюю точку с запятой в блоке. Осторожнее с пробелами внутри значений: в селекторах, в calc и в media-запросах пробел значащий, его удаление ломает правило. Инструмент эти места не трогает.
Почему нельзя сокращать все цвета до трёх символов
Потому что сокращение возможно, только когда каждый канал состоит из двух одинаковых символов: #aabbcc сжимается в #abc, а #a1b2c3 — нет. Слепое обрезание кода до трёх символов даёт другой цвет. Проверка на повторяющиеся пары здесь делается всегда.
Можно ли минифицировать вручную вместо сборщика
Для одного файла на лендинге — да. Для проекта с зависимостями это должен делать сборщик: он ещё и склеит файлы, выкинет неиспользуемые правила и расставит префиксы. Ручная минификация полезна как разовая операция и как способ посмотреть, из чего состоит файл.
Что даёт разворачивание минифицированного кода
Читаемость при разборе чужих стилей. Минифицированный файл — это одна длинная строка, в которой глазами не найти нужное правило. Разворачивание расставляет переносы и отступы, после чего в коде можно ориентироваться и искать поиском по селектору.
Влияет ли минификация на порядок правил
Нет, и это принципиально: каскад зависит от порядка, поэтому переставлять правила при минификации нельзя. Здесь порядок сохраняется полностью, меняется только форматирование.
Куда уходит вставленный текст?
Нет, весь текст обрабатывается в браузере и никуда не уходит.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
px в rem, em, pt, проценты, vw и vh при своём базовом размере шрифта и вьюпорте; таблица типовых размеров и генератор clamp() для плавного шрифта.
ОткрытьГенератор неоморфизмаМягкие тени от одного источника света: выпуклые и вдавленные элементы на CSS, с предупреждением о доступности.
ОткрытьГенератор glassmorphismЭффект матового стекла на CSS: размытие фона, прозрачность, рамка и тень. С проверкой читаемости и запасным вариантом.
ОткрытьШаблоны листьевШаблоны осенних листьев для вырезания и раскраски: клён, дуб, берёза, липа, осина, рябина, каштан, ясень, тополь, гинкго. Контуры настоящих листьев, пунктир, силуэт или цветной осенний лист, любой размер, раскладка на А4.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьКроссворды онлайнГотовый кроссворд по теме: шестнадцать наборов от детских слов до городов и стран. Разгадывается прямо на странице с проверкой, подсказками и печатью, каждый раз новая сетка.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.