CSS Sprites и data:URI, или Microsoft и весь остальной мир

Что видит пользователь каждый раз, когда набирает адрес вашего сайта в строке браузера? Белый экран. И чем дольше он его видит, тем с большей вероятностью уйдет с сайта и никогда не вернется.

Стадии загрузки страницы

Если рассмотреть процесс загрузки страницы после ввода его адреса, то можно выделить 4 основные стадии:

1. Предзагрузка. Загружаются HTML- и CSS-файлы. Пользователь видит белый экран.
2. Интерактивная загрузка. Загружаются JavaScript-файлы. Пользователь продолжает видеть либо белый экран, либо в браузере появляются блоки страницы. Страница загружается «на глазах» у пользователя. На самом деле, основная часть страницы уже загрузилась. Просто некоторые скрипты, которые не обеспечивают пользователя содержанием, продолжают приходить с сервера.
3. Полная загрузка. Загружаются картинки и Flash-анимация. Они заполняют отведенные им места на странице. Пользователь ощущает, что страница загрузилась.
4. Пост-загрузка. Страница визуально полностью загрузилась у пользователя. Некоторые дополнительные ресурсы запрашиваются (в невидимом для пользователя режиме) с сервера для ускорения загрузки дальнейших страниц или поведения текущей страницы.

CSS Sprites

Если говорить об ускорении третьей стадии (основной загрузки), то здесь одной из основных технологий будет CSS Sprites. CSS Sprites уже отлично себя зарекомендовали в этом качестве. Однако у нее вместе с очевидными плюсами (значительное уменьшение запросов к серверу, кроссбраузерность) есть и несколько минусов. В частности:

• Несемантическая верстка в случае использования сложных спрайтов.
• Невозможность комбинирования нескольких осей повторения.
• Тяжесть изменения картинки в случае сложной геометрии.
• Отображение неверного фона при масштабировании.

data:URI

Есть ли выход из этого положения? Да, есть. Это технология data:URI, которая позволяет включать фоновые изображения прямо в CSS-файл в base64-виде. Плюсы данного подхода очевидны: не нужно «склеивать» несколько картинок в один файл, есть возможность объединять различные оси и анимированные с обычными изображениями. Полностью разделение содержания (семантики) и представления (дизайна). И т.д.

Но есть и ложка дегтя: IE вплоть до версии 7 не поддерживает data:URI. IE8 уже да, но все остальные IE нет. Что делать?

mhtml

Нам на помощь приходит технология mhtml (MIME HTML), которую поддерживает только IE (почти в полной мере). Она позволяет включать base64-данные в CSS-файл в виде комментариев. В этом случае сам файл выступает в двух ипостасях: как таблица стилей и как хранилище фоновых картинок.

Если мы объединим эту технологию с data:URI, то все будет хорошо. Правда?

Проблема 1: долгая предзагрузка

В случае включения фоновых картинок прямо в CSS-файл последний заметно увеличивается в размере (даже при использовании gzip-сжатия). Это значительно увеличивает время предзагрузки (если фоновых картинок больше 10–15 Кб). И пользователь дольше видит белый экран. Опять все плохо. Как быть?

Возможным выходом из сложившейся ситуации может стать подключение CSS-файла с фоновыми картинками по комбинированному событию window.onload, что вынесет загрузка элементов дизайна в ту область, где она изначально находилась: на стадию полной загрузки страницы или даже в пост-загрузку. В данном случае мы получаем полную аналогию метода CSS Sprites только без заявленных выше неудобств.

Проблема 2: выключенный JavaScript

Описанный выше прием позволит облегчить загрузку только пользователей с включенным (или поддерживаемым) JavaScript (их порядка 98-99%). Однако в ряде проектов это может быть недостаточно. Для оставшихся пользователей мы можем через noscript подключить нужным нам файл (и конкретно для них замедлить предзагрузку) или поместить вызов этого файла перед </body> (что в ряде случаев может быть аналогично подключению стилей в head).

В качестве еще одного варианта можно рассмотреть создание единственного CSS-файла для таких пользователей, чтобы максимально ускорить им загрузку в случае отключенного JavaScript.

Проблема 3: Safari и window.onload

Из-за того что Safari отличается алгоритмом обновления страницы (что позволяет значительно ускорить отображение самих страниц), для этого браузера не удается загрузить дополнительные стили после отображения первоначальной картинки (на стадии полной загрузки страницы). В этом случае Safari блокирует отрисовку картинки на экран и ожидает загрузку нового файла стилей.

На данный момент для Safari мы можем безболезненно загружать дополнительные файлы стилей только по полному событию window.onload.

Проблема 4: Microsoft, IE7 и Windows Vista

В результате проведенных исследования удалось установить, что в связи с проблемами безопасности в Vista mhtml-технология для отображения фоновых изображений не поддерживается. В этом случае единственным выходом будет подключения конкретно для этого браузера (через JavaScript) общего файла (с использованием CSS Sprites).

Заключительный бонус

Буквально несколько дней назад был запущен ресурс, посвященный автоматизации перевода фоновых картинок в кроссбраузерный data:URI формат (с использованием всех методов, описанных выше). Это data:URI (CSS) Sprites — duris.ru. На данный момент этот инструмент находится в стадии бета-тестирования.

Также сейчас доступна электронная версия книги «Разгони свой сайт», в которой описаны все наиболее актуальные приемы клиентской оптимизации и приведен разбор текущих гигантов Рунета с точки зрения скорости их загрузки в клиентском браузере. Появление книги в магазинах планируется 20 февраля 2009 года, сейчас доступен предзаказ.

Спасибо за внимание. Буду рад ответить на ваши вопросы.

Все комментарии (habrahabr.ru)