Lazy loading – это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями.
При «отложенной загрузке» изображения не будут загружаться, пока не понадобятся посетителю. В зависимости от настроек, они могут отображаться при скролле до определённой части страницы или нажатии пользователем на элемент. «Отложенную загрузку» рекомендуется использовать для медиафайлов, которые находятся вне экрана.
Внеэкранные или закадровые элементы – это медиаконтент, который находится ниже той части страницы, которую просматривает пользователь, или, как определяет Web Tools, ниже сгиба. Поскольку пользователи не видят закадровые изображения при начальной загрузке страницы, нет смысла подгружать их сразу. Кроме того, в таком случае увеличивается время загрузки для взаимодействия (Time to Interactive). Эта метрика сейчас имеет наибольший вес при оценке скорости загрузки на мобильных устройствах.
Для кого нужна «ленивая загрузка» Рекомендуем использовать ленивую загрузку сайтам: на страницах которых много изображений (онлайн-сервисы с фотографиями, статейники с большим количеством медиаконтента); скорость загрузки конкурентов которых на порядок выше; с оценкой ниже среднего (до 50 баллов) от PageSpeed Insights; на слабом сервере, который не может обеспечить высокую скорость загрузки страницы; у которых больше 50% процентов посетителей с мобильных устройств; для которых появляется рекомендация в PageSpeed Insights:
Почему следует внедрить lazy loading Есть две весомые причины внедрить отложенную загрузку: Задержать пользователя на сайте. Если ваш веб-ресурс показывает статьи или предоставляет различные функции при помощи JavaScript, как правило, перед его выполнением нужна загрузка объектной модели документа. Это в несколько раз увеличивает скорость загрузки. В таком случае lazy loading сыграет ключевую роль в том, останется посетитель на сайте или покинет его, так как посчитает нерабочим. Сэкономить интернет-трафик. Контент загружается только в случае, если пользователь доскроллит до него. Это актуально для пользователей со слабым или мобильным интернетом и ограниченным количеством килобайт. Виды отображения при «отложенной загрузке»
Есть 3 вида отображения контента при реализации lazy loading: скроллинг; клик; фоновый режим. Вот несколько способов внедрения lazy loading в веб-приложение:
- Использование плагинов: Существует множество плагинов, которые могут помочь внедрить lazy loading в веб-приложение. Например, вы можете использовать плагин Lazy Load от jQuery или LazyLoad от verlok.
- Использование атрибута loading: HTML5 включает атрибут loading, который позволяет установить значение lazy для изображений и других ресурсов. Это означает, что ресурсы будут загружаться только тогда, когда они станут видимыми для пользователя. Например:
<img src="image.jpg" alt="Image" loading="lazy" />- Написание собственного кода: Вы можете написать свой собственный код, который будет реализовывать lazy loading. Для этого вам нужно будет использовать JavaScript и определить, когда элементы становятся видимыми на странице. Когда элемент становится видимым, вы можете загрузить соответствующий ресурс.
Независимо от того, какой подход вы выберете, внедрение lazy loading позволит улучшить производительность вашего веб-приложения и сократить время загрузки страницы.