Технология отложенной загрузки медиафайлов, которая позволяет отложить загрузку ненужных в данный момент ресурсов.
<img src=»picture.jpg» loading=»lazy»>
<iframe src=»supplementary.html» loading=»lazy»></iframe>
Эта технология помогает ускорить работу сайта и сэкономить трафик, особенно если у пользователя ограниченный объём мобильного интернета
Суть технологии отложенной загрузки
Представим, что у нас есть изображение, которое находится в нижней части длинной статьи. Обычно мы просто вставляем его на страницу.
<img src=»images/big-image.jpg» width=»1920″ height=»1080″ alt=»Большая картинка»>
Однако, с технологией отложенной загрузки, мы можем сделать иначе:
<img src=»images/thumbnail.jpg» data-src=»big-image.jpg» width=»720″ height=»340″ alt=»Большая картинка» class=»lazyload»>
Здесь src — это небольшая картинка-заглушка, которая загружается сразу (она открывается быстро), а data-src — это основное изображение, которое загрузится, когда пользователь дойдёт до него.
Прежде чем появился атрибут loading, разработчики применяли различные методы на JavaScript для оптимизации загрузки изображений. Например, они писали код, который отслеживал прокрутку страницы и, когда пользователь доходил до изображения, быстро заменял заглушку на реальное изображение или загружал его полностью.
Атрибут loading=»lazy» сообщает браузеру: «Не загружай это изображение, пока оно не понадобится». Браузер самостоятельно решает, когда начать загрузку изображения, обычно это происходит, когда изображение почти попадает в область просмотра.
Как включить lazy loading?
Lazy loading стала настолько полезной, что недавно её добавили в веб-стандарты по умолчанию. Теперь современные браузеры могут ещё проще:
<img src=»images/big-image.jpg» width=»1920″ height=»1080″ loading=»lazy» alt=»Большая картинка»>
Просто используйте loading=»lazy», если у вас длинная страница и вы хотите сэкономить трафик пользователя.
