Уменьшение количества запросов. Объединение текстовых файлов. Обзор методов клиентской оптимизации
Объединение изображений
Встраивание внешних объектов в код веб-страницы
Исключение избыточных HTTP-запросов
Настройка кэширования
Устранение фреймовНа веб-страницах не следует использовать фреймы. При необходимости использования их число должно быть минимальным.
Среди минусов фреймов: избыточные запросы к серверу, блокирование события onload, а также, затрудненения при поисковой индексации и сохранении адресов и состояний веб-страниц. Следует также заметить, что тег iframe исключен из стандартов XHTML 1.0 Strict и XHTML 1.1.
Использование фреймов, как правило, оправданно только тогда, когда требуется безопасно вставить блок какого-либо стороннего содержимого, например рекламный блок. В большинстве же случаев использования фреймов можно избежать за счет разумного использования серверных скриптов и техник AJAX.
Объединение файлов CSS
Уменьшить количество запросов к серверу можно за счет минимизации количества вызовов CSS-файлов. Оптимальное количество таких вызовов — не более двух на страницу.
Не следует подключать на каждой веб-странице все использующиеся на сайте CSS-файлы, пусть тот код, который используется на ограниченном числе страниц, вызывается только на них.
Разработчики, заботящиеся о доступности своих веб-страниц часто предусматривают несколько файлов стилей для различных типов устройств просмотра веб-страниц. В этой ситуации в секции <head> может оказаться похожий набор вызовов:
<link type="text/css" rel="stylesheet" href="screen.css" media=" screen" />
<link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
Уменьшить количество запросов в этой ситуации можно объединив содержимое всех трех файлов в одном и используя для каждого типа устройств отдельное правило @media.
На этапе разработки, чтобы легче сопровождать код и исключить его избыточность, часто бывает удобно использовать CSS-правило @import или вызывать в HTML-документе больше число CSS-файлов. В такой ситуации перед публикацией на сервере можно использовать инструменты для автоматического объединения CSS-файлов и подстановки кода, вызываемого свойством @import для того, чтобы уменьшить число запросов к серверу.
К сожалению, иногда для корректного отображения веб-страниц в старых версиях браузера Internet Explorer требуется отдельный набор CSS-правил. В таких ситуациях часто прибегают к использованию условных комментариев. Лучшим примером их
использования является следующая конструкция, когда любой браузер запросит лишь один файл, предназначенный для него:
<!--[if gt IE 7]><!-->
<link rel="stylesheet" href="css/style.css"/>
<!--<![endif]-->
<!--[if lt IE 8]>
<link rel=stylesheet href="css/style.ie.css">
<![endif]-->
Объединение файлов JavaScript
По аналогии c рассмотренной выше ситуацией с файлами CSS на странице часто подключается несколько файлов JavaScript. Уменьшив их количество, можно значительно увеличить итоговую скорость загрузки страницы.
Весь код JS можно объединить в одном файле, загружаемом и кэшируемом единожды. Это лучшее решение, когда кода JavaScript на сайте относительно немного (порядка 50-100 килобайт в сжатом виде).
В ситуации, когда сайт представляет собой сложное веб-приложение, и объем кода превышает 100-150 килобайт в сжатом виде, отрицательной стороной объединения всего кода в одном файле будет то, что при запросе первой страницы пользователь неизбежно будет загружать часть кода, которую мог бы не загружать вовсе. Кроме того, в крупных веб-приложениях бывает не просто уследить за зависимостями модулей и часто нужный код повторяется и, разумеется, загружается пользователем несколько раз.
Допустим, на сайте существует определенная последовательность страниц, посещаемых каждым новым пользователем, причем для каждой отдельной страницы требуются разные модули JS. Для страницы P1 — модули F1, F2 и F3, для страницы P2 — модули F1, F3 и F4, а для страницы P3 — модули F1, F3, F5 и F6. Возможны три ситуации:
1. Объекты не объединены в один файл. При загрузке страницы P1 тратится время на загрузку объектов F1, F2 и F3, при загрузке P2 – только объекта F4 (F1 и F3 кэшируются после первой загрузки), а при загрузке P3 – F5 и F6.
2. Все объекты объединены в один файл. При загрузке страницы P1 тратится время на загрузку объектов F1-F6, но при загрузке всех остальных страниц внешние объекты не запрашиваются.
3. Объединены только модули, необходимые для текущей страницы. Для P1 загружаются объекты F1, F2 и F3, для страницы P2 – F1, F3 и F4, страницы P3 – F1, F3, F5 и R6. В этом случае, каждая отдельно взятая страница при пустом кэше будет загружаться быстрее, однако все три страницы подряд будут загружены медленнее, чем в двух описанных выше случаях, т.к. объекты F1 и F3 дважды повторно загрузятся вместе с другими объединенными объектами.
Выходом из положения может стать продуманное объединение модулей и выделение их ядра, т.е. набора модулей используемых на большинстве часто загружаемых пользователями страниц. В приведенном примере таким ядром будут объекты F1 и F3.
В сложных ситуациях задача разбиения может быть легко формализована и решена, однако на практике это почти никогда не требуется и для нахождения лучшего варианта объединения достаточно рассмотреть описанные выше варианты.
Более подробно о методах автоматического объединения текстовых файлов рассказано в четвертой главе.