noeer Jul 26 2016 at 16:03

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

2 min

57K

CSS*Client optimization*Web services testing*

From sandbox

Comments 39

fetis26 Jul 26 2016 at 16:18

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

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

noeer Jul 26 2016 at 17:23

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

samizdam Jul 26 2016 at 22:45

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

nikitasius Jul 26 2016 at 16:28

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 Jul 26 2016 at 17:28

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

nikitasius Jul 26 2016 at 21:30

-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 Jul 26 2016 at 17:02

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

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

nikitasius Jul 26 2016 at 17:24

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

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

-2

aliencash Jul 26 2016 at 17:29

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

-2

nikitasius Jul 26 2016 at 21:25

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

aliencash Jul 26 2016 at 22:15

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

-2

nikitasius Jul 26 2016 at 22:39

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

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

уязвимость

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

КАКАЯ?!

aliencash Jul 26 2016 at 22:44

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

samizdam Jul 26 2016 at 22:50

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

aliencash Jul 26 2016 at 22:54

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

-2

nikitasius Jul 27 2016 at 00:46

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 Jul 27 2016 at 01:18

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

noeer Jul 26 2016 at 17:08

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

Neocaridina Jul 26 2016 at 17:09

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

noeer Jul 26 2016 at 17:10

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

psykeonfarm Jul 26 2016 at 18:24

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

SerDIDG Jul 26 2016 at 20:29

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

zooks Jul 26 2016 at 23:06

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

noeer Jul 26 2016 at 18:28

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

-2

nikitasius Jul 27 2016 at 00:52

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

Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 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%);

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

noeer Jul 27 2016 at 01:22

Не понял.

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

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

nikitasius Jul 27 2016 at 11:11

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

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

noeer Jul 27 2016 at 11:24

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

nikitasius Jul 27 2016 at 12:32

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

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

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

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

nikitasius Jul 27 2016 at 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 Jul 27 2016 at 15:41

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

nikitasius Jul 27 2016 at 16:38

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

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

noeer Jul 27 2016 at 16:59

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

noeer Jul 27 2016 at 01:25

Что значит

И снова:

edejin Jul 26 2016 at 21:36

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

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

noeer Jul 26 2016 at 21:56

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

franzose Jul 27 2016 at 05:28

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

LouD Jan 7 2019 at 10:35

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

Show the best of all time