«За бугром» все больше интересуются техникой Data:URI CSS Sprites


    Многим уже известна техника оптимизации сайтов на основе data:uri технологии. Последнее время все больше и больше к относительно новой технологии проявляется интерес мирового сообщества разработчиков. В интернете можно найти уже достаточно много статей на эту тему. Радует, что одним из первых, кто задумался серьезно о разработке кросс-браузерного data:uri это «наш человек» — Евгений Степанищев aka bolk. Ну так вот, речь не об этом, это так для истории…

    Наткнулся мне «забугорный» блог www.ravelrumba.com, автор которого последнее время активно занимается исследованием эффективности data:uri css sprites. О чем свидетельствует ряд интересных статей о его работе.
    CSS Images and Data URIs
    Data URIs for CSS Images: More Tests, More Questions

    Я решил поддержать его и провел анализ скорости загрузки разработанных им тестовых страниц.

    Мною была произведена серия запросов тестовых страниц с замером количества конектов и скорости загрузки.

    Оригинальный сайт


    lab2.ravelrumba.com/data-uri/org

    Результаты



    Средняя скорость загрузки ~ 4.8 секунд
    Кол-во запросов = 34

    Data URI CSS #1


    lab2.ravelrumba.com/data-uri/datauri-1

    Для генерации спрайтов использовалась разработка Css Embed

    В итоге все стили и спрайты включены в один результирующий css файл.

    Результаты



    Средняя скорость загрузки ~ 4.3 секунд
    Кол-во запросов = 3

    Data URI CSS #2


    lab2.ravelrumba.com/data-uri/datauri-2

    Для генерации спрайтов использовался онлайн сервис Duris.Ru

    В итоге стили разделены на основные и спрайты. Спрайты вынесены в отдельный css и подключаются в конце страницы. Также, два изображения превышающие размер 32KB в спрайты не включались, а были оставлены в файле основных стилей.

    Результаты



    Средняя скорость загрузки ~ 2.6 секунд
    Кол-во запросов = 6

    Выводы


    • Время загрузки страницы — datauri2 < datauri1 < original
    • Кол-во запросов — datauri1 < datauri2 << original
    • DOM ready — datauri2 = original < datauri1

    Однозначно можно сказать что, при использовании data:uri sprites вашему серверу станет на много легче по обработке кол-ва подключений (в данном примере в 5x-10x).
    А также при правильном использовании техники data:uri css sprites можно ощутимого ускорения общей загрузки сайта.

    Просьба — помоги себе и другим


    Зайти на тестовые страницы, и проверить у себя время загрузки, таким образом мы будем иметь более обобщенную картину. Результаты пишем в комменты. Интересует только время загрузки, не забывайте проводить серию загрузок, дабы устранить случайные задержки в канале. А также, не забываем перед новой загрузкой очищать кеш либо просто нажимаем Ctrl + F5.

    В целях экономии времени экспериментальные страницы разрабатывались без поддержки браузеров < IE8


    Результаты тестирования хабрюзерами


    GreLI o: 3.47 d1: 3.16 d2: 2.96
    art_linux Safari 4, Mac OS X 10.6 — o: 1.84 d1: 1.20 d2: 0.95
    freemandigger FF 3.5, Linux (Ubuntu) x86_64 — o: 2.91, d1: 2.22, d2: 2.34
    kolpeex Opera 10.10, Windows 7 — o: 2.66, d1: 1.82, d2: 2.03
    TecHMeaT Vista, Chrome 4.0.266.0 — o: 5.03, d1 2.74, d2 2.38
    SKYnv Opera 10.10, Windows 7 — o: 1.88, d1 0.65, d2 1.42
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

    • НЛО прилетело и опубликовало эту надпись здесь
        0
        тут вопрос именно в автоматизации, обычный спрайт надо руками генерить, а data:uri на автоматике. Не писал про это, думал и так понятно. Хотя есть и сервисы генерации обычных спрайтов (но и у них есть свои заморочки). Возможно в дальнейшем будет проведено исследование Standard Sprite vs Data:URI Sprite.

        время загрузки у себя отпишите
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            > Так есть же сервисы по генерации спрайтов
            да есть, но у них есть трудность в background-repeat

            > А data:uri слишком заморочено и в общем случае без JS
            вы заблуждаетесь, без JS работает во всех, включительно IE6
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                давно бы с удовольствием, проблема с IE7@Vista существует, кстати относительно data:uri css sprites на эту проблему как раз таки мы вышли из вот таких вот исследований. прочитайте серию предыдущий моих статей на эту, там детально все расписано что и как :)

                да и вообще в чему базар? не нравится data:uri, не трогайте его, а то можно навредить и себе и другим. Пользуйтесь руками, это ж хорошо когда есть возможность сидеть и все делать руками.
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    думаете мне они нравятся? :) сам в шоке, взяли и испортили такую сказочную технику, это я про ИЕ. Ну они не только это испортили… хотя они многое и придумали. Такова ситуация, ничего не поделать.

                    В добавок, лично я разрабатываю проекты только JS enabled (сложные одностраничные веб-приложения), так что лично для меня это не помеха, уверен есть много других разработчиков кому пригодится data:uri css sprites.
              +1
              > Хотя на мой взгляд осмысленное деланье руками — самое эффективное
              с точки зрения оптимизации да, с точки зрения работы — нет. кумарит парится вечно с этими спрайтами при каких-то изменениях в дизайне или в изображениях. поэтому народ и смотрит в сторону автоматизации процесса, нажал кнопочку и все готово.
              • НЛО прилетело и опубликовало эту надпись здесь
                  –2
                  согласен, и быстрее всего работают программы написанные на ассемблере.
                  • НЛО прилетело и опубликовало эту надпись здесь
              0
              эх, вот сейчас как выложу результаты с автогенерацией спрайтов через Web Optimizer :)

              А вообще, у меня чешутся руки показать, что data:URI — это зло :) Как только будет часа 2-3 свободного времени, накропаю статью :)
                0
                давай давай, мы с нетерпением ждем :)
            +1
            1.84, 1.20, 0.95
            Safari 4, Mac OS X 10.6
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                согласен, это всего лишь маленький тест, но его достаточно чтобы понять принцип.
                  0
                  только нельзя забывать, что бэкграунды напрягают браузеры сильнее простых имаджей. можно получить быструю загрузку и медленную отрисовку в браузере.
                  +1
                  Потестил у себя:
                  o: 2.91, d1: 2.22, d2: 2.46

                  хм, а у меня второй тест быстрее…
                  Mozilla/5.0 (X11; U; Linux x86_64; ru; rv:1.9.1.7pre) Gecko/20091210 Ubuntu/9.10 (karmic) Shiretoko/3.5.7pre

                  В целом всё было бы хорошо, если бы не IE…
                    –1
                    кешь чистили? + нужно серию провести (пару раз и выбрать среднее), может какая задержка была в канале.
                      +1
                      Конечно, делал по три запроса и вычислял среднее.
                      Перепроверил d1 — результат не изменился
                      d2 сделал 5 запросов: (2.36+2.36+2.35+2.19+2.45)/5 = 2.342

                      Может есть какая-то зависимость от 64bit…
                    0
                    Имхо, за бугром все меньше и меньше внимания оптимизации там, где это касается трафика, там давным давно в порядке вещей фон страницы размером в 2mb, или прикрутить jquery ui размером > 200 kb для реализации простого попап окна, эта тема скорее актуальна для наших «фронтовых дорог» и все еще почему-то живых модемных линий.
                      0
                      да, но почему тогда они поднимают эти вопросы? к примеру тот же Steve Sounders, + www.aptimize.com/ использует data:uri, правда у них реализация кривая
                        0
                        к чему этот пример, это происходит массово?
                        Страница гугла не валидуется, то мы можем сказать, что весь «забугор» клал на вэтрицэ? Может не будем на точечных попаданиях ставить общее мнение и тенденции.
                          0
                          заголовок статьи гласит не про массовый переход, а про увеличение интереса, вот вам пожалуйста пример сегодня на главной ajaxian.com ( ajaxian.com/archives/performance-of-data-uris )
                      0
                      Извиняюсь за дурацкий вопрос, но как это отражается на кешировании?
                        0
                        отлично, можно кешировать css с картинками внутри, никаких проблем.
                        +1
                        Opera 10.10 Windows 7:

                        original: 2663ms
                        datauri1: 1821ms
                        datauri2: 2035ms
                          +1
                          Vista, Chrome 4.0.266.0 — o: 5.03, d1 2.74, d2 2.38
                            +1
                            Opera 10.10 build1893
                            Windows 7:

                            orig: 1879ms
                            du1: 652ms
                            du2: 1425ms
                              0
                              Да раз у него сайт весит 400 Кб, что тут оптимизировть, его сразу на помойку можно выбрасывать, я считаю. И вообще, все джипегами сделано, явно какой то индус-филансер верстал.
                              0
                              А для простой генерации css sprites что можно использовать?
                              0
                              Это всё классно, но:

                              1. Base64 весит больше, чем просто картинки.
                              2. Если у вас разные элементы имеют одинаковые фоны, то у вас начинаются дубликаты картинок в CSS и нефиговое увеличение размера.
                              3. Проблемы с браузерами (выше обсудили).

                              На мой взгляд лучше использовать обычные спрайты, разбив их на два-четыре файла (один с горизонтальными тянучками, один с вертикальными и ещё что-нить). В итоге будет минимум запросов, отсутствие дубликатов, нормальное кеширование, нет проблем с браузерами, все счастливы. А datauri-ками лучше иконки вставлять.
                                0
                                1) + gzip ~= как обычный размер изображений
                                2) вот как раз таки и нет, это зависит от реализации, duris.ru автоматически вычисляет дубли и оптимизирует стили к одному изображению, т.е. повторений нет
                                3) решаются, кроме IE7@Vista

                                пользуйтесь на здоровье стандартными спрайтами, я не против
                                  0
                                  оптимизация идёт за счёт множественных классов. в один прекрасный день картинки могут поменятся и придётся кочевряжить CSS. помоему не лучший вариант.
                                    0
                                    результирующие css собираются автоматически, никакой головной боли.
                                      0
                                      тады ок.
                                • НЛО прилетело и опубликовало эту надпись здесь

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

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