Lazy loading или ленивая загрузка для изображений
Загрузка сайта на скорости света - это ключ к его оптимизации, особенно в Google. Этот показатель влияет на:
- длительность визита посетителя на сайте;
- объем отказов;
- позицию в органической выдаче;
- цену клика в сфере платного поиска.
Замедляют загрузку страницы обычно вес огромных изображений и видеоролики. Чтобы ускорить процесс, Google предлагает через сервис PageSpeed Insights несколько способов оптимизировать медиа: их сжатие, кеширование, и алгоритм lazy loading или так называемую "ленивую загрузку". В этой статье мы подробнее расскажем об последнем методе:
- Что из себя представляет lazy loading?
- Кому необходима "ленивая загрузка"?
- Типы "отложенной загрузки".
- Советы от Google о использовании lazy loading.
- Какие сложности могут быть и как их предотвратить.
Что такое «ленивая загрузка»
Lazy loading - это техника ускорения загрузки медиа-контента, не высокого приоритета для отображения веб-страницы или взаимодействия с пользователями. В случае "отложенной загрузки", изображения не начинают загружаться до тех пор, пока они не станут необходимыми для пользователя. Настройки могут быть сделаны таким образом, что они будут визуализироваться при прокрутке до определенной части веб-страницы или при клике пользователя на них.
Рекомендуется включить "отложенную загрузку" для тех медиа-файлов, которые расположены за пределами видимой зоны экрана.
Элементы, находящиеся за приделами видимости или за кадром - это медиаконтент, который расположен ниже той области страницы, которую просматривает пользователь, или, как это определяет Web Tools, "ниже складки".
При начальной загрузке страницы, закадровые изображения невидимы для пользователей, поэтому нет необходимости их сразу же подгружать. Ведь это может привести к увеличению времени до становления страницы интерактивной (Time to Interactive), которое в настоящее время является ключевым показателем при оценке скорости загрузки на мобильных устройствах.
Для кого нужна «ленивая загрузка»
Мы настоятельно советуем применять ленивую загрузку на следующих веб-сайтах:
- где множество графических элементов на страницах (сервисы для обмена фотографиями в режиме онлайн, блоги с обилием медиа контента);
- если ваши конкуренты загружаются значительно быстрее;
- со средним рейтингом ниже 50 баллов по мнению PageSpeed Insights;
- работающих на слабом сервере, не обеспечивающем быстрого отображения страницы;
- если более половины посетителей просматривают страницы с помощью мобильных устройств;
- для которых PageSpeed Insights предлагает использовать ленивую загрузку.
Почему следует внедрить lazy loading
Существуют два важных аргумента для применения отложенной загрузки:
- Удержание посетителей на веб-сайте. Если ваш сайт предлагает статьи или различные веб-функции через JavaScript, обычно перед выполнением требуется загрузка объектной модели документа. Это существенно ускоряет процесс загрузки. В этом контексте lazy loading играет решающую роль в решении вопроса, останется ли пользователь на сайте или уйдет, предположив, что сайт не работает.
- Экономия интернет-трафика. Контент будет загружен только в том случае, если пользователь прокрутит страницу до него. Это особенно важно для тех, кто пользуется медленным или мобильным интернет-соединением и имеет ограниченный объем данных.
Виды отображения при «отложенной загрузке»
При реализации lazy loading существуют три способа представления контента:
- прокрутка;
- нажатие;
- режим в фоне.
Прокрутка обеспечивает загрузку медиаконтента только в момент, когда он попадает в зону видимости или когда пользователь прокручивает до определенной точки страницы, например, до середины, предыдущего изображения и т. д. Такой подход применяют на страницах СМИ с бесконечным скроллингом, на страницах с товаров и услуг в интернет-магазинах и каталогов.
Пользователь вначале обнаруживает место для изображения, в которое затем вставляются фотографии. При использовании второго способа сделать это (клик), содержимое начинает грузиться, если пользователь кликнет по ссылке «Подробнее» или на маленькое изображение.
Функция фоновой загрузки окажется полезной лишь для тех медиафайлов, которые представляют реальную значимость для пользователей в их дальнейшей работе. К примеру, это могут быть образцы заполненных документов, чертежи и прочее. Каким образом она запускается? Пользователь кликает на документ и оставляет его в состоянии открытого. Чтобы узнать, потребуется ли такая возможность для пользователя, необходимо проведение A/B тестирования на некоторых страницах, а уж затем этот функционал можно внедрить на прочих страницах сайта.
Рекомендации Google по реализации lazy loading для картинок
Советы Google по использованию изображений меняются в зависимости от способа интеграции медиаконтента на веб-сайт: используются ли они встроенными или через CSS. Для изображений, внедренных в тег , поисковая система советует использовать:
- обработчик событий (например, scroll или resize), как подходящий инструмент при необходимости соблюдения совместимости браузеров;
- API интерфейс наблюдателя за пересечениями - это избавляет от необходимости написания собственного кода, просто зарегистрируйте наблюдателя, хотя это может не работать во всех браузерах.
Изображения также могут быть внедрены на страницы через CSS. В отличие от тегов которые загружаются автоматически, несмотря на их видимость, загрузка изображений через CSS приводит к большому количеству предположений. Перед запросом данных из внешних источников, браузер анализирует применение CSS к документу.
Возможно применить это для задержки загрузки изображений в CSS. Используя JavaScript, можно установить момент, когда элемент попадает в зону видимости, и выполнить загрузку фонового изображения.
Готовые решения
В Интернете можно найти пять готовых подходов к реализации "отложенной загрузки" изображений:
Отложенная загрузка от Дэвида Уолша
Это классический и самый простой способ реализовать "отложенную загрузку". Действия скрипта заключаются в замене атрибута src на data-src в теге .
Пример реализации следующий:
Элементы img с атрибутами data-src скрываются при помощи CSS. Когда происходит загрузка изображений, они плавно становятся видимыми благодаря использованию переходов:
После этого, JavaScript присваивает всем тегам img атрибут src, значения которого соответствуют значениям атрибута data-src. После окончания загрузки всех изображений, атрибут data-src удаляется из img:
Прогрессивное улучшение загрузки от Робина Осборна
Разработчик предлагает метод "ленивой загрузки", основанный на принципах прогрессивного улучшения. В этой концепции lazy loading на JavaScript рассматривается как улучшение для HTML и CSS.
Необходимо отметить, что ленивая загрузка реализуется через скроллинг и не требует использования фреймворков или плагинов. В случае прогрессивного улучшения, пользователь увидит изображение, даже если скрипт был отключён или возникла ошибка, мешающая его выполнению.
Плагин bLazy.js на базе простого JavaScript
Стандартный способ реализации отложенной загрузки с помощью этого метода выглядит следующим образом:
Этот скрипт имеет ряд преимуществ, таких как: малый вес, способность работать с несколькими изображениями одновременно, что позволяет сократить трафик и уменьшить количество запросов к серверу. Отдельно стоит отметить, что он совместим с браузерами старых версий, включая IE 7 и 8.
jQuery плагин Lazy Load XT
Идеально подходит для создания собственного скрипта для "ленивой загрузки". Если вам необходимо применить lazy loading только для изображений, советуем использовать упрощённую версию.
Чтобы внедрить "отложенную загрузку" с использованием этого плагина, необходимо добавить библиотеку jQuery перед закрывающим тегом и указать jquery.lazyloadxt.js.
Пример использования:
Существует альтернативное решение, которое позволяет обходиться без использования всего плагина. Это упрощенный скрипт jqlight.lazyloadxt.min.js:
Плагин может активироваться автоматически или вручную. При ручной активации необходимо ввести:
Размытое изображение от Craig Buckler
Существуют разные способы реализации "ленивой загрузки" с эффектом размытия. Самый популярный и простой в применении - это подход Craig Buckler.
Данный метод отличается высокой производительностью: требуется всего немного больше 1 байта JS-кода и 463 байта CSS. Для его работы не требуются дополнительные фреймворки или библиотеки. Имеется прогрессивное улучшение для поддержки устаревших браузеров или для запасной загрузки картинок при неисправном JavaScript.
Вы можете ознакомиться с кодом в хранилище на GitHub.
3 плагина для WordPress
Кол-во установок: свыше 90 тысяч.Обновлялся последний раз: один год назад.
Данный плагин позволяет отсрочить загрузку изображений в записях, миниатюрах и пользовательских фотографиях. Контент будет загружаться тогда, когда пользователь прокручивает страницу и приближается к окну браузера.
Число установленных копий: превышает 20 тысяч.Последняя модификация: произведена 17 часов назад.
Данный плагин взаимодействует со всеми изображениями, включая миниатюры. Контент загружается исключительно при его появлении в поле зрения пользователя. Общий объем скрипта составляет 10 КБ. Работа не зависит от JavaScript-библиотеки jQuery.
Общее число установок: превышает 10 тысяч.Последний раз обновлён: 2 дня тому назад.
Это бесплатный плагин, функционал которого связан с предзагрузкой изображений на веб-сайт и демонстрацией экрана загрузки с указанием процентного соотношения готовности. Как только все элементы полностью загружены, экран исчезает.
Какие проблемы могут возникнуть при реализации
В случае некорректного применения ленивой загрузки, метод может случайно скрывать контент от поиска Google, что исключает возможность участия медиафайлов в поиске картинок. В настоящее время Google, в своем Руководстве, уточнил, что их механизм обхода сайта в состоянии обнаружить подобные элементы, но советует производить проверку реализации.
Как проверить, видит ли Googlebot изображение
В инструкциях Google представлены советы, как можно удостовериться в том, что поисковая система способна индексировать контент, загружаемый методом «ленивой загрузки».
Для проверки на локальной машине можно использовать скрипт Puppeteer. Для того, чтобы осуществить тестирование скрипта и запустить его, придерживайтесь следующих указаний:
После проведения проверки ознакомьтесь со скриншотами, созданными с помощью скрипта, и убедитесь в наличии всего контента, который должен быть проиндексирован Googlebot.
Заключение
«Ленивая загрузка» представляет собой одну из техник оптимизации процесса загружения веб-сайта. Ее применение сокращает время, необходимое для первого визуального взаимодействия пользователя с веб-страницей. В случае использования такого метода посетитель мгновенно получает доступ к функционалу сайта и не обязан ожидать загрузки каждого элемента страницы.