Сравнение эффективности минимизаторов CSS- и JavaScript-кода

Сравнение эффективности минимизаторов CSS- и JS-кода
Теги: Клиентская оптимизация, Минимизация, CSS, JavaScript, Bundle Transformer, YUI Compressor, Microsoft Ajax Minifier, CSSO, WebGrease Semantic CSS Minifier, JSMin, Packer, Closure Compiler, UglifyJS

Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.

В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.

Сравнение минимизаторов CSS-кода

Размер исходного файла bootstrap.css составляет 127,3 КБ, а после применения GZip-сжатия — 27,9 КБ. В таблице приведена информация о размерах файлов, полученных путем применения к файлу bootstrap.css различных алгоритмов CSS-минимизации:

Адаптер-минимизатор	Алгоритм минимизации	Размер после минимизации	Экономия	Размер после минимизации с GZip-сжатием	Экономия при GZip-сжатии
YuiCssMinifier	YUI CSS Compressor for .Net 2.2.0.0	106,0 КБ	16,73%	24,5 КБ	12,19%
MicrosoftAjaxCssMinifier	Microsoft Ajax CSS Minifier 4.92	105,7 КБ	16,97%	24,5 КБ	12,19%
KryzhanovskyCssMinifier	CSSO 1.3.7	105,6 КБ	17,05%	24,6 КБ	11,83%
WgCssMinifier	WebGrease Semantic CSS Minifier 1.3.0	—	—	—	—

Из таблицы видно, что наилучший результат показал минимизатор CSSO (CSS Optimizer) от компании Яндекс. Основным достоинством данного минимизатора является поддержка структурной минимизации CSS-кода (о структурной минимизации можно более подробно прочитать на сайте методологии БЭМ).

К сожалению, структурный минимизатор от компании Microsoft — WebGrease Semantic CSS Minifier, выбыл из борьбы, потому что не смог минимизировать файл bootstrap.css.

Другой минимизатор от Microsoft — Microsoft Ajax CSS Minifier наоборот показал очень хороший результат по сравнению со своим основным конкурентом YUI CSS Compressor for .Net.

Сравнение минимизаторов JS-кода

Размер исходного файла bootstrap.js составляет 61,9 КБ, а после применения GZip-сжатия — 16,9 КБ. В таблице приведена информация о размерах файлов, полученных путем применения к файлу bootstrap.js различных алгоритмов JS-минимизации:

Адаптер-минимизатор	Алгоритм минимизации	Размер после минимизации	Экономия	Размер после минимизации с GZip-сжатием	Экономия при GZip-сжатии
CrockfordJsMinifier	JSMin от 22.05.2007	34,5 КБ	44,26%	11,1 КБ	34,32%
EdwardsJsMinifier	Packer 3.0	31,3 КБ	49,43%	10,4 КБ	38,46%
YuiJsMinifier	YUI JS Compressor for .Net 2.2.0.0	28,8 КБ	53,47%	10,0 КБ	40,83%
ClosureLocalJsMinifier	Closure Compiler Application от 11.04.2013 (режим Simple)	28,1 КБ	54,60%	9,7 КБ	42,60%
MicrosoftAjaxJsMinifier	Microsoft Ajax JS Minifier 4.92	28,3 КБ	54,28%	9,8 КБ	42,01%
UglifyJsMinifier	UglifyJS 2.3.6	28,3 КБ	54,28%	9,8	42,01%

Как и следовало ожидать, 1-е место занял минимизатор Closure Compiler от компании Google. Следует также отметить, что в режиме Advanced можно достичь еще более лучших результатов.

Как и в случае с CSS-минимизацией Microsoft Ajax JS Minifier обошел YUI JS Compressor for .Net. Кроме того, при сжатии файла bootstrap.js Microsoft Ajax JS Minifier и UglifyJS показали одинаковый результат и оба заняли 2-е место.

Старейшие минимизаторы JSMin и Packer показали худшие результаты. Кроме того, код, минимизированный Packer, содержал ошибки.

Выводы

Безусловно, в битве минимизаторов победили поисковые гиганты Яндекс и Google.

Но и компания Microsoft не сидела сложа руки: хоть команда Рона Логана еще не выпустила стабильную версию WebGrease Semantic CSS Minifier, но они смогли поднять Microsoft Ajax Minifier на совершенно новый уровень.

UglifyJS по-прежнему можно считать JS-минимизатором №2 в мире.

Вообще, если смотреть объективно, то все современные алгоритмы минимизации, пройдя долгий путь эволюции, на данный момент имеют практически одинаковую степень сжатия.

Опрос

В заключении статьи предлагаю вам принять участие в опросе: