Минифицировать CSS _

Как работает минификация CSS

Минификатор обходит таблицу стилей с помощью контекстно-зависимого токенайзера, который отличает защищённые регионы (строковые литералы и значения url()) от редактируемых пробелов, где сворачивание и удаление безопасны.

1. Защита строк и URL. Прежде чем выполнять любые другие преобразования, токенайзер выявляет каждую строку в кавычках («…» или '…') и каждый аргумент url(…) и сохраняет их дословно. Последующие проходы никогда не касаются этих байтов, поэтому URL фонового изображения с пробелами или свойство content с пунктуацией сохраняются точно.
2. Удаление комментариев. Блоки /* … */ удаляются при включённом переключателе. Если переключатель сохранения лицензионных комментариев тоже включён, блоки /*! … */ остаются, чтобы заголовки лицензий MIT, Apache и BSD сохранялись в выводе, как того требуют эти лицензии.
3. Сворачивание пробелов. Каждая цепочка пробелов, табуляций и переводов строк сворачивается в один пробел, затем пробелы вокруг структурных символов CSS {, }, ;, : и , удаляются полностью. Списки селекторов и значений переформатируются так же, как их читает парсер браузера.
4. Оптимизация значений. Дополнительные проходы переводят hex-коды цветов в строчный регистр, сворачивают парные 6-значные hex-каналы до 3-значного сокращения (#aabbcc → #abc) и убирают единицы измерения из нулевых значений (0px → 0). Проход по нулевым единицам пропускает значения внутри вызовов transform(), где единицы значимы.
5. Отчёт об экономии байтов. Исходный и минифицированный тексты измеряются через new TextEncoder().encode(…).byteLength — тот же счётчик UTF-8 байт, который видит CDN или HTTP-сервер на проводе. Панель метрик показывает исходный размер, минифицированный размер, сэкономленные байты и процент экономии.

Зачем минифицировать CSS

• Ускорение блокирующей загрузки при рендеринге. Браузеры не нарисуют ни одного пикселя, пока не завершат разбор CSS. Сокращение таблицы стилей на 30% укорачивает этот блок, улучшает First Contentful Paint и напрямую отражается в показателе производительности Lighthouse.
• Меньше расходов на CDN egress. CloudFront, Cloudflare и Fastly берут плату за гигабайт исходящего трафика. Сокращение таблицы стилей на 20%, загружаемой при каждом просмотре страницы, превращается в реальную строку в счёте, как только ежемесячный трафик переваливает за несколько миллионов просмотров.
• Меньшие вставки и CSS в письмах. Шаблоны транзакционных писем встраивают CSS, чтобы нормально рендериться в Outlook и Gmail, и каждый лишний байт приближает вас к порогу обрезки Gmail в 102 КБ. Минификация перед встраиванием удерживает письмо в рамках лимита.
• Отсутствие зависимости от инструментов сборки. Разовые задачи, устаревшие репозитории без пайплайна сборки и среды без доступа к интернету не всегда могут использовать Node-инструментарий. Вы можете выполнить проход здесь без установки PostCSS, cssnano или чего-либо ещё.

Типичные применения

Минификация CSS встречается в конце почти каждого фронтенд-пайплайна сборки и в ряде контекстов выполнения, где важен объём данных.

• Пайплайны продакшен-сборки: Webpack, Vite, Rollup и Parcel — все включают шаг минификации CSS в настройках продакшен-режима по умолчанию. Запуск прохода здесь перед коммитом позволяет проверить вывод без запуска полной сборки.
• Встраивание CSS в теги <style>: фреймворки с серверным рендерингом, встраивающие критический CSS в HTML-документ, выигрывают от той же экономии байтов, что и отдельные таблицы стилей, а меньший inline-CSS уменьшает Time to First Byte.
• Транзакционные и маркетинговые письма: HTML-письмо встраивает весь CSS, поэтому каждый килобайт в таблице стилей добавляется к общему размеру письма. Минификация перед встраиванием удерживает письма в рамках ограничений ESP по размеру.

Практический пример

Вставьте набор правил объёмом 1 КБ с двухпробельным отступом, пустыми строками между селекторами, блоком лицензионного комментария вверху и многословными hex-цветами вроде #FFFFFF и отступами с нулями вроде margin: 0px. При всех включённых опциях вывод сожмётся примерно до 600 байт — экономия 40% — а рендер страницы останется байт-в-байт идентичным исходнику.

Изменит ли минификация поведение моего CSS?

Нет, при настройках по умолчанию. Минификатор удаляет только те байты, которые парсер CSS уже отбрасывает — пробелы, комментарии, необязательную финальную точку с запятой — и пропускает внутренности transform(), где единицы значимы. Каждый селектор, свойство и значение сохраняются.

Работает ли это с SCSS или LESS?

Только после компиляции в обычный CSS. Синтаксис SCSS и LESS (переменные, вложенность, миксины, родительские селекторы &) не является корректным CSS, и минификатор исказит их. Сначала скомпилируйте исходник препроцессора, затем вставьте скомпилированный вывод сюда.

Почему мои лицензионные комментарии удалены?

«Удалить комментарии» включено по умолчанию и очищает каждый блок /* … */. Включите «Сохранить комментарии /*! с лицензией», чтобы оставить блоки, начинающиеся с /*!. MIT, Apache и BSD — все требуют, чтобы заголовок авторских прав распространялся вместе с CSS.

Сколько можно сэкономить?

Вручную написанный CSS обычно уменьшается на 15–35%. Файлы с большим количеством комментариев или глубокими отступами и множеством цветовых литералов могут давать до 40%. Скомпилированный вывод из Sass или CSS-in-JS часто уже частично минифицирован и даёт меньше — как правило, 5–15%.

Запустите минификацию CSS прямо в браузере — и вы полностью обойдётесь без Node-инструментария. Вставьте таблицу стилей выше, включите нужные опции, скопируйте вывод или скачайте его как .min.css. Без загрузки, без аккаунта, без сторонних библиотек.