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

Таблицы стилей напрямую блокируют отрисовку страницы: пока браузер не скачает и не разберет каждый подключенный файл CSS, он ничего не покажет пользователю. Из-за этого лишний объем в стилях обходится сайту заметно дороже, чем тот же вес в других ресурсах.

Шаги сжатия стилей в CSS Minifier

1. Вставь исходный код CSS в поле ввода.
2. Нажми кнопку запуска, чтобы сжать стили.
3. Скопируй готовый минифицированный результат.
4. Сохрани сжатый код отдельным файлом, оставив исходный читаемый вариант нетронутым.
5. Подключи минифицированную версию на рабочем сервере и проверь оформление сайта.

Что именно удаляет минификатор CSS

Инструмент вырезает переносы строк, табуляции и пробелы, без которых парсер легко обходится. Удаляются все комментарии и замыкающие точки с запятой перед закрывающими фигурными скобками. Нулевые значения избавляются от единиц измерения вроде превращения 0px в 0, а длинные шестнадцатеричные цвета сокращаются, например #ffffff в #fff.

Смысл правил остается прежним. Исходный файл стилей объемом 90 КБ обычно удается уменьшить примерно до 65 КБ, а браузер тратит на его разбор чуть меньше ресурсов.

Где теряется скорость при работе с CSS

• Неиспользуемые селекторы: подключение готовых фреймворков ради горстки правил сильно раздувает вес.
• Множество отдельных файлов CSS, каждый из которых задерживает первый показ страницы.
• Отсутствие критического CSS: полезно встраивать базовые стили первого экрана прямо в документ, а остальные подгружать позже.
• Конструкции @import, заставляющие браузер качать файлы последовательно, а не параллельно.
• Лишние начертания веб-шрифтов, добавленные по ошибке.

Сжатие в процессе сборки с помощью CSS Minifier

Править сжатый код вручную неудобно и рискованно. Держи аккуратно оформленный исходник в системе контроля версий, выполняй сжатие на этапе публикации проекта и формируй карты кода, чтобы браузерные инструменты разработчика показывали точные номера исходных строк при отладке.

Вопросы о работе CSS Minifier