Отложенная загрузка картинок и фреймов, ускорение загрузки страниц

С недавнего времени на сайтах, созданных на платформе Cataloxy, а также на всех версиях самого Cataloxy, работает алгоритм отложенной загрузки картинок и фреймов (например, при вставке видеороликов). Эта функция позволит сократить количество запросов к серверу во время загрузки страницы и ускорит процесс загрузки.

В каких ситуациях использование отложенной загрузки будет особенно эффективным?

При запросе какой-либо страницы, например, страницы товаров и услуг компании, на страницу выводится 24 (или более) объявления, к каждому из которых подгружается титульная картинка. То есть, пока браузер не загрузит все картинки, страница не считается загруженной. В плане оптимизации чем быстрее загружаются страницы сайта, тем приятнее на сайте находиться пользователю, потому что он, как минимум, теряет меньше времени, меньше расходует интернет-трафика. Особенно эти факторы могут быть заметны в случае мобильного подключения, когда стоимость трафика высокая, а скорость загрузки (например, в определенном местоположении) оставляет желать лучшего.

Вы не используете модуль товаров и услуг и думаете, что Вас это не касается? Это мнение ошибочно, так как Вы наверняка вставляете в текст новостей или статей картинки со сторонних сайтов или социальных сетей. Зачастую это полноразмерные, довольно крупные изображения, а не просто мелкие «превьюшки». Поэтому мы позаботились о том, чтобы данная особенность распространялась и на картинки внутри текстов.

Или, например, предположим, что вы вставили несколько видеороликов в страницу. Каждый ролик подгружается в тег IFRAME и такой процесс создает достаточную нагрузку на процессор компьютера. К тому же еще до показа ролика должен быть загружен графический файл c заставкой, и, если человек даже не прокрутил страницу до самого ролика – так зачем же нам расходовать время и ресурсы на подготовку его показа?

Но с функцией отложенной загрузки мы просто откладываем данные замедляющие факторы «до востребования».

Давайте рассмотрим подробнее принцип работы.

Все довольно просто. Чтобы на любой странице в интернете отображались картинки в код страницы в нужном месте вставляется тег IMG, где указывается атрибут src, ссылающийся на адрес расположения картинки в интернете (ссылка на картинку). При отложенной загрузке мы подставляем ссылку на картинку не в стандартный атрибут src , а в нами задуманный, например, src-original. То есть если загрузить такую страницу, то вместо картинки просто отобразится пустота. И тут в работу подключается простой скрипт, который при первой загрузке страницы, а также при ее прокрутке пользователем вниз, находит все подобные картинки или фреймы (которые на текущий момент должны быть видны) и подставляет в атрибут src значение ссылки на картинку src-orginal, тем самым заставляя картинку загрузиться в самый подходящий момент. Как мы видим, все довольно просто, а главное – полезно.

Но как же поисковые системы отнесутся к такой отложенной загрузке? Будут ли они индексировать такие картинки для их показа в своих результатах поиска по картинкам?

Это действительно важный и резонный вопрос. Мы уделили ему особое внимание и в итоге нас посетила замечательная мысль, работоспособность которой нам подтвердили и сотрудники компании Яндекс. Помимо картинки с пустым src рядышком мы вставляем полный код картинки, но заключенный в теги noscript. Любая информация, обособленная данным HTML-тегом, обрабатывается браузерами только в случае отключенного javascript, но при этом поисковыми системами она читается в обязательном порядке. Это как раз то, что нам и надо! Если у пользователя включен javascript (это 98% пользователей), он будет работать с отложенными загрузками. Если же javascript отключен, то отложенные картинки он так и не увидит, а вот их соседние копии с правильным адресом как раз и будут загружены!

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

Картинкам, которые будут загружаться «отложенно» мы сразу присваиваем какой-нибудь класс. Например, мы используем слово “waitload”. В css прописываем .waitload{display:none}, а уже в момент, когда нужно показать картинку принудительно меняем значение: css.display = ‘inline’. Эта особенность нужна в тех редких случаях, когда для отложенных картинок по умолчанию вы задаете ширину или высоту, а javascript у пользователя действительно отключен. Тогда если не скрывать отложенные картинки заранее вышеописанным способом, около оригинальных картинок из noscript место будут занимать пустые квадраты/прямоугольники. Именно предварительным сокрытием обрабатываемых картинок мы и решаем данный нюанс.