Уменьшение размера

Боевое крещение

После небольших поисков удалось собрать тестовое окружение под Firefox 3, использующее base64-кодирование картинки в виде . ico. Удалось сделать однотонное изображение (палитра 4 бита) размером в 318 байтов (против 894 стандартных; меньше почти в 3 раза). С палитрой в 2 бита возникли трудности под Safari, корректный результат получить не удалось, однако, возможно, его также можно использовать. Может быть, кому-то покажется, что 576 байтов — это очень мало. Но стоит заметить, что, во-первых, некоторые иконки используют фактически только 2 цвета, поэтому их можно сжать до еще меньшего размера. Во-вторых, при больших размерах (32x32, 48x48) выигрыш в процентах будет таким же. Т. е. иконки в 16 Кб можно будет спокойно уменьшить раза в 3–7. И это без учета вырезания неиспользуемых фреймов в них (ведь формат позволяет создавать анимированные иконки).

Оптимальные размеры

Путем нехитрых вычислений заголовков, смещений и палитр можно получить некоторые цифры для размера наиболее стандартных favicon.ico (размер картинки — 16x16 пикселей). Для 32х32 и 48х48 размер файлов должен увеличиться примерно в 4 и 9 раз соответственно.

Для динамических иконок можно смело множить размер одиночной иконки на число фреймов, ибо заголовок у всего файла всего 62 байта, основная часть — именно данные.

PNG — быть или не быть?

В Wikipedia указывается, что вместо .ico можно использовать .png как наиболее перспективный из форматов, применяемых для сжатия изображения без потери качества. При соответствующем объявлении файла в секции head страницы позади планеты всей у нас остается Internet Explorer, так что данный подход может быть рассмотрен только как альтернативный. Подчеркну, что в среднем размер PNG-файла с иконкой не сильно меньше, чем ICO, но можно совершить дополнительные телодвижения, подключив одну иконку для всех браузеров, а вторую — только для IE.

А если еще и сжать?

Если мы не можем адекватно использовать нормальные форматы (PNG, GIF) для представления favicon.ico, то почему бы не задействовать gzip-сжатие для ее выдачи клиентскому браузеру? Можно. И все актуальные браузеры это понимают. Размер при этом составляет порядка 300 байтов (уменьшается в 3 раза по сравнению с исходным). Повторюсь, речь идет о возможностях для уменьшения favicon.ico в целом, а не об абсолютных цифрах. Если у вас на сервере уже используется сжатие, просто добавьте туда компрессию для image/x-icon и забудьте о ней.

data:URI нас спасет?

В качестве технологии экстремальной оптимизации можно рассмотреть возможность включения favicon.ico по протоколу data:URI (подробнее о нем написано в четвертой главе), чтобы отобразить страницу в клиентском браузере после первого запроса на сервер (подразумевается, что с сервера уйдет один-единственный HTML-файл, содержащий все необходимые составляющие в себе).

Однако для рядовых сайтов такой подход совершенно бессмысленнен, потому что процедура каждый раз будет отдавать пользователю лишние байты. Самым логичным его применением будут рекламные страницы, которые пользователь должен увидеть только один раз.

Заключение

Одним из наиболее спорных моментов в презентации Yahoo! было заявление о том, что favicon.ico "мешается" при загрузке страницы. Как можно судить по логам сервера при загрузке страницы, этот файл действительно запрашивается где-то в середине общего процесса загрузки, ориентировочно после CSS-файлов и до фоновых изображений, поэтому его оптимизация может оказаться одним из ключевых моментов для ускорения загрузки сайта в момент первого посещения (с пустым кэшем).

Также ради простого уважения к пользователям (зачем им загружать лишние 10 Кб кода, который отрисуется у них в области 16x16 пикселей?) не стоит раздувать его размер без особой необходимости. Уважайте своих посетителей.

Режем cookie

В качестве заключительного аккорда при рассмотрении уменьшения количества передаваемых данных между сервером и клиентом нужно обязательно упомянуть cookie.

Cookie являются одним из http-заголовков, которые браузер посылает на сервер, а сервер вправе им ответить (если копнуть глубже, то существует пара заголовков: Cookie и Set-Cookie — но в данном случае это не так существенно). Общий размер http-заголовков обычно не превосходит 500–1000 байтов, однако cookie могут существенно его увеличить (так как на них накладывается ограничение в 4 Кб).

При объемах полезной информации в несколько Кб размер cookie может оказать критичное воздействие на скорость передачи данных. Давайте рассмотрим, какие существуют способы уменьшения этих издержек.

Оптимизируем размер, зону и время действия

В большинстве случаев пользователю просто не нужно пересылать огромные массивы данных каждый раз — для него вполне возможно ограничиться только сессионным ключом. Исходя из этого стоит пересмотреть логику использования заголовков cookie и оставить только действительно необходимые.

Как вариант, можно устанавливать cookie только для определенных разделов на сайте либо ограничиваться только текущей сессией пользователя на сайте (которая не будет сохраняться при повторном заходе).

Также у cookie можно варьировать срок действия, что будет несколько нивелировать их влияние, если пользователь будет заходить на сайт достаточно редко: с каждым новым заходом cookie из браузера пересылаться не будут, однако их будет отправлять сервер. Поэтому данная мера производительность особо не повысит.

Хостинг для компонентов без cookie

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

В данном случае можно рассмотреть использование поддомена (что может оказаться бесполезным, если cookie выставляются на *.domain.ru ) или домена верхнего уровня (в таком случае придется регистрировать отдельный домен для хранения статических ресурсов). Однако в обоих случаях возможны проблемы с локальными прокси-серверами: они могут отказаться кэшировать файлы с физически разных доменов.