Ленивая загрузка изображений (lazy load)
Когда страница открывается, браузер по умолчанию пытается загрузить сразу все картинки — даже те, что внизу и до которых посетитель, может, и не доскроллит. Это лишний трафик и время. Ленивая загрузка решает проблему: картинки подгружаются по мере прокрутки, когда вот-вот появятся на экране. Разберём, как это включить и где осторожно.
Как это ускоряет сайт
Представьте длинную статью с двадцатью иллюстрациями. При обычной загрузке браузер тянет все двадцать сразу, и страница «тяжелеет», даже если человек прочитает только первый экран. С ленивой загрузкой сначала грузятся только видимые картинки, а остальные — по мере прокрутки. В итоге страница открывается быстрее, экономится трафик (особенно на мобильных), а сервер получает меньше одновременных запросов. Для длинных страниц, каталогов и галерей эффект особенно заметен.
Как включить
Раньше для этого подключали скрипты, сегодня всё проще — браузеры понимают ленивую загрузку из коробки. Достаточно добавить картинке атрибут loading="lazy":
Так же лениво грузят встроенные <iframe> — например, видео и карты. Если сайт на популярной CMS, ленивая загрузка часто включается настройкой или плагином, без правки кода.
width и height (или размеры через CSS). Иначе пока картинка грузится, на её месте пусто, а при появлении контент «прыгает» — это ухудшает показатель CLS из Core Web Vitals.Что НЕ нужно грузить лениво
Здесь главная ошибка новичков. Ленивую загрузку не вешают на главную картинку первого экрана — логотип, баннер, большое фото в шапке. Эта картинка часто и есть LCP — самый крупный видимый элемент, по скорости появления которого оценивают загрузку. Если отложить её, LCP станет хуже, и вы получите обратный эффект. Правило простое: всё, что видно без прокрутки — грузим сразу; всё, что ниже — лениво.
А что с SEO и индексацией
Современная ленивая загрузка через loading="lazy" поисковикам не мешает — они умеют «доскроллить» страницу и увидеть отложенные картинки, в том числе для поиска по картинкам. Проблемы бывают только у самописных скриптовых решений, которые подменяют адрес картинки и без выполнения JS показывают пустоту. Нативный атрибут таких рисков лишён — поэтому он и предпочтителен.
Коротко
Ленивая загрузка откладывает картинки за пределами экрана и подгружает их по мере прокрутки — страница открывается быстрее и экономит трафик. Включается атрибутом loading="lazy" на <img> и <iframe>, а в CMS — часто плагином. Главное — не лениться с картинкой первого экрана (это LCP) и всегда задавать размеры, чтобы не прыгал контент. Нативная ленивая загрузка безопасна для SEO, в отличие от старых скриптовых костылей.