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

[fetis26]

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

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

[noeer]

В оптимизаторах cssresizer.com, csscompressor.com, и refresh-sf.com проблема с валидацией решена довольно таки неплохо. Особенно мне понравился 1 вариант.

[samizdam]

>> А зачем это делать онлайн?
Зашёл в топик, чтобы спросить тоже самое.
Ведь логично делать это при сборке / деплое / коммите (нужное подчеркнуть в зависимости от скудости процесса в проекте).

[nikitasius]

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) много меньший файл и намного быстрее.

[servekon]

Одно-другому не помеха, а сжатый css в gzip будет весить меньше. Разница будет небольшой, но всё же.

[nikitasius]

-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]

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

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

[nikitasius]

сервис все это уберет. а потом сжимайте gzip'ом на здоровье.

Так лучше ничего не убирать, а сжимать как есть в gzip. Имхо, иначе редактировать будет неудобно на горячую.

[aliencash]

Не согласен. Пользователям не зачем видеть приватную информацию разработчиков.

[nikitasius]

Пароли к базе и явки в css файле? Не смешите мои тапки!
Что скрывать в CSS файлах?

[aliencash]

При чем тут пароли? С другой стороны, тот кто изучает код не всегда действует с добрыми намерениями. И ваш комментарий в коде типа «ацкий трэш, переделать при первой возможности» только подогреет его интерес — если разработчик считает решение неудачным, значит тут может быть уязвимость. Не говоря уже о простом общении внутри команды разработчиков посредством комментариев, которое может подпортить имидж компании, для которой делается сайт.

[nikitasius]

если разработчик считает решение неудачным, значит тут может быть уязвимость.

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

уязвимость

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

КАКАЯ?!

[aliencash]

Экстраполяция занимает очень много сил. (с)… CSS может маскировать область, код которой уязвим. В конце концов я не хакер. Но лишний повод шаловливым ручкам давать не стал бы. Т.ч. никаких коментов в продакшене!

[samizdam]

Уязвимость через CSS, это конечно Вы, извините, отожгли =)
Надо бы ещё обфусцировать, его непременно!

[aliencash]

Ну, каждый слышит что хочет. Пусть вы так меня поняли, мне в общем-то не важно. )

[nikitasius]

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, в котором то и зубов-то нету.

[aliencash]

Можете считать себя героем, защитником трусливых новичков и засчитать мне слив. ;)

[noeer]

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

[Neocaridina]

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

[noeer]

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

[psykeonfarm]

Читая заголовок ожидал увидеть сравнение csso, cssnano и так далее… Неужели в наше время нужны онлайн инструменты для сжатия?
Может для проекта однодневки это ещё и позволительно, но не представляю, чтобы веб разработчик (в наше время и в здравом уме) предпочёл онлайн инструмент вместо локальной утилиты.

[SerDIDG]

Да у и разработчиков однодневок как правила уже готовый чистый проект есть на *.
* — подставьте ваш любимый сборщик

[zooks]

Есть еще начинающие Вордпрессщики, которые не освоят настройку сборщиков.

[noeer]

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

[nikitasius]

Дамы и господа, давайте включим параною:

Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 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: [e-mail]
Registrar Abuse Contact Phone: [phone]
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: [phone]
Registrant Phone Ext:
Registrant Fax: [phone]
Registrant Fax Ext:
Registrant Email: [e-mail]
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: [phone]
Admin Phone Ext:
Admin Fax: [phone]
Admin Fax Ext:
Admin Email: [e-mail]
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: [phone]
Tech Phone Ext:
Tech Fax: [phone]
Tech Fax Ext:
Tech Email: [e-mail]
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%);

Самопиаритесь?

[noeer]

Не понял.

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

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

[nikitasius]

Сейчас объясню:
под спойлером whois ноунейма, который занял 1ое место в статье и который был зарегистрирован в России за пару месяцев до ее (статьи) публикации. Вашей публикации. Потенциально вашего домена.

В совпадения я верю мало, особенно в выбранной вами тематике. Большинство людей использует готовые стили, которые уже лежат на CDN'ах, которые уже имеют min вариант и которые отдаются с gzip -9. А те, кто пишем простыни CSS (любимое слово продакш) понимают, что можно самому локально для своих стилей использовать приведенный мною выше скрипт и nginx будет отдавать сжатую статику быстрее, чем отдавать обычную с меншим сжатием (чтобы не страдала производительность).

[noeer]

Тогда почему на многих сайтах можно наблюдать недостаточно оптимизированные стили? Почему онлайн-сервисы все еще существуют (и их не мало)?
По поводу мест в рейтинге — если есть время и желание, проведите свой тест (по возможности добавьте еще сервисов). Интересно будет сравнить.
Статью добавили в избранное уже 50 человек (менее чем за сутки), а значит кто-то ее считает полезной. По крайней мере я подобного сравнения в интернете не нашел.
Я не утверждаю что онлайн-оптимизаторы — это лучшее средство по сжатию CSS. Но тем не менее, ними тоже пользуются.

[nikitasius]

Тогда почему на многих сайтах можно наблюдать недостаточно оптимизированные стили?

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

Я не утверждаю что онлайн-оптимизаторы — это лучшее средство по сжатию 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]

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

[nikitasius]

каждый оптимизатор подсчитывает размер файла «по своему»

Пр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]

Все верно. У меня получилось 17,07 КБ против 16,75 КБ (в пользу CCSO).
Но это только по первому файлу. По сумме же 3 тестов данный сервис немного уступает cssresizer.com и refresh-sf.com.

[nikitasius]

На примере: style25.css cssresizer ужимает лучше чем ccso потому, что на мой взгляд (визуально) разная группировка.

Я создал им issue#312, если они доработают код, то выиграют и на этом скрипте.

[noeer]

Возможно. Но «если» — это уже больше философский вопрос. Я анализировал то, что есть.

[noeer]

Что значит

И снова:

?

[edejin]

Интересно, было бы увидеть сравнение minify-css, Google Closure Stylesheet и др. на разных паттернах.

И, да, я понимаю, что Google Closure Stylesheet требует еще не малых «танцев с бубном» вокруг шаблонизатора и библиотеки/фреймворка, но, IMHO, оно того стоит.

[noeer]

minify-css показал результаты 16,87 КБ | 21,18 КБ | 22,19 КБ соответственно. Средний размер после сжатия — 85% (аналогичные показатели у refresh-sf.com).

[franzose]

npm i gulp-cssmin -S. Ну или любой другой по вкусу.

[LouD]

Вчера, работая с клиентским сайтом, сделали нечто вроде сравнения. Не такое подробное, конечно = проверялось лишь на одном сайте (Wordpress, в частности, нам достался, стилевой файл сторонних библиотек).
5 сервисов попробовали, два откинули совсем.
Если кому-то интересно, вот ссылка на наше сравнение: tca.by/home/stati/chem-szhat-css-optimizacziya-zagruzki-site.html