Отзывчивость интерфейса веб-сайта при загрузке страницы 13.05.2015

Любому человеку, занимавшемуся поддержкой интерфейсов сайтов интернет магазинов, знакома проблема скорости загрузки страниц сайта. Причинами медленной загрузки страниц могут служить многие факторы — от структуры и объема данных, необходимых для ее формирования, и технической оснащенности серверной стороны, до верстки самой страницы (да, иногда плохая верстка может испортить не только внешний вид сайта, но и отправить в глубокий нокаут браузер клиента — в далеком 2005 году один неправильно закрытый тег в шаблонах популярного тогда форумного движка IPB увеличивал загрузку страницы в среднестатистическом браузере в буквальном смысле на пару минут).

Причин много, но чаще всего со стороны команды, сопровождающей проект, нарекания вызывает код, размещенный на сайте для сбора статистики партнерами проекта, всевозможными рекомендательными сервисами и т.д.

Обычно подобный код размещается непосредственно в коде страниц и может вызывать увеличение времени загрузки страницы уже на стороне клиента. Связано это может быть, например, с плохой доступностью сервисов партнера в сети клиента. Допустим, по какой то причине админы в сети у клиента закрыли доступ к одной из рекламных сетей, используемых у вас на сайте. В принципе, такой ход может иметь непредсказуемые последствия — от простого неотображения рекламных блоков до полного зависания страницы. Увеличение времени загрузки страницы здесь еще полбеды. Как правило, инициализация интерфейса веб-сайта не предусматривает большого промежутка времени между началом отображения контента страницы и ее окончательной загрузки, и, поэтому, очень вероятно, что в таком случае ваш клиент будет наблюдать отобразившийся, но нерабочий интерфейс. К какому выводу придет клиент решать уже вам.

С подобной проблемой мне пришлось столкнуться в процессе автоматического тестирования одного из веб-сайтов. В офисной сети в качестве экономии трафика (или чего то в этом роде) был закрыт доступ к ряду ресурсов, среди которых оказались и некоторые наши партнеры. В результате такого ограничения доступа, браузер Firefox, на базе которого проводилось тестирование, не мог корректно обработать событие окончания загрузки страницы, и большая часть навигации, которая была завязана на это событие, накрывалась медным тазом.

Как нетрудно заметить, проблема с навигацией в нашем случае была так же обусловлена привязкой ее инициализации к событию загрузки структуры документа, — что является очень распространенной практикой — отложить выполнение JavaScript-кода до полной загрузки документа.

Решение проблемы достаточно просто, но неочевидно с первого взгляда. Назовем код, отвечающий непосредственно за работу вашего сайта полезным кодом, а все партнерские счетчики и т.д. — просто счетчиками. Так вот, идея очень проста: полезный код должен выполниться ДО кода счетчиков. А это означает, что теперь ориентироваться на событие загрузки структуры документа уже нельзя.

В самом простом случае весь код счетчиков вставляется непосредственно перед закрывающим тегом body. И непосредственно перед этим блоком кода вставляется код запускающий инициализацию интерфейса — что это будет, или непосредственный вызов какой либо процедуры или метода — решать уже вам.

При таком подходе весь полезный код будет выполнен до подключения счетчиков, а к чему оно приведет уже неинтересно, — клиент получит рабочий интерфейс и останется доволен.

by 13.05.2015