Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, 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", если у вас длинная страница, и вы хотите сэкономить пользователю трафик.