Разгоняем favicon.ico — это как?

В очередной презентации Yahoo! на тему клиентской производительности (часть 2) был поднят вопрос о favicon.ico. Они проводили несколько интересных фактов о данном явлении и давали пару советов. Процитируем их рекомендации.

www.mysite.ru/favicon.ico

  • Необходимое зло:
  • Браузер в любом случае ее запросит
  • Лучше не отвечать 404-ошибкой
  • Будут отправлены cookie
  • Не может быть в CDN
  • Мешается в последовательности загрузки ресурсов
  • Уменьшайте ее (<=1 Кб)
  • Использовать анимированные иконки ни разу не хорошо
  • Выставляйте заголовок Expires Запросы к favicon.ico составляют 5 -10% от общего числа запросов к сайту

favicon.ico, во-первых, запрашивается едва ли не один-единственный раз браузером при посещении сайта, во-вторых, загружается, игнорируя обычный порядок загрузки. Из чего можно заключить, что она не является обычной картинкой при загрузке сайта, поэтому в дополнение к уже имеющейся информации был проведен ряд дополнительных исследований, чтобы объединить все, что известно прогрессивному человечеству на данную тему. Однако в ходе изучения материала оказалось, что проблема совсем не так прозрачна, как представлялось изначально. Формат .ico предстал в новом свете, весьма выгодном для использования в Интернете.

Краткое описание формата

favicon.ico имеет формат .ico (на самом деле, такой формат есть, а соответствующий MIME-тип прижился не везде, при этом он объединяет несколько довольно специфических типов, подробнее можно посмотреть в статье на Wikipedia, http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29 ). С одной стороны, он позволяет представлять информацию без потерь (в отличие от JPEG). С другой стороны, он, фактически, аналог BMP, но на этом все сравнение быстро заканчивается.

Я не буду приводить точную его спецификацию (она не так сложна, и ее можно обнаружить, например, по следующему адресу: http://www.daubnet.com/formats/ICO.html ), однако, сразу в глаза бросилось две вещи: возможность использования индексированных цветов (ага, это уже почти GIF) и возможность использования линейного сжатия (а это уже почти PNG). Уже интересно? Тогда мы продолжаем. Собственно, следует эта информация из следующих частей формата: BitCount 2 bytes bits per pixel = 1, 4, 8 Compression 4 bytes Type of Compression = 0

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

После небольших поисков удалось собрать тестовое окружение под Firefox 3, использующее base64-кодирование картинки в виде .ico. Удалось сделать однотонное изображение (палитра 4 бита) размером в 318 байтов (против 894 стандартных, меньше почти в 3 раза). С палитрой в 2 бита возникли трудности под Safari, корректный результат получить не удалось, однако, возможно, его также можно использовать.

Может быть, кому-то покажется, что 576 байтов — это очень мало. Но стоит заметить, что, во-первых, некоторые иконки используют, фактически, только 2 цвета, поэтому их можно сжать до еще меньшего размера. Во-вторых, при больших размерах (32×32, 48×48) выигрыш будет таким же в процентах. Т.е. иконки в 16 Кб можно будет спокойно уменьшить раза так в 3-7. И это без учета вырезания неиспользуемых фреймов в них (ведь формат позволяет создавать анимированные иконки).

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

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

Палитра    Размер (в байтах)

2 бита  198

4 бита  318

8 бит  1406

24 бита  894

32 бита  1150

 Таблица 4. Размер файла favicon.ico 16×16 в зависимости от используемой палитры

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

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

В Wikipedia указывается, что вместо .ico можно использовать .png как наиболее перспективный из форматов, применяемых для сжатия изображения без потери качества. При соответствующем объявлении файла в секции head страницы позади планеты всей у нас остается Interner 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 Кб кода, который отрисуется у них в области 16×16 пикселей?) не стоит раздувать его размер без особой необходимости. Уважайте своих посетителей.

Posted in Разгони свой сайт.