Минификатор CSS для ускорения загрузки сайта

Введение

Тот CSS, который пишут, и тот, который отдают браузеру, вовсе не обязаны выглядеть одинаково. Пока вы работаете над таблицей стилей, отступы, пустые строки между правилами и комментарии о том, зачем нужно каждое правило, делают код понятнее и проще в поддержке. Браузеру при отрисовке страницы всё это ни к чему — ему нужны только корректные селекторы, свойства и значения, а пробелы и пояснения его не интересуют. Минимизация убирает всё, что существует исключительно ради человека, и те же самые правила попадают в браузер в файле меньшего размера. Для короткой таблицы стилей выигрыш составит пару килобайт; для той, что разрасталась на протяжении долгого проекта, пережила несколько кругов правок и сохранила комментарии, оставшиеся после проверок, сокращение объёма, который нужно загрузить до того, как страница отрисуется правильно, может оказаться заметным.

Как этот инструмент минимизирует ваш CSS

Вставить CSS и нажать «Уменьшить» — это не просто удалить пробелы:

• Комментарии удаляются, но с одним исключением. Комментарий, записанный по распространённому соглашению /*! ... */ либо содержащий слово @license или @preserve, сохраняется. Так принято помечать комментарий как указание на лицензию или авторство, которое сборочные инструменты не должны вырезать. А обычное пояснение вроде /* button hover state */ будет удалено — если вам нужно сохранить лицензионную шапку, оформите её в одном из этих видов.
• Пробелы, переносы строк и пустые правила убираются. Исчезает всё, что не требуется для отделения одной лексемы от другой, а оставшийся пустой блок правила (селектор вроде .old-banner {}, внутри которого ничего нет) удаляется целиком, а не тащится дальше мёртвым грузом.
• Некоторые значения сокращаются без изменения смысла. Цвет, записанный как #ffffff, превращается в #fff, лишние нули отсекаются (0.500 становится .5, а значение вроде -0px — просто 0), а ключевые слова normal и bold в свойстве font-weight заменяются числовыми эквивалентами 400 и 700.
• Пользовательские свойства CSS и выражения calc() защищены. Переменные с приставкой -- (например, --brand-color) и выражения calc() держатся на знаках и пробелах, которые сломались бы при сжатии наравне с обычным значением, поэтому их откладывают в сторону до того, как начнут работать шаги с удалением пробелов и отсечением нулей, а затем возвращают на место нетронутыми.

Что стоит знать до минимизации

Этот инструмент не переставляет, не объединяет и не удаляет повторяющиеся правила — на выходе те же селекторы в том же порядке, только в сжатом виде. Если вам нужно избавиться от CSS, который страница на самом деле не использует, ищите инструмент другого рода: минимизатор этим не занимается. Поскольку минимизация здесь сводится к удалению пробелов и сокращению значений, а не к переосмыслению структуры правил, вложенное содержимое — скажем, правила внутри запроса @media — остаётся на своём месте, а его содержимое уплотняется так же, как и всё остальное.

Отдельного ограничения по размеру, какое есть у инструментов с загрузкой файлов на этом сайте, здесь нет: вы вставляете текст, а не отправляете файл, так что практический потолок — это то, с чем ваш браузер спокойно справляется в текстовом поле, а этого хватает на любую таблицу стилей, которую пишут вручную. Для по-настоящему большой таблицы стилей, вроде целой сборки фреймворка, а не собственных стилей одной страницы или проекта, обычно уместнее шаг сборки в вашем процессе публикации, чем вставка в браузерный инструмент.

На поведение вашего CSS минимизация не влияет, и всё же перед публикацией или сдачей работы стоит быстро взглянуть на страницу с минимизированным результатом — та же привычка, что и вычитать любой текст перед отправкой.

Когда этот инструмент подходит

• Подготовка учебного проекта или личного сайта к публикации. Файл CSS поменьше грузится быстрее, и в школьной сети или на телефоне с мобильным интернетом это заметнее, чем кажется.
• Возможность увидеть, как на деле выглядит рабочий код. В исходниках настоящего сайта часто попадается CSS, совсем не похожий на тот, что пишут на уроках, — минимизировать собственную таблицу стилей и сравнить её с оригиналом бок о бок значит наглядно понять почему; заодно пригодится CSS Beautifier для обратного действия.
• Уменьшение веса страницы перед сдачей или при жёстких ограничениях хостинга. На школьном хостинге бывают скромные квоты на место или трафик; минимизировать файлы перед загрузкой — быстрый способ в них уложиться.

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

Пример

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

Частые вопросы

Изменится ли внешний вид страницы после минимизации?

Нет. Правила, селекторы и значения сохраняются — меняются только оформление, комментарии и несколько сокращённых значений (например, шестнадцатеричные цвета и лишние нули), и ни одно из этих изменений на отрисовку не влияет.

Что происходит с комментариями в моём CSS?

Обычные комментарии удаляются. Комментарий вида /*! ... */ либо содержащий @license или @preserve, сохраняется — так принято помечать указание на лицензию или авторство.

Работает ли это с переменными CSS и calc()?

Да. Пользовательские свойства и выражения calc() при минимизации защищены, а не сжимаются наравне с обычными значениями.

Есть ли ограничение по размеру?

Жёсткого предела, как у инструментов с загрузкой файлов на этом сайте, нет — вы вставляете текст, а не отправляете файл. Очень большие вставки, например целую сборку библиотеки, лучше обрабатывать сборочным инструментом в рамках процесса публикации.

Сохраняется ли мой код где-нибудь?

Нет. Вставленный CSS обрабатывается, чтобы получить минимизированный результат, и после этого не сохраняется ни файлом, ни как-либо ещё; фиксируется только сам факт обращения к инструменту, но не код.

Можно ли минимизировать несколько таблиц стилей сразу?

Вставляйте и минимизируйте по одному блоку CSS за раз. Если нужно обработать несколько файлов вместе, сначала сведите их в один, иначе повторите операцию для каждого.

Какие смежные инструменты можно использовать?

Чтобы вернуть минимизированному CSS читаемый вид, воспользуйтесь CSS Beautifier, а для других задач с кодом — HTML Minifier и JavaScript Beautifier.