Ленивая загрузка изображений (lazy load)

Когда страница открывается, браузер по умолчанию пытается загрузить сразу все картинки — даже те, что внизу и до которых посетитель, может, и не доскроллит. Это лишний трафик и время. Ленивая загрузка решает проблему: картинки подгружаются по мере прокрутки, когда вот-вот появятся на экране. Разберём, как это включить и где осторожно.

Как это ускоряет сайт

Представьте длинную статью с двадцатью иллюстрациями. При обычной загрузке браузер тянет все двадцать сразу, и страница «тяжелеет», даже если человек прочитает только первый экран. С ленивой загрузкой сначала грузятся только видимые картинки, а остальные — по мере прокрутки. В итоге страница открывается быстрее, экономится трафик (особенно на мобильных), а сервер получает меньше одновременных запросов. Для длинных страниц, каталогов и галерей эффект особенно заметен.

Как включить

Раньше для этого подключали скрипты, сегодня всё проще — браузеры понимают ленивую загрузку из коробки. Достаточно добавить картинке атрибут loading="lazy":

Так же лениво грузят встроенные <iframe> — например, видео и карты. Если сайт на популярной CMS, ленивая загрузка часто включается настройкой или плагином, без правки кода.

Что НЕ нужно грузить лениво

Здесь главная ошибка новичков. Ленивую загрузку не вешают на главную картинку первого экрана — логотип, баннер, большое фото в шапке. Эта картинка часто и есть LCP — самый крупный видимый элемент, по скорости появления которого оценивают загрузку. Если отложить её, LCP станет хуже, и вы получите обратный эффект. Правило простое: всё, что видно без прокрутки — грузим сразу; всё, что ниже — лениво.

А что с SEO и индексацией

Современная ленивая загрузка через loading="lazy" поисковикам не мешает — они умеют «доскроллить» страницу и увидеть отложенные картинки, в том числе для поиска по картинкам. Проблемы бывают только у самописных скриптовых решений, которые подменяют адрес картинки и без выполнения JS показывают пустоту. Нативный атрибут таких рисков лишён — поэтому он и предпочтителен.

Значения loading: lazy, eager и auto

У атрибута loading три значения, и полезно знать разницу. lazy — откладывать загрузку, пока картинка не приблизится к экрану; это то, что нужно для изображений ниже первого экрана. eager — грузить сразу, не откладывая; ставится для важных картинок в видимой части, прежде всего для главного изображения первого экрана. auto (или отсутствие атрибута) — браузер решает сам, но на практике это означает обычную немедленную загрузку. Вывод: lazy — для всего, что ниже сгиба, eager — для hero-картинки наверху.

Что ещё можно грузить лениво

Ленивая загрузка не ограничивается фотографиями. Тот же атрибут loading="lazy" работает для встроенных iframe — а это видео с YouTube, карты, виджеты, которые сами по себе тяжёлые и часто живут внизу страницы. Откладывать их особенно выгодно: один встроенный плеер может весить больше, чем весь остальной контент. С фоновыми картинками из CSS сложнее — нативного lazy для них нет, тут помогают отдельные приёмы. А вот текст и важные элементы интерфейса лениво грузить не нужно: задержка их появления только раздражает посетителя.

Ленивая загрузка и LCP: важная тонкость

Мы уже сказали, что hero-картинку первого экрана нельзя грузить лениво. Но есть и продолжение: ей можно, наоборот, дать приоритет. Атрибут fetchpriority="high" на главном изображении подсказывает браузеру загрузить его раньше прочих ресурсов — и метрика LCP улучшается. Получается двойная стратегия: первому, самому важному изображению — eager и высокий приоритет, чтобы оно появилось мгновенно; всем остальным — lazy, чтобы не мешали. Так первый экран рисуется быстро, а нижние картинки не тратят ресурсы впустую.

Как проверить, что работает

Убедиться, что ленивая загрузка реально включилась, просто. Откройте инструменты разработчика браузера, вкладку Network и фильтр по картинкам. Перезагрузите страницу, не прокручивая, — должны подгрузиться только верхние изображения. Теперь медленно скролльте вниз: в списке запросов будут появляться новые картинки ровно по мере приближения к экрану. Если все картинки загрузились сразу при открытии — lazy не сработал, проверьте атрибут и настройки CMS. Заодно гляньте, что у важной hero-картинки ленивой загрузки нет.

Коротко

Ленивая загрузка откладывает картинки за пределами экрана и подгружает их по мере прокрутки — страница открывается быстрее и экономит трафик. Включается атрибутом loading="lazy" на <img> и <iframe>, а в CMS — часто плагином. Главное — не лениться с картинкой первого экрана (это LCP) и всегда задавать размеры, чтобы не прыгал контент. Нативная ленивая загрузка безопасна для SEO, в отличие от старых скриптовых костылей.