Выбираем лучший онлайн-сервис по сжатию CSS

сжатие 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%.
Поделиться публикацией

Комментарии 39

    +7

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


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

      0
      В оптимизаторах cssresizer.com, csscompressor.com, и refresh-sf.com проблема с валидацией решена довольно таки неплохо. Особенно мне понравился 1 вариант.
        +2
        >> А зачем это делать онлайн?
        Зашёл в топик, чтобы спросить тоже самое.
        Ведь логично делать это при сборке / деплое / коммите (нужное подчеркнуть в зависимости от скудости процесса в проекте).
        +6
        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) много меньший файл и намного быстрее.
          0
          Одно-другому не помеха, а сжатый css в gzip будет весить меньше. Разница будет небольшой, но всё же.
            +1
            -rw-r--r-- 1 nikitas nikitas 21678 Jul 11 2015 kartinki24_styles.css
            -rw-r--r-- 1 nikitas nikitas 5262 Jul 26 20:27 kartinki24_styles.css.gz
            -rw-r--r-- 1 nikitas nikitas 17471 Jul 26 20:26 kartinki24_styles.cssresizer.com.css
            -rw-r--r-- 1 nikitas nikitas 4767 Jul 26 20:27 kartinki24_styles.cssresizer.com.css.gz

            24.2% gzip оригинала, и 21.9% gzip сжатого сервисом. Несерьезно и затраты больше (по времени).
          +1
          Слабовато исследование. Сервисы используют сторонние решения для сжатия, например github.com/jakubpawlowicz/clean-css, поэтому прорывных результатов нет. А вот качество кода после сжатия проанализировать — это было бы интересно.

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

            Так лучше ничего не убирать, а сжимать как есть в gzip. Имхо, иначе редактировать будет неудобно на горячую.
              –2
              Не согласен. Пользователям не зачем видеть приватную информацию разработчиков.
                +1
                Пароли к базе и явки в css файле? Не смешите мои тапки!
                Что скрывать в CSS файлах?
                  –2
                  При чем тут пароли? С другой стороны, тот кто изучает код не всегда действует с добрыми намерениями. И ваш комментарий в коде типа «ацкий трэш, переделать при первой возможности» только подогреет его интерес — если разработчик считает решение неудачным, значит тут может быть уязвимость. Не говоря уже о простом общении внутри команды разработчиков посредством комментариев, которое может подпортить имидж компании, для которой делается сайт.
                    +1
                    если разработчик считает решение неудачным, значит тут может быть уязвимость.

                    значит тут может быть уязвимость

                    уязвимость

                    Выбираем лучший онлайн-сервис по сжатию CSS


                    КАКАЯ?!
                      0
                      Экстраполяция занимает очень много сил. (с)… CSS может маскировать область, код которой уязвим. В конце концов я не хакер. Но лишний повод шаловливым ручкам давать не стал бы. Т.ч. никаких коментов в продакшене!
                        +1
                        Уязвимость через CSS, это конечно Вы, извините, отожгли =)
                        Надо бы ещё обфусцировать, его непременно!
                          –2
                          Ну, каждый слышит что хочет. Пусть вы так меня поняли, мне в общем-то не важно. )
                          0
                          CSS может маскировать область, код которой уязвим

                          CSS это обертка для страницы. Ничего более. Серверная часть скрыта за фронтендом. Тот же JS дает много больше представления о том, в какую сторону рыть.
                          CSS только покажет пути, какие используются сайтом, и даст идею проверить, не 403/414 ли там на листинг каталога, но это равноценно и для ужатого оптимизаторами CSS'а.

                          Т.ч. никаких коментов в продакшене!

                          https://www.phpbb.com/community/styles/prosilver/theme/print.css
                          Блаблабла и
                          /* Print Style Sheet
                          ---------------------------------------- */
                          
                          
                          /* Lots still TODO here! */
                          
                          /* General markup styles */
                          * {
                          	padding: 0;
                          	margin: 0;
                          }
                          


                          В конце концов я не хакер. Но лишний повод шаловливым ручкам давать не стал бы.

                          Вообще не хостить уж! И все порты закрыть… ну или погуглите тему, прежде чем писать, тем более в такой ультимативной форме. Новички же могут воспользоваться вашими вредными советыми и начать боятся того CSS, в котором то и зубов-то нету.
                            0
                            Можете считать себя героем, защитником трусливых новичков и засчитать мне слив. ;)
              0
              CSS в примерах уже был частично оптимизирован на входе. Поэтому и результаты не столь значительные.
              По поводу валидации — каждый файл после сжатия проверялся. В большинстве случаев стили оставались валидными.
                0
                Зачем эти нонеймы если есть GooglePageSpeed (или Gtmetrix)?
                Еще ниразу не подводили по валидации.
                  0
                  Большинство сервисов из списка сжимают значительно лучше, чем GooglePageSpeed.
                  +5
                  Читая заголовок ожидал увидеть сравнение csso, cssnano и так далее… Неужели в наше время нужны онлайн инструменты для сжатия?
                  Может для проекта однодневки это ещё и позволительно, но не представляю, чтобы веб разработчик (в наше время и в здравом уме) предпочёл онлайн инструмент вместо локальной утилиты.
                    0
                    Да у и разработчиков однодневок как правила уже готовый чистый проект есть на *.
                    * — подставьте ваш любимый сборщик
                      0
                      Есть еще начинающие Вордпрессщики, которые не освоят настройку сборщиков.
                    –2
                    И тем не менее, онлайн-сервисы все еще пользуются спросом. Так почему бы не выбрать наиболее удачные варианты. Возможно кому-то поможет выбрать свой.
                      +1
                      Дамы и господа, давайте включим параною:

                      Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 2 инструмента:

                      1. cssresizer.com (84,13%);


                      whois спойлер
                      nikitas@pentagon:~$ whois cssresizer.com

                      Whois Server Version 2.0

                      Domain names in the .com and .net domains can now be registered
                      with many different competing registrars. Go to http://www.internic.net
                      for detailed information.

                      Domain Name: CSSRESIZER.COM
                      Registrar: REGISTRAR OF DOMAIN NAMES REG.RU LLC
                      Sponsoring Registrar IANA ID: 1606
                      Whois Server: whois.reg.com
                      Referral URL: http://www.reg.ru
                      Name Server: NS1.MCHOST.RU
                      Name Server: NS2.MCHOST.RU
                      Name Server: NS3.MCHOST.RU
                      Name Server: NS4.MCHOST.RU
                      Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
                      Updated Date: 21-apr-2016
                      Creation Date: 08-apr-2016
                      Expiration Date: 08-apr-2017

                      >>> Last update of whois database: Tue, 26 Jul 2016 21:49:23 GMT <<<

                      For more information on Whois status codes, please visit https://icann.org/epp

                      NOTICE: The expiration date displayed in this record is the date the
                      registrar's sponsorship of the domain name registration in the registry is
                      currently set to expire. This date does not necessarily reflect the expiration
                      date of the domain name registrant's agreement with the sponsoring
                      registrar. Users may consult the sponsoring registrar's Whois database to
                      view the registrar's reported date of expiration for this registration.

                      TERMS OF USE: You are not authorized to access or query our Whois
                      database through the use of electronic processes that are high-volume and
                      automated except as reasonably necessary to register domain names or
                      modify existing registrations; the Data in VeriSign Global Registry
                      Services' ("VeriSign") Whois database is provided by VeriSign for
                      information purposes only, and to assist persons in obtaining information
                      about or related to a domain name registration record. VeriSign does not
                      guarantee its accuracy. By submitting a Whois query, you agree to abide
                      by the following terms of use: You agree that you may use this Data only
                      for lawful purposes and that under no circumstances will you use this Data
                      to: (1) allow, enable, or otherwise support the transmission of mass
                      unsolicited, commercial advertising or solicitations via e-mail, telephone,
                      or facsimile; or (2) enable high volume, automated, electronic processes
                      that apply to VeriSign (or its computer systems). The compilation,
                      repackaging, dissemination or other use of this Data is expressly
                      prohibited without the prior written consent of VeriSign. You agree not to
                      use electronic processes that are automated and high-volume to access or
                      query the Whois database except as reasonably necessary to register
                      domain names or modify existing registrations. VeriSign reserves the right
                      to restrict your access to the Whois database in its sole discretion to ensure
                      operational stability. VeriSign may restrict or terminate your access to the
                      Whois database for failure to abide by these terms of use. VeriSign
                      reserves the right to modify these terms at any time.

                      The Registry database contains ONLY .COM, .NET, .EDU domains and
                      Registrars.

                      Domain name: cssresizer.com
                      Domain idn name: cssresizer.com
                      Status: clientTransferProhibited http://www.icann.org/epp#clientTransferProhibited
                      Registry Domain ID:
                      Registrar WHOIS Server: whois.reg.com
                      Registrar URL: https://www.reg.com/
                      Registrar URL: https://www.reg.ru/
                      Registrar URL: https://www.reg.ua/
                      Updated Date:
                      Creation Date: 2016-04-08T14:01:10Z
                      Registrar Registration Expiration Date: 2017-04-08
                      Registrar: Registrar of domain names REG.RU LLC
                      Registrar IANA ID: 1606
                      Registrar Abuse Contact Email: abuse@reg.ru
                      Registrar Abuse Contact Phone: +7.4955801111
                      Registry Registrant ID:
                      Registrant ID:
                      Registrant Name: Protection of Private Person
                      Registrant Street: PO box 87, REG.RU Protection Service
                      Registrant City: Moscow
                      Registrant State/Province:
                      Registrant Postal Code: 123007
                      Registrant Country: RU
                      Registrant Phone: +7.4955801111
                      Registrant Phone Ext:
                      Registrant Fax: +7.4955801111
                      Registrant Fax Ext:
                      Registrant Email: cssresizer.com@regprivate.ru
                      Admin ID:
                      Admin Name: Protection of Private Person
                      Admin Street: PO box 87, REG.RU Protection Service
                      Admin City: Moscow
                      Admin State/Province:
                      Admin Postal Code: 123007
                      Admin Country: RU
                      Admin Phone: +7.4955801111
                      Admin Phone Ext:
                      Admin Fax: +7.4955801111
                      Admin Fax Ext:
                      Admin Email: cssresizer.com@regprivate.ru
                      Tech ID:
                      Tech Name: Protection of Private Person
                      Tech Street: PO box 87, REG.RU Protection Service
                      Tech City: Moscow
                      Tech State/Province:
                      Tech Postal Code: 123007
                      Tech Country: RU
                      Tech Phone: +7.4955801111
                      Tech Phone Ext:
                      Tech Fax: +7.4955801111
                      Tech Fax Ext:
                      Tech Email: cssresizer.com@regprivate.ru
                      Name Server: ns1.mchost.ru
                      Name Server: ns2.mchost.ru
                      Name Server: ns3.mchost.ru
                      Name Server: ns4.mchost.ru
                      DNSSEC: Unsigned
                      URL of the ICANN WHOIS Data Problem Reporting System: http://wdprs.internic.net/
                      >>> Last update of WHOIS database: 2016-07-27T00:49:39Z <<<

                      For more information on Whois status codes, please visit
                      https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en.

                      % By submitting a query to REG.RU Whois Service
                      % you agree to abide by the following terms of use:
                      % http://www.reg.ru/whois/servpol (in Russian)
                      % http://www.reg.com/whois/servpol (in English)




                      И снова:
                      с достаточно большим отрывом выделяются 2 инструмента

                      чуть не забыл
                      1. cssresizer.com (84,13%);


                      Самопиаритесь?
                        0
                        Не понял.
                        с достаточно большим отрывом выделяются 2 инструмента

                        Первые 2 результата — 84,13% и 85%. Ближайшие 6 сервисов показали примерно 89-91%. С учетом того, что стили брались с работающих сайтов, и написаны достаточно компактно, разрыв получился достаточно неплохой.
                          0
                          Сейчас объясню:
                          под спойлером whois ноунейма, который занял 1ое место в статье и который был зарегистрирован в России за пару месяцев до ее (статьи) публикации. Вашей публикации. Потенциально вашего домена.

                          В совпадения я верю мало, особенно в выбранной вами тематике. Большинство людей использует готовые стили, которые уже лежат на CDN'ах, которые уже имеют min вариант и которые отдаются с gzip -9. А те, кто пишем простыни CSS (любимое слово продакш) понимают, что можно самому локально для своих стилей использовать приведенный мною выше скрипт и nginx будет отдавать сжатую статику быстрее, чем отдавать обычную с меншим сжатием (чтобы не страдала производительность).
                            0
                            Тогда почему на многих сайтах можно наблюдать недостаточно оптимизированные стили? Почему онлайн-сервисы все еще существуют (и их не мало)?
                            По поводу мест в рейтинге — если есть время и желание, проведите свой тест (по возможности добавьте еще сервисов). Интересно будет сравнить.
                            Статью добавили в избранное уже 50 человек (менее чем за сутки), а значит кто-то ее считает полезной. По крайней мере я подобного сравнения в интернете не нашел.
                            Я не утверждаю что онлайн-оптимизаторы — это лучшее средство по сжатию CSS. Но тем не менее, ними тоже пользуются.
                              +1
                              Тогда почему на многих сайтах можно наблюдать недостаточно оптимизированные стили?

                              Вы хотели сказать минимизированные?
                              Оптимизированные — слишком уж громко сказано, для некоторых проектов.

                              Я не утверждаю что онлайн-оптимизаторы — это лучшее средство по сжатию CSS. Но тем не менее, ними тоже пользуются.

                              Я не спорю, что их используют, но если требуется уменьшить объем передаваемой инфы, то используют статические файлы в gzip -9 и nginx. Если же речь идет о shared хостинге, где нет возможности поставить свой nginx или там выключена отдача gz'ов, то да, минимизаторы — единственное решение.

                              Кстати,
                              Первые 2 результата — 84,13% и 85%.

                              Берем http://www.kartinki24.ru/templates/kartinki/style/styles.css, вставляем вот сюда (http://css.github.io/csso/csso.html) и получаем:

                              Original: 21678 bytes
                              Compressed: 17146 bytes (79.09%)
                              Saving: 4532 bytes (20.91%)
                              Time: 214 ms


                              CCSO — бесплатный и быстрый (нету таймера как на указанном в вашей статье), который уменьшает размер CCS.
                                0
                                Спасибо за предложенный вариант.
                                CCSO протестировал. Да, по быстроте он хорош.
                                Но по сжатию, фишка в чем — каждый оптимизатор подсчитывает размер файла «по своему». Чтобы избежать погрешностей, я замерял размер CSS до и после оптимизации в кодовом редакторе.
                                Так вот CCSO показал результаты 16,75 КБ | 21,51 КБ | 22,40 КБ соответственно. Средний размер после сжатия — 85,59%. То есть, это 3 место.
                                  0
                                  каждый оптимизатор подсчитывает размер файла «по своему»

                                  Прoсто файл 21678 байт в ASCII и который скармливался обоим, и ccsresizer дает 17471 байт в UTF8, а csso дает 17146 байт в UTF8.

                                  nikitas@pentagon:~/trash$ ls -la|egrep 'kartin.*css$'
                                  -rw-r--r-- 1 nikitas nikitas 17146 Jul 27 13:05 kartinki24_styles.ccso.css
                                  -rw-r--r-- 1 nikitas nikitas 21678 Jul 11 2015 kartinki24_styles.css
                                  -rw-r--r-- 1 nikitas nikitas 17471 Jul 26 20:26 kartinki24_styles.cssresizer.com.css
                                  -rw-r--r-- 1 nikitas nikitas 21678 Jul 11 2015 kartinki24.styles.today.css
                                  -rw-r--r-- 1 nikitas nikitas 21808 Jul 27 13:07 kartinki24_styles.utf8.css

                                  Это просто размер файла, просто на диске. Если перегнать исходный в utf8, то он весит 21808 байт.

                                  17471 > 17146, логично?

                                  Я даже скачал его снова (kartinki24.styles.today.css) и это тот же самый файл, что и был вчера (kartinki24_styles.css);

                                  nikitas@pentagon:~/trash$ sha1sum *|egrep 'kartin.*css$'
                                  41ec62291de7b01504c87c19328498f81409f22f kartinki24_styles.ccso.css
                                  9e25f5ecf615223ca1a39345bd29e811996ea627 kartinki24_styles.css
                                  ada731e47493a48f290f6363a10ac41104059c88 kartinki24_styles.cssresizer.com.css
                                  9e25f5ecf615223ca1a39345bd29e811996ea627 kartinki24.styles.today.css
                                  096180e3d4d3564256f3b408450804c26f358868 kartinki24_styles.utf8.css
                                    0
                                    Все верно. У меня получилось 17,07 КБ против 16,75 КБ (в пользу CCSO).
                                    Но это только по первому файлу. По сумме же 3 тестов данный сервис немного уступает cssresizer.com и refresh-sf.com.
                                      0
                                      На примере: style25.css cssresizer ужимает лучше чем ccso потому, что на мой взгляд (визуально) разная группировка.

                                      Я создал им issue#312, если они доработают код, то выиграют и на этом скрипте.
                                        0
                                        Возможно. Но «если» — это уже больше философский вопрос. Я анализировал то, что есть.
                          0
                          Что значит
                          И снова:
                          ?
                        0
                        Интересно, было бы увидеть сравнение minify-css, Google Closure Stylesheet и др. на разных паттернах.

                        И, да, я понимаю, что Google Closure Stylesheet требует еще не малых «танцев с бубном» вокруг шаблонизатора и библиотеки/фреймворка, но, IMHO, оно того стоит.
                          0
                          minify-css показал результаты 16,87 КБ | 21,18 КБ | 22,19 КБ соответственно. Средний размер после сжатия — 85% (аналогичные показатели у refresh-sf.com).
                          +1
                          npm i gulp-cssmin -S. Ну или любой другой по вкусу.
                            0
                            Вчера, работая с клиентским сайтом, сделали нечто вроде сравнения. Не такое подробное, конечно = проверялось лишь на одном сайте (Wordpress, в частности, нам достался, стилевой файл сторонних библиотек).
                            5 сервисов попробовали, два откинули совсем.
                            Если кому-то интересно, вот ссылка на наше сравнение: tca.by/home/stati/chem-szhat-css-optimizacziya-zagruzki-site.html

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое