Lazy load: как отложенная загрузка ускоряет страницы и где вредит

Lazy load, или отложенная загрузка, — приём, при котором браузер грузит картинки и встроенные фреймы не сразу, а когда посетитель прокручивает страницу ближе к ним. Включается он одним HTML-атрибутом loading="lazy". Первый экран при этом должен грузиться как обычно: ленивая главная картинка замедляет страницу, а не ускоряет.

Что такое lazy load простыми словами

Lazy load (lazy loading, ленивая загрузка) — это правило «не скачивай то, что человек пока не видит». Обычная страница при открытии тянет все картинки сразу, даже фото в подвале, до которого посетитель может не дойти. С отложенной загрузкой браузер сначала берёт то, что на экране, а остальное — по мере прокрутки.

Справочник MDN описывает смысл приёма так: второстепенные ресурсы загружаются только при необходимости, это ускоряет первую загрузку и сокращает сетевой трафик. Особенно это заметно на длинных страницах: каталогах, лентах статей, портфолио с десятками работ.

Раньше для этого подключали JavaScript-библиотеки, которые следили за прокруткой. Сейчас то же самое умеет сам браузер: по данным web.dev, атрибут loading позволяет отложенно загружать изображения без собственного кода и без отдельной библиотеки.

Lazy load не ускоряет картинку, которую человек видит сразу. Он убирает из первой загрузки то, что лежит ниже экрана.

Как работает атрибут loading?

У тегов img и iframe есть атрибут loading с двумя значениями. Значение lazy просит браузер отложить загрузку, пока элемент не приблизится к видимой области. Значение eager — обычное поведение: грузить сразу, где бы элемент ни стоял. Без атрибута браузер ведёт себя как при eager.

Разметка выглядит так:

<img src="https://site.ru/upload/foto-rabot.jpg" loading="lazy" width="800" height="600" alt="Готовый проект на сайте">
<iframe src="https://site.ru/video/obzor/" loading="lazy" title="Видеообзор"></iframe>

Браузер сам решает, когда начинать загрузку. Он не ждёт, пока картинка окажется на экране, а начинает заранее. По данным web.dev, на быстром соединении Chrome уменьшил этот запас с 3000px до 1250px до области просмотра. На медленной сети запас больше. Настроить расстояние вручную нельзя: оно зашито в браузер.

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

Факт. По замерам Chrome на Android, в сетях 4G 97,5% ленивых изображений полностью загружались в течение 10 мс после появления на экране — посетитель пустых мест почти не видит.

Что даёт отложенная загрузка

Главный выигрыш — первая загрузка становится легче. Браузер не тратит канал на фото в подвале, пока грузит меню, текст и первый экран. На телефоне с мобильным интернетом это ощутимо: меньше скачанных мегабайт и быстрее появляется то, ради чего человек пришёл.

Второй выигрыш — нагрузка на хостинг. Если посетитель ушёл с середины страницы, нижние картинки так и не запросились. На каталоге с сотнями товаров это заметная экономия трафика сервера.

Третий плюс — простота. Встроенный атрибут не требует скриптов, и, по web.dev, загрузка изображений работает даже у посетителя с отключённым JavaScript. Библиотеки на JavaScript теперь нужны в редких случаях: когда надо поддержать очень старые браузеры или точно управлять моментом загрузки.

Ограничение тоже есть: атрибут ставится на HTML-теги — img и iframe, а MDN описывает его ещё для video и audio. Фоновые картинки, заданные в CSS через background-image, он не откладывает. Если ваш дизайн держится на фоновых изображениях в блоках, для них нужен другой приём — обычно скрипт с Intersection Observer.

Где lazy load вредит: первый экран и LCP

Ленивая загрузка картинки на первом экране делает хуже. Браузер не может отложить изображение, пока не поймёт, где оно стоит на странице, поэтому такая картинка начинает грузиться позже, чем без атрибута. Web.dev прямо предупреждает: не используйте отложенную загрузку для изображений, которые видны при открытии страницы, особенно для LCP-изображения — самого крупного элемента первого экрана.

Это не теория. Команда web.dev сравнила реальные сайты по данным Chrome: медианная страница без ленивой загрузки имела LCP 2922 мс, а с ленивой — 3546 мс. Авторы честно оговаривают, что это корреляция, а не доказательство причины. Но лабораторный тест на WordPress показал ту же картину, а исправление было простым: ленивая загрузка только изображений ниже первого экрана полностью убрала ухудшение LCP.

Отсюда практическое правило. Главный баннер, фото товара в карточке, логотип и всё, что человек видит без прокрутки, грузятся обычным способом. Атрибут loading="lazy" ставят начиная со второго-третьего экрана. О метриках скорости подробно рассказывали в статье про Core Web Vitals.

Мнение. Если CMS или плагин ставит loading="lazy" на все картинки подряд, проверьте первый экран в первую очередь. Чаще всего проблема с LCP на таких сайтах решается тем, что с главной картинки атрибут просто снимают.

Какие элементы грузить лениво, а какие нет?

Решение зависит от того, где элемент стоит и видит ли его человек сразу. Удобно держать перед глазами такую таблицу:

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

Lazy load и SEO: как не спрятать контент от поиска

Поисковый робот не прокручивает страницу и не нажимает кнопки. Справка Google по отложенной загрузке подчёркивает это отдельно: важно, чтобы контент загружался без действий пользователя, так как Google Поиск не взаимодействует со страницами. Встроенный атрибут loading и Intersection Observer этому требованию отвечают: они реагируют на область просмотра, а не на клики.

Проблемы начинаются с самописных решений. Если картинки подгружаются только после нажатия «Показать ещё» или только по событию прокрутки, робот может их не увидеть. То же с бесконечной лентой: Google советует давать каждой порции контента свой постоянный адрес, иначе часть товаров или статей не попадёт в индекс. Какие страницы поиск уже видит, удобно смотреть в отчётах Яндекс Вебмастера.

Есть и второй довод против ленивого первого экрана, уже со стороны поиска. Google не рекомендует отложенную загрузку для контента, который показывается сразу при открытии страницы: он появится позже, и это заметит посетитель.

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

Проверка займёт несколько минут и не требует программиста:

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

С чего начать на своём сайте

Начните с одной длинной страницы — каталога, ленты статей или портфолио. Найдите в шаблоне, как выводятся картинки, и проверьте, стоит ли у них атрибут loading. Многие CMS и темы уже добавляют его сами: тогда задача сводится к тому, чтобы снять атрибут с первого экрана и проставить размеры.

Если в шаблоне атрибута нет, добавьте loading="lazy" к картинкам ниже первого экрана и iframe с картами и видео. После выката сравните LCP и вес первой загрузки до и после правки. Если шаблон сложный или сайт собран на старой теме, такие правки мы делаем в рамках поддержки сайта: проверяем первый экран, размеры картинок и то, что видит поисковый робот.

Источники

• Отложенная загрузка изображений на уровне браузера — web.dev, Google
• Влияние слишком большой ленивой загрузки на производительность — web.dev, Google
• Устранение проблем с отложенной загрузкой — Google Search Central
• Lazy loading — MDN Web Docs