Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<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
Ленивая загрузка стала настолько полезной, что недавно её добавили в веб-стандарты по-умолчанию. Так что современные браузеры умеют ещё проще:
<img src="images/big-image.jpg" width="1920" height="1080" loading="lazy" alt="Большая картинка">
Просто используйте loading="lazy", если у вас длинная страница, и вы хотите сэкономить пользователю трафик.