- находить необходимые элементы дерева объектов страницы, требующие динамического вмешательства, подключая все необходимые обработчики, события и т.д.;
- проверять наличие необходимых JavaScript библиотек и по мере надобности загружать их, проверяя, чтобы один и тот же код не загружался дважды;
- загружать в фоне внешние объекты, используемые на других страницах.
Оптимизация структуры веб-страниц. Стадии загрузки страницы. Обзор методов клиентской оптимизации
Стадии загрузки страницы
Распределенное хранение контента (CDN)
Во всех браузерах можно выделить несколько основных стадий загрузки страницы. Рассмотрим эти стадии:
1. Предварительная загрузка — предварительное отображение частично загруженной страницы без части рисунков и, в ряде случаев, без интерактивности, без части JavaScript-сценариев;
2. Полная загрузка страницы — отображение полностью загруженной страницы со всеми изображениями, с полностью функционирующими интерактивными частями страницы, полностью функционирующей логикой JavaScript;
3. Пост-загрузка страницы — фоновая дозагрузка и кэширование каких-либо внешних объектов, которые могут потребоваться пользователю при использовании каких-либо интерактивных функций данной страницы или при переходе на другие страницы сайта.
Оптимизация стадии предварительной загрузки
Стадия предварительной загрузки завершается лишь после получения браузером всех внешних файлов CSS и JavaScript из секции <head> HTML-документа. Это справедливо для превалирующего большинства браузеров.
Чтобы ускорить наступление предварительной загрузки следует снизить число вызываемых в заголовке страницы файлов до минимума, применить к ним динамическое сжатие, или, для еще большего быстродействия — статическое сжатие. При использовании статического сжатия серверу не придется тратить дополнительного времени на сжатие, он будет сразу готов отдать сжатый файл.
Загрузку файлов, не требующихся на стадии предварительной загрузки, имеет смысл перенести в стадию пост-загрузки.
Итогом первой стадии загрузки является доставленный и оформленный HTML-документ, с которым пользователь уже может взаимодействовать. Издержки на доставку всех
файлов JavaScript должны быть сведены к минимуму, так как на этом этапе они только помешают, замедлив отображение основного содержимого страницы.
Оптимизация стадии полной загрузки
При правильной группировке загружаемых внешних объектов и за счет использования закэшированных браузером объектов эта стадия может наступать значительно быстрее.
Необходимо сконфигурировать веб-сервер так, чтобы при запросе любой другой страницы пришлось запрашивать минимум дополнительных объектов. Должен быть также продуман вопрос фросированного сброса кэша в ситуациях, когда это будет необходимо.
Также при запросе большого количества изображений браузер неизбежно столкнется с ограничением максимального количества соединений на хост и для обхода этого ограничения необходимо настроить дополнительные серверы для выдачи статического содержимого. Число дополнительных хостов следует напрямую из числа статических файлов, поэтому надо определиться с ними на этапе автоматизации процесса публикации.
На этой же стадии можно использовать прием объединения изображений.
Оптимизация стадии пост-загрузки
К началу этой стадии у пользователя уже должна быть в распоряжении оформленная HTML-страница, на которой все ссылки и формы должны работать без JavaScript.
На этой стадии могут загружаться любые объекты, которые необходимы для этой или каких-либо других страниц.
При помощи специального обработчика JavaScript, который начинает работать на этой стадии возможно к уже существующей функциональности страницы добавить расширенные возможности в виде подсказок, дополнительных данных с сервера, какой-либо анимации и т.д.
Этот обработчик может производить следующие операции:
Об отложенной загрузке ресурсов, не требующихся на момент первого отображения страницы, можно прочитать в седьмой главе книги «Разгони свой сайт», а также в пятой главе этой книги.
Прогрессивный подход
Во многих современных браузерах, в частности в последних версиях браузера Safari активно внедряется прогрессивная логика отображения страницы.
С одной стороны, браузер не ждет последовательной и полной загрузки всех блокирующих вывод страницы внешних объектов, а с другой — не отображает неформатированную веб-страницу. Сочетая преимущества сразу нескольких подходов, браузер определяет, в какой момент, какую часть страницы можно отобразить, чтобы опыт пользователя был наилучшим.
Загрузка всех внешних объектов производится параллельно, и разбор содержимого не останавливается. При этом, если производится обращение к свойству стиля или макета, модуль JavaScript приостанавливает свою работу и ожидает загрузку всех незагруженных файлов CSS. Сразу, как только все стили загружены, выполнение сценария продолжается с того места, где оно было приостановлено.