Lazy-loading изображений

Что это

Lazy-loading (ленивая загрузка) изображений — техника, при которой браузер загружает картинки не все сразу при открытии страницы, а только по мере прокрутки: когда изображение приближается к видимой области экрана (viewport). Реализуется через HTML-атрибут loading="lazy" или JavaScript Intersection Observer API. Картинки вне экрана получают статус «отложено» и не создают сетевых запросов до момента, когда пользователь до них доходит.

---

Почему это важно для SEO

Lazy-loading напрямую влияет на Core Web Vitals в Google — прежде всего на LCP (Largest Contentful Paint) и FID/INP. Страница с 40 изображениями, загруженными одновременно, тратит bandwidth и блокирует рендеринг. По данным Google, сайты с LCP до 2,5 секунды получают приоритет в ранжировании. Откладывая загрузку 30+ изображений ниже fold, вы освобождаете ресурсы браузера для первого экрана — LCP улучшается в среднем на 0,3–1,2 секунды на мобильных устройствах.

В Яндексе ленивая загрузка влияет на скорость ответа страниц, которую учитывает алгоритм при расчёте ИКС и ранжировании. Турбо-страницы Яндекса реализуют lazy-loading автоматически, но для обычных страниц нужна ручная настройка. Кроме того, медленные страницы увеличивают показатель отказов: по данным Google, при увеличении времени загрузки с 1 до 3 секунд вероятность отказа растёт на 32% — а поведенческие факторы критичны для Яндекса.

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

---

Как проверить вручную

1. Исходный код страницы. Откройте Ctrl+U в браузере, найдите теги <img>. Ищите атрибут loading="lazy" у изображений ниже fold. Если его нет нигде — lazy-loading не настроен.

1. DevTools Network. Откройте страницу в Chrome DevTools (F12 → вкладка Network → фильтр Images). Обновите страницу без прокрутки. Если все изображения загружаются сразу — lazy-loading отсутствует или не работает.

1. Screaming Frog. В версии 20+ есть рендеринг JavaScript. Выгрузите список изображений через Reports → Images и проверьте атрибуты. Массово найти страницы без loading="lazy" можно через Custom Search → поиск по паттерну <img без loading.

1. PageSpeed Insights. Запустите проверку на pagespeed.web.dev. В разделе Opportunities ищите пункт «Defer offscreen images» — он покажет конкретные URL картинок, которые тормозят загрузку, и потенциальную экономию времени в секундах.

1. Google Search Console. Раздел Core Web Vitals → страницы со статусом «Плохо» или «Требует улучшения» — там LCP-проблемы часто связаны с изображениями.

---

Как исправить

Универсальное HTML-решение — добавить атрибут ко всем <img> ниже первого экрана:

<img src="photo.jpg" alt="Описание" width="800" height="600" loading="lazy">

Атрибуты width и height обязательны — без них браузер не резервирует место под картинку, что вызывает CLS (сдвиг макета).

WordPress. Начиная с версии 5.5 lazy-loading включён нативно для всех изображений. Если нужен контроль над первым экраном — используйте плагин Flying Images или добавьте в functions.php:

// Отключить lazy-loading для главного баннера (featured image)
add_filter('wp_lazy_loading_enabled', '__return_false', 10, 2);

Tilda. В настройках сайта (Настройки → Производительность) включите опцию «Ленивая загрузка изображений». Для Zero Block — атрибут придётся прописывать вручную через HTML-виджет.

1C-Bitrix. В компонентах каталога и новостей найдите шаблон вывода <img> и добавьте атрибут вручную. Либо подключите готовый модуль из Marketplace — например, «Оптимизация изображений».

Webflow. В настройках изображения (Image Settings) поставьте галочку «Lazy load». Применяется к каждому элементу отдельно или через глобальные настройки проекта.

---

Типичные ошибки

• Lazy-loading на LCP-изображении. Главный баннер, hero-картинка, первый слайд — всё, что видно без прокрутки, должно загружаться немедленно. Атрибут loading="eager" или просто отсутствие loading="lazy" на этих элементах.

• Отсутствие width и height у img. Без явных размеров браузер не знает, сколько места зарезервировать. Результат — CLS (Cumulative Layout Shift), которые штрафует Google.

• Lazy-loading через JavaScript без fallback. Старые библиотеки (lazysizes и др.) не работают, если JS заблокирован или Googlebot не дорендерил страницу. Нативный loading="lazy" поддерживается в 95%+ браузеров — используйте его как основу.

• Применение ко всем изображениям через CSS `content-visibility`. Это другой механизм, он не заменяет loading="lazy" и при неправильной настройке скрывает контент от индексации.

• Игнорирование мобильного viewport. Первый экран на мобильном меньше, чем на десктопе. Изображение, которое на десктопе видно сразу, на телефоне уже ниже fold — и наоборот. Тестируйте в PageSpeed Insights отдельно для mobile и desktop.

---

Влияние на разные типы сайтов

Интернет-магазины — главные бенефициары. Страницы каталога содержат 24–96 карточек товара, каждая с изображением. Без lazy-loading браузер делает 50–100 сетевых запросов одновременно. Внедрение на крупном интернет-магазине сокращает время до интерактивности на 1–3 секунды, напрямую влияя на конверсию и позиции в выдаче.

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