Как стать автором
Обновить

«За бугром» все больше интересуются техникой 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
Теги: клиентская оптимизацияdata:uricssspritesweb-разработкаoptimization
Хабы: Клиентская оптимизация
Всего голосов 55: ↑50 и ↓5 +45
Комментарии 42
Комментарии Комментарии 42

Похожие публикации

Лучшие публикации за сутки