В настоящее время существует огромное количество веб-инструментов по оптимизации 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 инструмента:
- cssresizer.com (84,13%);
- refresh-sf.com (85%).
Бронзовым призером» стал csscompressor.com, с результатом (89,67%). Остальные программы смогли уменьшить размер стилей не более чем на 10%.
Комментарии (38)
nikitasius
26.07.2016 16:28+6nginx… +
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) много меньший файл и намного быстрее.
servekon
26.07.2016 17:28Одно-другому не помеха, а сжатый css в gzip будет весить меньше. Разница будет небольшой, но всё же.
nikitasius
26.07.2016 21:30+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 сжатого сервисом. Несерьезно и затраты больше (по времени).
aliencash
26.07.2016 17:02+1Слабовато исследование. Сервисы используют сторонние решения для сжатия, например github.com/jakubpawlowicz/clean-css, поэтому прорывных результатов нет. А вот качество кода после сжатия проанализировать — это было бы интересно.
nikitasius врядли кто-то пишет css сплошой портянкой как в примерах. обычно вставляют комментарии, пробелы, табуляцию, переводы строк… сервис все это уберет. а потом сжимайте gzip'ом на здоровье.nikitasius
26.07.2016 17:24-2сервис все это уберет. а потом сжимайте gzip'ом на здоровье.
Так лучше ничего не убирать, а сжимать как есть в gzip. Имхо, иначе редактировать будет неудобно на горячую.aliencash
26.07.2016 17:29-2Не согласен. Пользователям не зачем видеть приватную информацию разработчиков.
nikitasius
26.07.2016 21:25+1Пароли к базе и явки в css файле? Не смешите мои тапки!
Что скрывать в CSS файлах?aliencash
26.07.2016 22:15-2При чем тут пароли? С другой стороны, тот кто изучает код не всегда действует с добрыми намерениями. И ваш комментарий в коде типа «ацкий трэш, переделать при первой возможности» только подогреет его интерес — если разработчик считает решение неудачным, значит тут может быть уязвимость. Не говоря уже о простом общении внутри команды разработчиков посредством комментариев, которое может подпортить имидж компании, для которой делается сайт.
nikitasius
26.07.2016 22:39+1если разработчик считает решение неудачным, значит тут может быть уязвимость.
значит тут может быть уязвимость
уязвимость
Выбираем лучший онлайн-сервис по сжатию CSS
КАКАЯ?!aliencash
26.07.2016 22:44Экстраполяция занимает очень много сил. (с)… CSS может маскировать область, код которой уязвим. В конце концов я не хакер. Но лишний повод шаловливым ручкам давать не стал бы. Т.ч. никаких коментов в продакшене!
nikitasius
27.07.2016 00:46CSS может маскировать область, код которой уязвим
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, в котором то и зубов-то нету.aliencash
27.07.2016 01:18Можете считать себя героем, защитником трусливых новичков и засчитать мне слив. ;)
noeer
26.07.2016 17:08CSS в примерах уже был частично оптимизирован на входе. Поэтому и результаты не столь значительные.
По поводу валидации — каждый файл после сжатия проверялся. В большинстве случаев стили оставались валидными.
Neocaridina
26.07.2016 17:09Зачем эти нонеймы если есть GooglePageSpeed (или Gtmetrix)?
Еще ниразу не подводили по валидации.
psykeonfarm
26.07.2016 18:24+5Читая заголовок ожидал увидеть сравнение csso, cssnano и так далее… Неужели в наше время нужны онлайн инструменты для сжатия?
Может для проекта однодневки это ещё и позволительно, но не представляю, чтобы веб разработчик (в наше время и в здравом уме) предпочёл онлайн инструмент вместо локальной утилиты.
noeer
26.07.2016 18:28-2И тем не менее, онлайн-сервисы все еще пользуются спросом. Так почему бы не выбрать наиболее удачные варианты. Возможно кому-то поможет выбрать свой.
nikitasius
27.07.2016 00:52+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)
noeer
27.07.2016 01:22Не понял.
с достаточно большим отрывом выделяются 2 инструмента
Первые 2 результата — 84,13% и 85%. Ближайшие 6 сервисов показали примерно 89-91%. С учетом того, что стили брались с работающих сайтов, и написаны достаточно компактно, разрыв получился достаточно неплохой.nikitasius
27.07.2016 11:11Сейчас объясню:
под спойлером whois ноунейма, который занял 1ое место в статье и который был зарегистрирован в России за пару месяцев до ее (статьи) публикации. Вашей публикации. Потенциально вашего домена.
В совпадения я верю мало, особенно в выбранной вами тематике. Большинство людей использует готовые стили, которые уже лежат на CDN'ах, которые уже имеют min вариант и которые отдаются с gzip -9. А те, кто пишем простыни CSS (любимое слово продакш) понимают, что можно самому локально для своих стилей использовать приведенный мною выше скрипт и nginx будет отдавать сжатую статику быстрее, чем отдавать обычную с меншим сжатием (чтобы не страдала производительность).noeer
27.07.2016 11:24Тогда почему на многих сайтах можно наблюдать недостаточно оптимизированные стили? Почему онлайн-сервисы все еще существуют (и их не мало)?
По поводу мест в рейтинге — если есть время и желание, проведите свой тест (по возможности добавьте еще сервисов). Интересно будет сравнить.
Статью добавили в избранное уже 50 человек (менее чем за сутки), а значит кто-то ее считает полезной. По крайней мере я подобного сравнения в интернете не нашел.
Я не утверждаю что онлайн-оптимизаторы — это лучшее средство по сжатию CSS. Но тем не менее, ними тоже пользуются.nikitasius
27.07.2016 12:32+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.noeer
27.07.2016 13:30Спасибо за предложенный вариант.
CCSO протестировал. Да, по быстроте он хорош.
Но по сжатию, фишка в чем — каждый оптимизатор подсчитывает размер файла «по своему». Чтобы избежать погрешностей, я замерял размер CSS до и после оптимизации в кодовом редакторе.
Так вот CCSO показал результаты 16,75 КБ | 21,51 КБ | 22,40 КБ соответственно. Средний размер после сжатия — 85,59%. То есть, это 3 место.nikitasius
27.07.2016 14:16каждый оптимизатор подсчитывает размер файла «по своему»
Пр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
noeer
27.07.2016 15:41Все верно. У меня получилось 17,07 КБ против 16,75 КБ (в пользу CCSO).
Но это только по первому файлу. По сумме же 3 тестов данный сервис немного уступает cssresizer.com и refresh-sf.com.nikitasius
27.07.2016 16:38На примере: style25.css cssresizer ужимает лучше чем ccso потому, что на мой взгляд (визуально) разная группировка.
Я создал им issue#312, если они доработают код, то выиграют и на этом скрипте.noeer
27.07.2016 16:59Возможно. Но «если» — это уже больше философский вопрос. Я анализировал то, что есть.
edejin
26.07.2016 21:36Интересно, было бы увидеть сравнение minify-css, Google Closure Stylesheet и др. на разных паттернах.
И, да, я понимаю, что Google Closure Stylesheet требует еще не малых «танцев с бубном» вокруг шаблонизатора и библиотеки/фреймворка, но, IMHO, оно того стоит.noeer
26.07.2016 21:56minify-css показал результаты 16,87 КБ | 21,18 КБ | 22,19 КБ соответственно. Средний размер после сжатия — 85% (аналогичные показатели у refresh-sf.com).
fetis26
А зачем это делать онлайн?
И зачем потом проверять валидацию CSS? Она в 99 случаях провалится.
noeer
В оптимизаторах cssresizer.com, csscompressor.com, и refresh-sf.com проблема с валидацией решена довольно таки неплохо. Особенно мне понравился 1 вариант.
samizdam
>> А зачем это делать онлайн?
Зашёл в топик, чтобы спросить тоже самое.
Ведь логично делать это при сборке / деплое / коммите (нужное подчеркнуть в зависимости от скудости процесса в проекте).