Статьи

Автор: Николай Мациевский aka sunnybear
Опубликована: 3 февраля 2008

CSS: все о сжатии

После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.

В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.

График сжатия CSS-файлов

Инструменты

  • CSSMin. Библиотека проводит набор простейших замен в CSS-файле (удаляет ненужные символы) и склеивает его в одну строку.
  • Minify. Библиотека, минимизирующая как CSS-, так и JS-файлы. Кроме того, она может слеивать несколько файлов в один, заменять относительные пути к фоновым картинкам на более короткие и самостоятельно отдавать кеширующие заголовки. В общем, не сильно лучше предыдущей.
  • YUI. YUI-compressor (использовалась версия 2.2.5). Фактически, делает то же самое, что две предыдущих библиотеки.
  • CSS Minifier. Автор разработал собственный алгоритм сжатия (по моему мнению, несколько переработанная версия CSS Tidy), который, по его собственному утверждению, «жмет лучше всех». Ну это мы и проверим.
  • CSS Tidy. Проект по минимизации CSS-файлов с открытым исходным кодом. Имеет много настроек, портирован на несколько языков и используется на нескольких ресурсах, которые предлагают инструментарий для минимизации CSS-файлов, например, на www.codebeautifier.com. Наиболее широко распространенная версия минимизатора.

Источники CSS-кода

В качестве исходных файлов брались таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446. Каждый из них был подвергнут действии минимизатора (для Minifier'а дополнительно файл склеивался в одну строку, вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).

Какие-либо закономерности степени сжатия файлов от их параметров обнаружить не удалось.

Результаты

Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.

Вначале по каждому инструменту отдельный график: выведены показатели для простой минимизации файлов, также для минимизации с последующим архивированием. Серым пунктиром показана степень сжатия (в процентах) файла при помощи простого gzip'а.

CSSMin:

График сжатия CSS-файлов с помощью CSSMin/gzip

Minify:

График сжатия CSS-файлов с помощью Minify/gzip

YUI-compressor:

График сжатия JS-файлов с помощью YUI-compressor/gzip

Minifier 0.5:

График сжатия CSS-файлов с помощью Minifier/gzip

CSS Tidy 1.3:

График сжатия CSS-файлов с помощью CSS Tidy/gzip

Далее все инструменты на одном графике (без архивирования). Действительно, заметен явный выигрыш Minifier'а.

График сжатия CSS-файлов

При архивировании, однако, все минимизаторы ведут себя примерно одинаково.

График сжатия CSS-файлов

Для уточнения картины при архивировании минимизированного файла я отдельно выделил их преимущество относительно обычного архивирования.

График сжатия CSS-файлов относительно GZIP

Тут уже видно лучше, что CSS Tidy ведет себя, в целом, лучше остальных скриптов (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).

Выводы

Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.

Во-вторых, простая «подчистка мусора» (удаление всех символов, которые можно безболезненно убрать по спецификации CSS) вместе с архивированием дает весьма неплохой результат (общее сжатие до 83%) относительно других инструментов, но при этом не теряется логика селекторов (т.е. такое сжатие абсолютно безопасно).

В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что GZIP изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1Кб) стоит либо объединять с другими файлами, ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально, либо включить в сам HTML-файл. Так что данный выброс я не считаю серьезным основанием действительно использовать какой-либо минимизатор только из-за выигрыша в 3–4% от размера исходного файла.

В-четвертых, повторяется ситуация со сжатием JS-файлов, когда библиотека, жмущая лучше всего, проигрывает более умеренной сопернице при дополнительном архивировании результата. Только в данном случае это Minifier и CSS Tidy.

Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).

В качестве послесловия

В общем, если вы не хотите дополнительно морочить голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Для тех, кто заботится о байтам, могу порекомендовать изучить действие CSS Tidy и Minifier'а (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.

Читать дальше

Все комментарии (habrahabr.ru)