Последнее время в инете стало появляться все больше публикаций про использование data:uri css sprites. Приведу две ссылки из блога Steve Souders, известный всему миру «оптимизатор» работающий в Google.

CSSEmbed — automatically data: URI-ize
Aptimize: realtime spriting and more

Наш отечественный герой «веб-оптимайзер» sunnybear намного раньше поднимал вопрос про использование data:uri в css и нами совместно был проведен ряд исследований. В то время вылезло много интересных моментов и особенностей о которых мы писали в предыдущих статьях. Последние эксперименты вскрыли ряд ранее неизвестных моментов по работе браузеров с data uri css спрайтами.


Проблема заключается в том, что при неумелом использовании техники data:uri css sprites возможно замедление скорости загрузки (отображения) сайта.

Рассмотрим на примере

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

Подключаем data:uri в HEAD

Если мы подключим оба файла стилей (основной и с base64 изображениями) в HEAD происходит «заморозка» отображения сайта до окончания загрузки этих стилей, а так как вес data:uri css файла большой, это время может быть довольно значительным.

Пример подключения в HEAD

Для большей наглядности, в указанном примере, сделана 10 секундная задержка на выдачу data:uri css.

Результаты по браузерам

Не отображают страницу до тех пор пока не закончится загрузка data:uri css:
— Chrome 3.0.195.33
— FF 3.5.5
— Safari 4.0.3
— IE 8.0.6001

Отрисовывает страницу сразу не дожидаясь окончания загрузки data:uri css:
— Opera 9.62

Подключаем data:uri в FOOTER (возле </body>)

Если мы подключим основной файл стилей в HEAD, а файл стилей с base64 изображениями в FOOTER «заморозки» не происходит, мы получаем нужный желаемый эффект оптимизации, страница грузится моментально быстро + по окончанию загрузки data:uri css (через таймаут) у нас отображаются все base64 изображения.

Пример подключения в FOOTER

Результаты по браузерам

Не отображает страницу до тех пор пока не закончится загрузка data:uri css:
— IE 8.0.6001

Отрисовывают страницу сразу не дожидаясь окончания загрузки data:uri css:
— Chrome 3.0.195.33
— FF 3.5.5
— Safari 4.0.3
— Opera 9.62

Выводы

При использовании техники data:uri css sprites крайне рекомендуется
1) разделять файлы основных стилей и стилей с base64 изображениями (data:uri css)
2) подключать data:uri css в конце документа, как можно ближе к закрывающему тегу </body>
3) использовать js-css мост (антифриз) для подключения data:uri css в ИЕ

P.S.: Я рад, за стабильность моих приключений с IE, даже в 8-ой версии я частенько встречаю приятные сюрпризы, которые делают мою работу интереснее.

РЕКЛАМА
Летайте самолетами аэрофлота