Многим уже известна техника оптимизации сайтов на основе 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