Тег img добавляет на страницу картинку. Он начнёт загрузку картинки одновременно с загрузкой читателем самой страницы. Если картинок много или они тяжёлые, их одновременная загрузка может вызвать заметные подтормаживания отрисовки страницы, особенно на плохом интернете и слабых устройствах.
Большинство браузеров постараются подгрузить картинку с loading="lazy" чуть заранее, до того как картинка попадёт в область видимости браузера.
Это позволяет верстальщику минимальными средствами базово повторить важный принцип книг бюро — «картинка ждёт читателя».
Атрибут loading="lazy" скажет браузеру загружать картинку не сразу, а только когда читатель прокрутит страницу ближе к картинке. Это называют «ленивой загрузкой» или lazy load.
Большинство браузеров постараются подгрузить картинку с loading="lazy" чуть заранее, до того как картинка попадёт в область видимости браузера.
Это позволяет верстальщику минимальными средствами базово повторить важный принцип книг бюро — «картинка ждёт читателя».
<img src="map.jpg" loading="lazy">
Ленивую загрузку применяют к картинкам в глубине страницы, за пределами её верхней части — первого экрана, с которого начнёт чтение большинство пользователей. Это снижает нагрузку на браузер и интернет, ускоряет отрисовку первого экрана.
Ленивая загрузка на примере страницы курса «Типографика и вёрстка». Серым обозначены картинки, которые будут постепенно прогружаться по мере чтения страницы, не перегружая браузер и интернет читателя.
Не рекомендуется применять ленивую загрузку к важным картинкам на первом экране: к главному банеру или логотипу в шапке. Это может ухудшить важную для поисковой оптимизации метрику LCP — Largest Contentful Paint — скорость показа ключевого видимого элемента пользователю.
Атрибут loading="lazy" — простейший способ оптимизации загрузки картинок. Он не требует программирования и работает во всех современных браузерах, а в старых браузерах ничего не сломает. Его несложно внедрить в вёрстку и часто он ощутимо оптимизирует загрузку и отрисовку страницы.
Конечно, иногда нужна более хитрая настройка правил загрузки картинок, с которой атрибут не справится. Но для большинства сайтов, при должной оптимизации самих картинок, атрибута хватит за глаза.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.