[Из песочницы] Выбираем лучший онлайн-сервис по сжатию CSS26.07.2016 17:18

сжатие css

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

Данная статья представляет собой отчет о проведенном тестировании наиболее популярных онлайн-оптимизаторов. Эксперимент проводился на 3 CSS файлах. Ссылки на каждый из них приведены в таблице результатов.

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

Стоит сказать, что 6 из 17 рассмотренных оптимизаторов не справились с задачей. Результаты, которые после сжатия не прошли валидацию, отмечены прочерком.

Ссылка на CSS файл www.kartinki24.ru/templates/kartinki/style/styles.css gidonline.club/wp-content/themes/gidonline/style25.css spb.azbyka.net/views/azbyka/css/style.css Ср. результат после сжатия, %
Исходный размер, КБ 21,49 26,20 23,18
Сервис Результаты, КБ
askapache.com/online-tools/compress-css 18,55 24,23 23,17 93,06
cleancss.com/css-minify 18,01 23,67 22,38 90,39
codebeautifier.com - - - -
creativyst.com/Prod/3 20,58 - 23,18 -
css-school.ru/optimiser 16,95 23,00 - -
csscompressor.com 17,77 23,46 22,32 89,67
cssdrive.com/index.php/main/csscompressor 18,02 23,66 22,37 90,38
cssportal.com/css-optimize 19,29 26,20 23,18 96,9
cssresizer.com 17,07 20,20 22,35 84,13
cy-pr.com/tools/css 16,79 22,98 - -
iceyboard.no-ip.org/projects/css_compressor - 22,75 - -
lotterypost.com/css-compress.aspx 17,78 23,43 22,31 89,63
pagecolumn.com/tool/css_compressor.htm 18,07 23,66 - -
partnerki-runeta.ru/css-optimized 18,09 23,67 22,38 90,5
phpinsider.com/compress_css.php 19,29 25,44 22,38 94,69
prohtml.net/services/css-min 18,36 24,27 22,37 91,72
refresh-sf.com 16,87 21,18 22,19 85

Как видим, однозначно выделить лидера невозможно. В каждом из 3 тестов минимальный размер был достигнут с помощью разных сервисов. Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 2 инструмента:
  1. cssresizer.com (84,13%);
  2. refresh-sf.com (85%).

Бронзовым призером» стал csscompressor.com, с результатом (89,67%). Остальные программы смогли уменьшить размер стилей не более чем на 10%.

Комментарии (6)

  • 26 июля 2016 в 16:18

    +2

    ↑

    ↓

    А зачем это делать онлайн?


    И зачем потом проверять валидацию CSS? Она в 99 случаях провалится.

  • 26 июля 2016 в 16:28

    +1

    ↑

    ↓

    nginx… +
    for i in `find ./* -type f -name '*.css'`; do echo $i; gzip -c -9 $i > $i.gz; done;

    -rw-r--r-- 1 nikitas nikitas 23328 Jun 16 16:11 azbyka.style.css
    -rw-r--r-- 1 nikitas nikitas 6647 Jul 26 15:25 azbyka.style.css.gz
    -rw-r--r-- 1 nikitas nikitas 26822 Mar 20 12:10 gidonline.style25.css
    -rw-r--r-- 1 nikitas nikitas 5646 Jul 26 15:25 gidonline.style25.css.gz
    -rw-r--r-- 1 nikitas nikitas 21678 Jul 11 2015 kartinki24_styles.css
    -rw-r--r-- 1 nikitas nikitas 5262 Jul 26 15:25 kartinki24_styles.css.gz

    И к чертям «сжатие» самого кода, когда nginx отдаст (при включенном gzip и gzip_static) много меньший файл и намного быстрее.

  • 26 июля 2016 в 17:02

    0

    ↑

    ↓

    Слабовато исследование. Сервисы используют сторонние решения для сжатия, например github.com/jakubpawlowicz/clean-css, поэтому прорывных результатов нет. А вот качество кода после сжатия проанализировать — это было бы интересно.

    nikitasius врядли кто-то пишет css сплошой портянкой как в примерах. обычно вставляют комментарии, пробелы, табуляцию, переводы строк… сервис все это уберет., а потом сжимайте gzip’ом на здоровье.

  • 26 июля 2016 в 17:08

    0

    ↑

    ↓

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

  • 26 июля 2016 в 17:09

    0

    ↑

    ↓

    Зачем эти нонеймы если есть GooglePageSpeed (или Gtmetrix)?
    Еще ниразу не подводили по валидации.

    • 26 июля 2016 в 17:10

      0

      ↑

      ↓

      Большинство сервисов из списка сжимают значительно лучше, чем GooglePageSpeed.

© Habrahabr.ru