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

В идеальной си-

———————— Page 29————————

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

туации, чтобы для передачи cookie потребовался лишь один пакет, его

размер должен быть не больше одного килобайта.

Сократить размер cookie также можно, гибко определяя содержащи-

еся в них поля. Если какие-то поля нужны лишь для ограниченного диа-

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

не для всех страниц сайта.

Для статического контента (например, изображений, файлов CSS и

JS) можно использовать отдельные домены, не передающие cookie вовсе.

1.4. iIAI??AIEA IOIE?AOU‚‡ A‡O?OOO‚

Размер HTML-документа обычно составляет порядка 10% от общего

размера страницы. Остальные 90% занимают вызываемые со страницы

внешние объекты (чаще всего это изображения, файлы CSS и JS).

Помимо непосредственной загрузки каждого внешнего объекта бра-

узеру необходимо совершить целый ряд дополнительных действий:

? определить IP-адрес сервера по его доменному имени;

? установить новое соединение с этим сервером;

? отработать возможные редиректы;

? отправить запрос на сервер;

? дождаться ответа от сервера.

Таким образом, из-за отсутствия этих временных издержек один

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

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

многие браузеры загружают внешние файлы JS строго последовательно,

Рис. 1.10. Влияние количества внешних объектов на скорость

загрузки веб-страницы

———————— Page 30————————

9

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

количество этих объектов способно существенно повлиять на скорость

загрузки веб-страницы.

Наибольший эффект от уменьшения количества запросов к серверу

ощутят пользователи с низкой пропускной способностью канала и боль-

шим временем отклика от сервера — обычно это пользователи мобиль-

ных устройств и коммутируемых соединений.

1.4.1. e·?A‰EIAIEA UAIOUO‚?? U‡EIO‚

Устранение фреймов

На веб-страницах не следует

использовать фреймы. При необ-

ходимости применения их число

должно быть минимальным.

Среди минусов фреймов: из-

быточные запросы к серверу, бло-

кирование события onload, а так-

же затруднения при поисковой

индексации и сохранении адресов

и состояний веб-страниц. Следует

также заметить, что тег iframe ис-

ключен из стандартов XHTML 1.0

Strict и XHTML 1.1.

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

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

мого, например, рекламный блок. В большинстве же случаев можно избе-

жать применения фреймов за счет разумного использования серверных

скриптов и техник AJAX.

Объединение файлов CSS

Уменьшить количество запросов к серверу можно за счет минимиза-

ции количества вызовов CSS-файлов. Оптимальное количество таких вы-

зовов — не более двух на страницу.

Не следует подключать на каждой веб-странице все использующиеся

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

страниц, вызывается только на них.

Разработчики, заботящиеся о доступности своих веб-страниц, часто

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

ройств просмотра веб-страниц. В этой ситуации в секции может

оказаться похожий набор вызовов:

———————— Page 31————————

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

media=» screen» />

media=»handheld» />

media=»print» />

Уменьшить количество запросов в этой ситуации можно, объединив

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

ройств отдельное правило @media.

На этапе разработки, чтобы легче сопровождать код и исключить его

избыточность, часто бывает удобно применять CSS-правило @import или

вызывать в HTML-документе больше число CSS-файлов. В такой ситуации

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

томатического объединения CSS-файлов и подстановки кода, вызываемо-

го свойством @import, чтобы уменьшить число запросов к серверу.

К сожалению, иногда для корректного отображения веб-страниц в

старых версиях браузера Internet Explorer требуется отдельный набор

CSS-правил.