Реактивные веб-сайты

Эта технология, основан-

ная на широко известном

алгоритме DEFLATE, существует

уже более 13 лет. По данным ком-

пании Google, среди всех исполь-

зующихся на сегодняшний день браузеров 99,8% распознают gzip-сжатие

HTML-документов и файлов CSS и JavaScript.

———————— Page 25————————

24 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Со времен появления поддержки протокола HTTP/1.1 браузеры ука-

зывают в HTTP-запросах поддерживаемые типы сжатия, устанавливая за-

головок Accept-Encoding:

Accept-Encoding: gzip, deflate

Если веб-сервер получает такой заголовок в запросе, он может при-

менить сжатие ответа одним из методов, перечисленных клиентом. От-

правляя ответ, сервер уведомляет клиента о том, каким методом сжимал-

ся ответ, при помощи заголовка Content-Encoding.

Content-Encoding: gzip

Для использования технологии gzip-сжатия обычно достаточно про-

писать несколько строк в конфигурационном файле сервера, и общая ско-

рость загрузки может возрасти на десятки и даже сотни процентов — раз-

мер сжатых файлов обычно не превышает 20% от исходного размера.

С использованием gzip-сжатия нагрузка на браузеры пользователей

практически не возрастает, поскольку восстановление сжатого файла ма-

лого размера (а на веб-страницах размеры текстовых файлов измеряются

в килобайтах) происходит почти мгновенно. Временные затраты возмож-

ны на стороне сервера, но только в случае динамического сжатия, т. е.

сжатия в реальном времени. В ситуации, когда динамическое сжатие ока-

зывает недопустимо большую нагрузку на веб-сервер, следует применять

статическое сжатие, т. е. сжатие и кэширование всех необходимых фай-

лов только при их изменении.

Используя gzip-сжатие, важно убедиться в том, что оно отключено

для изображений и других двоичных файлов. Поскольку эти файлы уже

сжаты, а их размер обычно существенно превышает размеры типичных

текстовых файлов, применение gzip-сжатия не принесет никакого выиг-

рыша в клиентском быстродействии веб-страниц, а лишь увеличит нагруз-

ку на сервер. Следует также обратить внимание на то, что сжатие эффек-

тивно только для файлов размером порядка одного килобайта и более.

Сжатие файлов меньшего размера ощутимого результата, скорее всего, не

принесет.

Достичь дополнительного выигрыша при сжатии файлов HTML и CSS

можно также за счет применения стандартов верстки, при которых везде,

где это возможно, используется один и тот же регистр, а все HTML-атрибу-

ты, CSS-свойства и другие подобные элементы разметки упорядочивают-

ся (чаще всего по алфавиту).

Сжатие текстовых файлов подробно рассмотрено во второй главе.

———————— Page 26————————

5

Обзор методов клиентской оптимизации 2

1.3.2. eOUEIEA‡?E? EAO·?‡EAIEE

За счет использования под-

ходящих графических форматов и

эффективного сжатия без потерь

суммарный размер страницы мо-

жет быть уменьшен иногда на 50%

и более.

Изображения, полученные с

фотоаппаратов или сохраненные

в некоторых графических редак-

торах, могут содержать много ки-

лобайт дополнительной информа-

ции, комментариев (т. н. метадан-

ных), а также избыточную цвето-

вую палитру.

Существует несколько графических форматов, поддерживаемых все-

ми современными браузерами: PNG-8, PNG-24, JPEG, GIF, ICO. Каждый из

этих форматов позволяет в определенных ситуациях получить значитель-

ный выигрыш в размере по сравнению с другими форматами. Основные

рекомендации для различных типов изображений приведены ниже.

? Полноцветные изображения, изображения с градиентами

Для полноцветных изображений с богатой цветовой палитрой (фото-

графий, сложных градиентов и т. п.) следует использовать формат JPEG

высокой степени качества. Необходимо помнить о том, что JPEG — фор-

мат сжатия с потерями, и чем выше степень сжатия, тем большее число ар-

тефактов появится на итоговом изображении.

? Полупрозрачные изображения

В случаях, когда для верстки требуются полупрозрачные изображе-

ния, следует использовать формат PNG-24, поддерживающий альфа-кана-

лы. Нельзя однако забывать о том, что браузер Internet Explorer 6 не под-

держивает полупрозрачность в таких изображениях и для их корректного

вывода следует применять фильтр AlphaImageLoader.

? Изображения с ограниченной цветовой палитрой

Для изображений с ограниченной палитрой следует применять фор-

мат PNG-8.