Последнее время в инете стало появляться все больше публикаций про использование 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-ой версии я частенько встречаю приятные сюрпризы, которые делают мою работу интереснее.
РЕКЛАМА
Летайте самолетами аэрофлота
