Зачем и каким сайтам может быть полезной «ленивая» загрузка?

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


Чаще всего страницы долго грузятся из-за тяжелых картинок и видео. Google рекомендует несколько способов их оптимизации:
  • сжатие медиафайлов;
  • кэширование;
  • отложенную загрузку.
С последней и будем разбираться.

Lazy loading – что это такое?
«Ленивая» загрузка — это способ оптимизировать те изображения, которые не обязательны при загрузке страницы или взаимодействия с пользователями. Эти файлы будут отображаться, только если понадобятся посетителю, — при скролле или нажатии на элемент (в зависимости от настроек).
Отложенную загрузку рекомендуется применять для картинок вне экрана, то есть расположенных ниже области страницы, которую просматривает пользователь. И это логично: зачем загружать то, чего не видно, тем более это увеличивает время загрузки для взаимодействия.

Каким сайтам нужна отложенная загрузка?
  • На страницах, содержащих много изображений (фотоотчеты, статьи с большим количеством медиафайлов).
  • Если скорость низкая в сравнении с конкурентами.
  • Если по оценке PageSpeed Insights меньше 50 баллов.
  • Если сайт расположен на слабом сервере.
  • Если больше половины трафика идет с мобильных устройств.
Зачем ее использовать?
  • Чтобы пользователь мог взаимодействовать со страницей, пока страница грузится.
  • Сэкономить трафик, что особенно актуально с мобильным или слабым интернетом. Пока до изображения не доскроллят — оно не будет грузиться, съедая килобайты.
Как отображаются медиафайлы при «ленивой» загрузке?
  • через клик на элемент (на миниатюру, ссылку);
  • скроллингом — когда файл попадает в зону видимости или пользователь доходит до определенного места на странице (например, так подгружаются изображения товаров в каталогах интернет-магазинов). При этом на месте файла может стоять картинка-заглушка.
  • в фоновом режиме — используется для тех файлов, без которых не обойтись при последующих действиях (например, какие-то чертежи, схемы, образцы документов). Прежде чем внедрить это решение, нужно протестировать на нескольких страницах, нужна ли пользователю такая загрузка.
Таким образом, при «ленивой» загрузке сокращается время до отображения страницы и взаимодействия, и пользователь моментально видит рабочий сайт.

Следите за нашими новинками и акциями. Подписывайтесь на нас в социальных сетях и блогах: