Ленивая загрузка изображений, или lazy loading, помогает не грузить все картинки сразу. Браузер сначала показывает первый экран, а изображения ниже подгружает тогда, когда пользователь приближается к ним при прокрутке.
Главная польза для бизнеса - страница быстрее открывается, посетитель раньше видит контент, а сайт меньше тратит трафик и ресурсы сервера. Но есть условие: нельзя лениво грузить важные изображения первого экрана, иначе можно ухудшить LCP и первое впечатление от страницы.
Короткий ответ
Используйте loading="lazy" для изображений ниже первого экрана, указывайте width, height, нормальный src и осмысленный alt. Для главного баннера, логотипа и LCP-изображения ленивую загрузку обычно отключают.
Что такое lazy loading простыми словами
Представьте длинную страницу с товарами, кейсами, фотографиями работ или статьёй с большим количеством иллюстраций. Без lazy loading браузер может начать загружать почти все изображения сразу, даже если пользователь увидит только первые два экрана.
При ленивой загрузке браузер откладывает некритичные изображения. То, что находится в зоне видимости, загружается сразу. То, что ниже, подгружается позже - когда элемент становится нужен пользователю.
Зачем сайту ленивая загрузка изображений
Быстрее первый экран
Страница не тратит время на картинки, которые пока не видны. Пользователь быстрее получает основной текст, меню, оффер и кнопку действия.
Меньше лишнего трафика
Если человек не доскроллил до галереи, браузер может не загружать часть файлов. Это полезно для мобильных пользователей и длинных страниц.
Ниже нагрузка на сервер
Запросы к изображениям распределяются по времени. На сайтах с большим количеством фото это снижает резкие пики нагрузки.
Лучше UX и косвенно SEO
Быстрая загрузка помогает пользователю не уйти до просмотра контента. Но lazy loading не заменяет нормальный сайт, оффер, аналитику и качество изображений.
| Элемент | Что делать | Почему |
|---|---|---|
| Главное изображение первого экрана | Не ставить lazy | Оно часто влияет на LCP и должно появляться быстро. |
| Логотип и важные элементы шапки | Загружать сразу | Пользователь должен сразу понять, где находится и как действовать. |
| Галереи, карточки товаров ниже экрана | Ставить lazy | Обычно эти изображения не нужны в первую секунду загрузки. |
| Карты, видео, виджеты отзывов | Грузить по клику или при приближении | Третьи стороны часто сильно утяжеляют страницу. |
| Фоновые изображения CSS | Проверять отдельно | Нативный loading="lazy" работает с img и iframe, а не с CSS-фонами. |
Способы реализации lazy loading
Для большинства сайтов достаточно нативного HTML-атрибута. Сложные варианты нужны, когда изображения подставляются скриптами, используются CSS-фоны, видео, динамические карточки или нестандартные галереи.
| Метод | Пример | Когда использовать | Риск |
|---|---|---|---|
| Нативный атрибут | <img src="photo.webp" loading="lazy" alt="..." width="800" height="500"> |
Изображения и iframe ниже первого экрана. | Минимальный, если есть src, размеры и alt. |
| JavaScript и data-src | data-src="photo.webp" |
Сложные галереи, слайдеры, кастомная логика. | Можно спрятать изображение от роботов, если нет fallback. |
| Intersection Observer | Наблюдение за попаданием элемента в viewport. | Когда нужен свой скрипт без тяжёлой библиотеки. | Нужна проверка на старых браузерах и WebView. |
| Фасад для видео/карты | Превью вместо настоящего iframe. | YouTube, Яндекс.Карты, Google Maps, внешние отзывы. | Нужно понятно показать пользователю, что блок активируется кликом. |
| Плагин WordPress | Оптимизационный плагин или функция темы. | Когда нет разработчика или нужно быстро включить настройку. | Плагин может лениво грузить лишнее: логотип, hero, LCP-изображение. |
Как ленивая загрузка влияет на SEO и индексацию
Правильно настроенный lazy loading обычно не мешает SEO. Проблемы появляются тогда, когда изображение отсутствует в нормальном HTML, реальный адрес спрятан только в сложном JavaScript или загрузка зависит от действия, которое поисковый робот не выполняет.
Что должно быть в норме
- У смысловой картинки есть нормальный
srcили понятный fallback. - У изображения заполнен осмысленный
alt, а не набор ключевых слов. - Критичные изображения первого экрана не отложены.
- Изображения имеют размеры, чтобы не было скачков макета.
- Картинки не закрыты robots.txt, X-Robots-Tag, CDN-ограничениями или ошибками доступа.
Если вы работаете не только со скоростью, но и с индексацией файлов, полезно отдельно проверить robots meta и X-Robots-Tag. Иногда причина не в lazy loading, а в запрете индексации или технической ошибке на стороне сервера.
Как настроить lazy loading в WordPress
В современных версиях WordPress ленивая загрузка изображений чаще всего уже включена на уровне ядра или оптимизационных плагинов. Поэтому задача не всегда в том, чтобы “включить lazy loading”. Чаще нужно проверить, не включился ли он там, где не должен.
Откройте главные коммерческие страницы: услуги, категории, карточки товаров, кейсы.
Проверьте в коде, какие изображения получили loading="lazy".
Отключите lazy для hero-изображения, логотипа и крупных элементов первого экрана.
Для изображений ниже экрана оставьте lazy, но проверьте размеры, alt, srcset и качество файлов.
Если на сайте много тяжёлых изображений, начните не с плагина, а с базовой подготовки файлов: форматы, размеры, сжатие, alt и структура хранения. Для этого пригодится материал про оптимизацию изображений для сайта.
Как проверить, что lazy loading работает правильно
Проверка в коде
Откройте исходный код или инспектор браузера и найдите loading="lazy". Смотрите не только наличие атрибута, но и место изображения на странице.
Проверка в Network
Откройте DevTools, вкладку Network, обновите страницу и посмотрите, какие картинки загружаются сразу, а какие появляются только при прокрутке.
Проверка LCP
Через PageSpeed Insights или Lighthouse проверьте, какой элемент стал LCP. Если это изображение первого экрана и оно лениво загружается, настройку нужно исправлять.
Проверка индексации
После внедрения посмотрите отчёты Google Search Console, Яндекс Вебмастера, поиск по изображениям и логи краулера, если они доступны.
Красные флаги при внедрении
- Lazy loading включён на все изображения без разбора.
- Главный баннер, первое фото товара или крупная иллюстрация статьи загружаются с задержкой.
- У изображений нет
widthиheight, поэтому при загрузке прыгает макет. - Реальные URL картинок лежат только в
data-src, а fallback не предусмотрен. - У смысловых изображений пустые alt или одинаковые шаблонные описания.
- Сайт использует тяжёлую библиотеку ради задачи, которую можно решить одним HTML-атрибутом.
Пример плохого и хорошего варианта
Плохой вариант
<img data-src="banner.webp" class="lazy" alt="SEO продвижение купить недорого">
Нет нормального src, изображение может быть на первом экране, alt похож на набор ключей, размеры не заданы.
Хороший вариант
<img src="case-gallery.webp" loading="lazy" width="900" height="600" alt="Галерея примеров выполненных работ ниже первого экрана">
Изображение находится ниже первого экрана, у него есть адрес, размеры и понятное описание. Такой вариант проще для браузера, пользователя и поискового робота.
Для смысловых изображений отдельно проверьте качество alt-текста. Подробный разбор есть в статье про alt-теги для изображений.
Что спросить у подрядчика перед внедрением
- Какие изображения на странице считаются критичными для первого экрана?
- Как вы определили LCP-элемент на мобильной и десктопной версии?
- Будут ли у изображений указаны width, height, srcset и alt?
- Как будет проверяться индексация изображений после внедрения?
- Что будет сделано с iframe, картами, видео и внешними виджетами?
- Как вы докажете, что стало лучше: PageSpeed, WebPageTest, Lighthouse, Метрика, логи или Search Console?
Честно: проблема может быть не только в lazy loading
Если сайт медленно грузится или плохо конвертирует, причина не всегда в изображениях. Иногда тормозит хостинг, тема WordPress, лишние плагины, шрифты, рекламные скрипты, CRM-виджеты, аналитика или внешние сервисы.
С продажами ситуация такая же. Даже быстрая страница не спасёт слабый оффер, непонятные цены, отсутствие доверия, плохую обработку заявок, сезонность или продукт, который проигрывает конкурентам.
Если после оптимизации изображений сайт всё равно отвечает медленно, проверьте TTFB, серверные ошибки и качество хостинга. При выборе площадки можно посмотреть Beget, но решение всё равно стоит принимать после тестов, а не только по рекламе.
Мини-чек-лист перед публикацией
Что делать дальше
Начните с 5-10 важных страниц, которые уже получают трафик или должны приносить заявки. Проверьте, какие изображения грузятся сразу, какие отложены, какой элемент считается LCP и есть ли скачки макета.
После исправлений сравните скорость, поведение пользователей и конверсии. Если изменения не дают эффекта, расширяйте аудит: шрифты, скрипты, кэш, сервер, рекламные пиксели, виджеты и коммерческие блоки страницы.
Когда нужна не точечная правка, а системная работа со скоростью, структурой, индексацией и заявками, логичнее начинать с SEO-продвижения сайта с понятным планом работ и контрольными метриками.
Если материал был полезен
Можно оставить короткий отзыв в Яндекс Картах. Это помогает другим владельцам бизнеса быстрее понять, стоит ли читать материалы и обращаться за разбором сайта.
- Откройте карточку компании в Яндекс Картах или через Яндекс Браузер.
- Нажмите “Оставить отзыв”.
- Напишите 2-3 предложения: что было полезно, что стало понятнее, какой вопрос помог решить материал.
Хотите понять, что реально тормозит сайт?
Начните не с установки ещё одного плагина, а с короткой проверки: какие изображения мешают первому экрану, что влияет на LCP, где появляются скачки макета и какие технические ограничения мешают индексации.
Изображения и PDF приносят поисковую ценность, когда доступны роботу и человеку: есть осмысленный контекст, корректные URL, текстовая альтернатива и понятные заголовки.
7 августа 2026. Перед внедрением технических настроек сверяйте документацию источника и конфигурацию конкретного сайта.
