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