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

    После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.

    В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.

    График сжатия CSS-файлов

    читать дальше на webo.in →
    Поделиться публикацией

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

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

        PS. Внезапно обнаружил, что ещё не поставил посмотреть профиль sunnybear-у плюс. Исправляю этот недостаток :)
          –2
          Я бы с большим удовольствием сделал тоже самое, но, увы, не могу, пэтому просто проголосовал за пост :)
            0
            Ну вот я только первый набрал карму, и поставил автору плюс а мне сразу карму вниз опустили.
            0
            И я поставил плюс :)
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Да, по логике это должны были быть не графики, а столбчатые диаграммы, или жирные точки. В качестве подписей также можно было бы использовать не 5-значные числа - номера тестовых CSS-файлов, а 1,2,3... отдельно расшифровав, какой файл первый, какой второй и т.д...
              Не помешало бы и отсортировать исходные CSS хотя бы по размеру, или по степени сжимаемости... тогда все же графики приняли бы слегка осмысленный вид.
                0
                линии или столбчатые диаграммы — это уже вопрос предпочтений. Жирные точки точно не катят, глаз будет теряться.

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

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

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

              Одно не ясно - использовался всё таки сам tidy или tidy css? Данные на графиках и в статье разнятся. Вообще-то основная функция расширения Tidy - красивое форматирование и подгон под стандарты выходящего кода.
                0
                Думаю, что выводы были достаточно предсказуемы. Уже давно в проектах использую систему отдачи сжатых css и js.
                  0
                  Только задумался об этом - а тут и вы. Сэкономили мне массу времени на поиск. Спасибо.
                    0
                    классно и подробно написано. спасибо.
                      +1
                      вот меня интересует: существуют ли "подводные камни", на которые можно наткнуться, используя сжатие?
                        0
                        сжатие или архивирование? архивирование можно использовать, практически, безопасно, если обеспечить редирект на полную версию для соответствующих браузеров.

                        сжатие можно быть плохо группировкой селекторов и убиванием хаков, но это тоже обходится аккуратным исключением таких хаков из исправлений. В крайней случае, можно просто заgzip'ить.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +1
                            По поводу архивирования в ссылках дана статья
                            http://webo.sunnybear.ru/articles/habrah…
                            она, наверное, ответит на большинство вопросов
                            • НЛО прилетело и опубликовало эту надпись здесь
                        +1
                        на счёт "лишних символов по спецификации": такой ход может серьёзно испортить дизайн, ведь некоторые браузеры не будем говорить какие очень требовательны к пробелам в местах, где они не обязательны.
                          0
                          (долго всматриваясь)
                          Так, я что-то совсем не понял, в тексте у вас ссылки на одни CSS, под графиками совсем другие числа, ни одно не совпадает, объясните, что Вы с чем сравнивали и что чем обрабатывали...
                          Работу вы провели большую, но результаты предоставили совершенно неудобоваримо. =(
                            0
                            каюсь, замучился сливать картинки на хабр, ибо у последнего глюки при использовании Google Charts, а правки были... Сейчас подписи исправил везде
                            0
                            Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными


                            Что по Y, коэффициент сжатия? или обратный ему?
                            Что по X? какие-то случайные числа, которые к динамике не относятся (С ходу ищется какая-то тенденция, которой там нет)
                            На легенде dashed и solid не различаются, только логику и здравый смысл можно догадаться где какие значения.
                            Я бы не придерался, но раз уж вы боретесь против неинформативных таблиц :)
                              0
                              цитирую
                              Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.
                              0
                              спасибо за статью и потраченное время.
                              а графики действительно нужно столбцами было сделать. так, на будущее ;-)
                                0
                                вы можете пример через Google Charts дать? картинки через Charts выложены здесь
                                http://webo.sunnybear.ru/articles/habrah…
                                  0
                                  хм, на вашем сайте на #393939 фоне они смотрятся лучше, но теряются оси.
                                  пройдясь по докам, я предположу, что можно было использовать cht=bvs. правда тогда мы ограничены в цвете, но его можно подправить в любом редакторе, правда тогда нам нужно время, но можно не попить сегодня кофе, правда тогда мы уснём на работе, но… и т.д. :)
                                    0
                                    я попробовал для простейшего случая, но мне сдается, что так еще меньше становится понятно.
                                      0
                                      конечно так не понятно :-) это я тоже получил.
                                      во-первых, не понятно почему больше 100 стало... надо играться с маштабом
                                0
                                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/

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

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