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

Почему это важно для поискового роста

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

Хотите понять, относится ли это к вашему сайту?Проверим сайт и вернёмся с коротким планом.

Получить аудит

Ленивая загрузка (lazy loading) решает эту проблему просто: изображения начинают скачиваться только тогда, когда пользователь прокручивает страницу к ним ближе. То, что находится в самом низу, подождёт. Браузер не тратит трафик и время на то, что человек сейчас не смотрит.

Для Яндекса скорость загрузки на мобильных — один из факторов ранжирования. Если ваш сайт открывается на телефоне пять-шесть секунд вместо двух-трёх, это заметно влияет на позиции. Ленивая загрузка не ускорит сам сервер и не сожмёт картинки, но она радикально сокращает объём данных, которые нужно передать при первом открытии страницы. А это напрямую ощущается пользователем.

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

Практические особенности и варианты применения

Есть два основных способа включить ленивую загрузку: нативный (встроенный в браузер) и через JavaScript.

Нативная загрузка — это атрибут loading="lazy", который добавляется прямо в код картинки. Выглядит это так: браузер видит этот атрибут и сам решает, когда скачать изображение. Способ простой, не требует подключения скриптов, работает в большинстве современных браузеров, включая Яндекс.Браузер и Chrome на Android.

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

Загрузка через JavaScript — это когда на сайт подключается специальный скрипт, который контролирует процесс. Раньше это был единственный вариант, сейчас его используют, когда нужна тонкая настройка: например, загрузить картинку чуть раньше, чем она появится на экране, чтобы человек не увидел пустое место. Или когда нужно поддерживать старые браузеры, которые не понимают нативный атрибут.

Контент и структура

Покажем, какие страницы могут привести трафик

Оценим семантику, структуру разделов, статьи и коммерческие посадочные, чтобы контент работал как часть SEO-системы.

Разобрать структуру

На практике для большинства небольших сайтов и интернет-магазинов нативного способа вполне достаточно. Если ваш сайт работает на популярной CMS (WordPress, Битрикс, 1С-Битрикс, Joomla), скорее всего, ленивая загрузка уже встроена в тему или включается одним галочкой в настройках. Проверить это просто: откройте код страницы и поищите loading="lazy" у тегов картинок.

Если сайта на конструкторе (Tilda, InSales и подобные), ленивая загрузка обычно включена по умолчанию — разработчики конструкторов уже позаботились об этом. Но проверить стоит: иногда при переносе сайта или установке сторонних плагинов эта функция сбрасывается.

Ошибки, ограничения и что учитывать на практике

Самая частая ошибка — включить ленивую загрузку абсолютно на все изображения без исключения. Первая картинка в шапке сайта, главный баннер, логотип — всё это должно загружаться сразу, без задержки. Если вы поставите loading="lazy" на изображение в первом экране, пользователь увидит пустое место, пока оно не подгрузится. Для Яндекса это тоже сигнал: метрика Core Web Vitals, а именно показатель LCP (скорость отображения основного контента), ухудшится.

Правило простое: ленивая загрузка применяется только к тем картинкам, которые находятся ниже первого экрана. Всё, что человек видит сразу при открытии страницы, грузится обычным образом.

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

Третья ошибка — ленивая загрузка при небольшом количестве картинок. Если на странице три-четыре изображения, выигрыш от lazy loading будет незаметен ни пользователю, ни Яндексу. А вот лишний код скрипта, если вы используете JavaScript-решение, может наоборот замедлить страницу. Не нужно ставить ленивую загрузку там, где она не нужна.

Четвёртый нюанс — пустые места при медленном интернете. Если у человека плохой мобильный сигнал, картинка может загружаться заметно дольше, и он увидит серый прямоугольник. Хорошая практика — задать для картинок фиксированные размеры через атрибуты width и height или через CSS. Тогда браузер сразу зарезервирует место под изображение, и верстка не будет прыгать при загрузке. Смещение элементов при загрузке (CLS) — ещё один показатель, который Яндекс учитывает.

Краткий чек-лист для владельца сайта:

Проверьте, включена ли ленивая загрузка на страницах с большим количеством изображений (каталоги, статьи, отзывы).
Убедитесь, что картинки в первом экране загружаются сразу — на них не должно быть атрибута loading="lazy".
Проверьте, что у всех изображений указаны размеры (width и height), чтобы страница не прыгала при загрузке.
Если на странице мало картинок (до пяти), ленивая загрузка скорее не нужна — не усложняйте.
После включения или отключения lazy loading проверьте скорость страницы через PageSpeed Insights и посмотрите, как изменились показатели LCP и CLS.

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