Что такое ленивая загрузка
Идея проста: изображения, которые пока не видны на экране, не загружаются, пока пользователь не приблизится к ним при прокрутке. Так первая загрузка страницы быстрее, а лишние данные не тратятся. Риск в том, что часть решений скрывает изображения от поискового робота.
Где применять, а где нет
- Первый экран и главное изображение — не откладывать: иначе ухудшится LCP.
- Изображения ниже первого экрана — хороший кандидат для отложенной загрузки.
- Изображения внутри вкладок и скрытых блоков — загружаются при их открытии.
Нативный способ
Самое простое и безопасное решение — встроенный атрибут браузера. Он не требует скриптов, а изображение остаётся обычным элементом с настоящим адресом в коде.
<img src="/img/sofa.webp" width="800" height="600"
alt="Диван «Альфа»" loading="lazy">Риски скриптовых решений
| Решение | Риск для индексации | Как исправить |
|---|---|---|
Адрес изображения только в атрибуте data-src | Без выполнения скриптов робот не видит адрес | Использовать нативный атрибут loading |
| Загрузка только по событию прокрутки | Робот не прокручивает страницу | Использовать наблюдение за появлением элемента в видимой области |
| Загрузка только после клика | Робот не выполняет клики | Не скрывать так изображения, важные для поиска |
| Ленивая загрузка для главного изображения | Ухудшается LCP | Исключить главное изображение из отложенной загрузки |
Как проверить
- Откройте исходный код страницы и убедитесь, что у каждого изображения есть настоящий адрес.
- Проверьте страницу инструментом, показывающим, как её видит робот: изображения ниже первого экрана должны появляться.
- Убедитесь, что размеры заданы — иначе ленивая загрузка вызовет смещения макета, см. статью про CLS.
Итог: нативный атрибут — оптимальный выбор. Он ускоряет страницу и не скрывает изображения от робота. Общие приёмы подготовки картинок — в статье про оптимизацию изображений.
Что ещё можно отложить
| Элемент | Подходит для отложенной загрузки | Замечание |
|---|---|---|
| Изображения ниже первого экрана | Да | Использовать нативный атрибут |
| Встроенные видео и карты | Да | Загружать при появлении в видимой области или по клику по обложке |
| Скрипты виджетов и чатов | Да | Подключать после основной загрузки страницы |
| Главное изображение первого экрана | Нет | Влияет на LCP |
| Основной текст страницы | Нет | Должен быть в HTML сразу |
Правило простое: то, что нужно для первого впечатления и для индексации содержимого, загружается сразу. Всё остальное можно отложить, пока оно не потребуется.
Частые вопросы
Можно ли откладывать загрузку главного изображения?
Нет: для изображения на первом экране это ухудшает LCP, поэтому его нужно загружать сразу.
Какой способ ленивой загрузки безопаснее для индексации?
Нативный атрибут loading="lazy": изображение остаётся обычным элементом с настоящим адресом, который видит робот.
Почему опасна загрузка изображений только по событию прокрутки?
Робот не прокручивает страницу, поэтому такие изображения могут остаться вне индекса.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.