CSS: все о сжатии

[k0rzhik]

Большое спасибо за пост.
Даже не знаю, что в комментариях написать, не дополнить, не придраться ;)
Остается надеяться на выход в свет статьи «PHP: все о сжатии» =)

[ProRunner]

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

PS. Внезапно обнаружил, что ещё не поставил  sunnybear-у плюс. Исправляю этот недостаток :)

[k0rzhik]

Я бы с большим удовольствием сделал тоже самое, но, увы, не могу, пэтому просто проголосовал за пост :)

[k0rzhik]

Ну вот я только первый набрал карму, и поставил автору плюс а мне сразу карму вниз опустили.

[k0rzhik]

И я поставил плюс :)

[Rational_Yurij]

Да, по логике это должны были быть не графики, а столбчатые диаграммы, или жирные точки. В качестве подписей также можно было бы использовать не 5-значные числа - номера тестовых CSS-файлов, а 1,2,3... отдельно расшифровав, какой файл первый, какой второй и т.д...
Не помешало бы и отсортировать исходные CSS хотя бы по размеру, или по степени сжимаемости... тогда все же графики приняли бы слегка осмысленный вид.

[sunnybear]

линии или столбчатые диаграммы — это уже вопрос предпочтений. Жирные точки точно не катят, глаз будет теряться.

По поводу подписей: сортировка по размеру ничего не дает, только теряется "общая монотонность" у линий. Ссылки на все файлы приведены, при желании можно поставить соответствие по размеру (он уникален).

Также есть ссылка на полный архив примеров — можно при большом желании самому все перепроверить/нарисовать/порадоваться :)

Если вы можете более подробно аргументировать какой-то пункт или привести доводы в пользу вывода итоговой таблицы (полный размер где-то 13х30, сплошные числа) в каком-либо другом виде, буду признателен.

[Rational_Yurij]

Просто графики традиционно применяются для отображения функций непрерывных на участке (или непрерывных на всей области определения) с упорядочиваемыми аргументами. Т.к. область определения - 13 точек, к тому же аргументы неупорядочиваемы, более корректно ставить столбики, которые это все дело будут подчеркивать.
соответствия между "...таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446." и числами в подписях графиков снизу до сих пор не могу усмотреть.
общей монотонности у линий нет, а вот чтобы она появилась, можно отсортировать файлы по степени сжимаемости.
Можно вывести в виде трехмерной столбчатой диаграммы (по трем осям "файл", "алгоритм сжатия", "эффективность")

[s1b]

Хорошая статья. Спс.

Одно не ясно - использовался всё таки сам tidy или tidy css? Данные на графиках и в статье разнятся. Вообще-то основная функция расширения Tidy - красивое форматирование и подгон под стандарты выходящего кода.

[Angerslave]

Думаю, что выводы были достаточно предсказуемы. Уже давно в проектах использую систему отдачи сжатых css и js.

[Fade]

Только задумался об этом - а тут и вы. Сэкономили мне массу времени на поиск. Спасибо.

[Shiz]

классно и подробно написано. спасибо.

[ElenaHell]

вот меня интересует: существуют ли "подводные камни", на которые можно наткнуться, используя сжатие?

[sunnybear]

сжатие или архивирование? архивирование можно использовать, практически, безопасно, если обеспечить редирект на полную версию для соответствующих браузеров.

сжатие можно быть плохо группировкой селекторов и убиванием хаков, но это тоже обходится аккуратным исключением таких хаков из исправлений. В крайней случае, можно просто заgzip'ить.

[sunnybear]

По поводу архивирования в ссылках дана статья
http://webo.sunnybear.ru/articles/habrah…
она, наверное, ответит на большинство вопросов

[romy4]

на счёт "лишних символов по спецификации": такой ход может серьёзно испортить дизайн, ведь некоторые браузеры не будем говорить какие очень требовательны к пробелам в местах, где они не обязательны.

[Rational_Yurij]

(долго всматриваясь)
Так, я что-то совсем не понял, в тексте у вас ссылки на одни CSS, под графиками совсем другие числа, ни одно не совпадает, объясните, что Вы с чем сравнивали и что чем обрабатывали...
Работу вы провели большую, но результаты предоставили совершенно неудобоваримо. =(

[sunnybear]

каюсь, замучился сливать картинки на хабр, ибо у последнего глюки при использовании Google Charts, а правки были... Сейчас подписи исправил везде

[denver]

Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными

Что по Y, коэффициент сжатия? или обратный ему?
Что по X? какие-то случайные числа, которые к динамике не относятся (С ходу ищется какая-то тенденция, которой там нет)
На легенде dashed и solid не различаются, только логику и здравый смысл можно догадаться где какие значения.
Я бы не придерался, но раз уж вы боретесь против неинформативных таблиц :)

[sunnybear]

цитирую

Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.

[alexbig]

спасибо за статью и потраченное время.
а графики действительно нужно столбцами было сделать. так, на будущее ;-)

[sunnybear]

вы можете пример через Google Charts дать? картинки через Charts выложены здесь
http://webo.sunnybear.ru/articles/habrah…

[alexbig]

хм, на вашем сайте на #393939 фоне они смотрятся лучше, но теряются оси.
пройдясь по докам, я предположу, что можно было использовать cht=bvs. правда тогда мы ограничены в цвете, но его можно подправить в любом редакторе, правда тогда нам нужно время, но можно не попить сегодня кофе, правда тогда мы уснём на работе, но… и т.д. :)

[sunnybear]

я попробовал для простейшего случая, но мне сдается, что так еще меньше становится понятно.

[alexbig]

конечно так не понятно :-) это я тоже получил.
во-первых, не понятно почему больше 100 стало... надо играться с маштабом

[wonderworld]

Leon Chevalier of Aciddrop.com has just released a free script that can considerably speed-up your website or blog's load time. PHPSpeedy works by making fewer HTTP requests, adding a far-future expires header, Gziping page components and minifying Javascript, CSS and HTML.

The end results are pretty stunning, in Chevalier's test (available at his site), a 271 KB page with 14 requests took 4.44 seconds to load. The same page after the modifications weighed in at 49 KB and just 4 requests, for 1.1s load time.

http://aciddrop.com/php-speedy/