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

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


Чаще всего страницы долго грузятся из-за тяжелых картинок и видео. Google рекомендует несколько способов их оптимизации:

• сжатие медиафайлов;
• кэширование;
• отложенную загрузку.
  

С последней и будем разбираться.

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

Каким сайтам нужна отложенная загрузка?

• На страницах, содержащих много изображений (фотоотчеты, статьи с большим количеством медиафайлов).
• Если скорость низкая в сравнении с конкурентами.
• Если по оценке PageSpeed Insights меньше 50 баллов.
• Если сайт расположен на слабом сервере.
• Если больше половины трафика идет с мобильных устройств.
  

Зачем ее использовать?

• Чтобы пользователь мог взаимодействовать со страницей, пока страница грузится.
• Сэкономить трафик, что особенно актуально с мобильным или слабым интернетом. Пока до изображения не доскроллят — оно не будет грузиться, съедая килобайты.
  

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

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

Таким образом, при «ленивой» загрузке сокращается время до отображения страницы и взаимодействия, и пользователь моментально видит рабочий сайт.