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

Этот формат, как и формат GIF, позволяет использовать про-

зрачность (не альфа-каналы), но в большинстве случаев превосходит GIF

по качеству сжатия итогового файла. Достигается это за счет более совер-

———————— Page 27————————

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

шенной методики сжатия (фильтрации), которая охватывает и горизон-

тальные, и вертикальные повторения, а также хорошо работает с градиен-

тами.

? Анимированные изображения

Единственным кроссбраузерным форматом, позволяющим отобра-

жать анимацию в изображениях, является формат GIF. Однако уже в бли-

жайшем будущем ему может составить конкуренцию развивающийся

формат APNG. Подробнее об этом формате можно узнать в разделе 3.3.

? Иконка веб-сайта (favicon.ico)

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

большинство современных браузеров могут использовать в качестве

иконки изображение любого поддерживаемого ими формата. Более по-

дробно о применении favicon.ico было рассказано в книге «Разгони свой

сайт», во второй главе.

Наибольшего эффекта от оптимизации можно достичь, только ис-

пользуя наиболее подходящий формат для каждого случая. Нередко раз-

деление сложных изображений (содержащих, например, полноцветное

изображение с некоторым количеством мелкого текста и полупрозрачную

рамку) на несколько отдельных изображений, накладывающихся одно на

другое, может существенно уменьшить размер веб-страницы.

Удобной программой для ручной оптимизации статических изобра-

жений в Windows и Mac OS является программа Adobe Photoshop, для ани-

мированных изображений — Adobe Fireworks. В операционных системах

семейства Linux одним из наиболее подходящих приложений является

Gimp.

О том, как можно автоматизировать оптимизацию изображений, рас-

сказано в третьей главе.

1.3.3. iOU?‡IAIEA EA·?UO?IO„O IO‰‡

Оптимизация верстки

Для уменьшения размера ко-

да следует использовать такие спо-

собы верстки, которые требуют ми-

нимум тегов HTML и правил CSS.

Так, семантическая верстка с при-

менением независимых блоков бо-

лее предпочтительна, чем верстка

вложенными таблицами с исполь-

———————— Page 28————————

7

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

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

имуществах можно узнать в статьях http://pepelsbey.net/2008/04/semantic-

coding-1/ и http://pepelsbey.net/2008/04/semantic-coding-2/.

Не стоит использовать в верстке атрибуты HTML и свойства CSS, зна-

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

target=”_self”.

Избыточного кода в CSS можно также избежать, приняв стандарт отоб-

ражения типовых элементов на веб-страницах, таких как заголовки, пара-

графы, списки, ссылки и т. д. Один раз определив стиль оформления ссылки

и параграфа, больше не придется описывать его для каждого нового блока.

Устранение встроенного в разметку кода

Суммарный объем кода можно также сократить за счет устранения

встроенного на веб-странице CSS- и JS-кода. Множество одинаковых ат-

рибутов style=”” в HTML-тегах за счет использования классов в боль-

шинстве случаев можно заменить единственным, общим для всех элемен-

тов CSS-селектором, а множество JavaScript-обработчиков (например, об-

работчиков onclick=””, onmouseover=”” и др.) — одним-единственным

обработчиком. Изменить верстку и JavaScript-логику в подобных ситуа-

циях, как правило, достаточно несложно.

Неиспользуемый код

Нередко на веб-страницах можно найти некоторое количество неис-

пользуемого кода, находящегося как в самом HTML-документе, так и во

внешних файлах.

Время загрузки этих страниц увеличивается на время загрузки неис-

пользуемых внешних файлов из сети или из кэша браузера и на время, не-

обходимое для разбора всех элементов DOM-дерева и CSS-правил, кото-

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

файлов ресурсов измеряется в сотнях килобайт, задержка может быть су-

щественной.

Если в файлах CSS и JS, подключаемых на веб-странице, большой

объем кода относится исключительно к другим страницам, следует пере-

распределить такой код по нескольким файлам, подключая их на страни-

цах по необходимости. Для обнаружения неиспользуемого на странице

CSS-кода можно воспользоваться дополнением Dust-Me Selectors для

Firefox (https://addons.mozilla.org/ru/firefox/addon/5392).

Оптимизация cookie

Сохраняя в файлах cookie лишь идентификаторы данных, хранящих-

ся на сервере, можно существенно уменьшить их размер.