Как сделать ленивую загрузку картинок

Короткий ответ

Добавьте картинке атрибут loading="lazy":

<p style="height: 300px;">Scroll down ↓</p>
<img src="/media/photo-400x250.jpg" alt="A flower" width="400" height="250" loading="lazy">

Браузер начнёт загружать изображение, только когда оно приблизится к видимой области. Страница открывается быстрее, а посетитель, который не долистал до конца, не тратит трафик на лишние файлы.

Не забудьте размеры

Пока картинка не загружена, браузер не знает её высоту. Атрибуты width и height сообщают пропорции заранее, и под изображение сразу оставляется место — текст не прыгает, когда оно появится.

Видео в iframe

Тот же атрибут работает у <iframe> — встроенные карты и видео тоже начнут грузиться только при прокрутке к ним:

<iframe src="https://example.com" title="Example site" width="300" height="150" loading="lazy"></iframe>

Что грузить сразу

Для картинок вверху страницы, которые видны сразу, ленивая загрузка вредна: браузер откладывает их, и главный баннер появляется позже. Такому изображению можно, наоборот, поднять приоритет атрибутом fetchpriority="high".

Частая ошибка

loading="lazy" ставят всем картинкам подряд, включая логотип и обложку на первом экране. Сайт начинает казаться медленнее, а не быстрее. Откладывайте только то, что ниже первого экрана.