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

Зачем сайту lazy load

Без отложенной загрузки браузер скачивает все картинки страницы сразу, даже те, до которых человек не доберётся. Возьмём интернет-магазин одежды в Ташкенте: в каталоге несколько десятков карточек, трафик идёт из Instagram и Telegram, а большинство покупателей открывает ссылку с телефона, иногда в районе со слабым сигналом. Если каждая фотография грузится сразу, первый экран появляется поздно, и часть людей закрывает вкладку.

С lazy load первым грузится то, что видно сразу, а остальное подтягивается по мере прокрутки. Выигрывают скорость, трафик посетителя и нагрузка на хостинг. Для SEO это важно через метрики Core Web Vitals: LCP (как быстро появился главный элемент) и CLS (насколько страница «прыгает»). Оба показателя зависят от того, как именно вы отложили загрузку.

Как включить lazy load правильно: пошагово

Самый надёжный вариант сегодня — встроенный атрибут браузера. Скрипты и плагины не нужны, адрес картинки остаётся в обычном теге, а робот поисковика его видит.

• Найдите в шаблоне теги img и iframe, которые расположены ниже первого экрана: галерея, карточки товаров, блок отзывов, подвал.
• Добавьте им атрибут loading="lazy". В WordPress, Tilda, Bitrix и большинстве современных CMS это уже делается настройкой или по умолчанию, поэтому сначала посмотрите исходный код.
• Укажите у каждой картинки width и height (или CSS-пропорцию), чтобы под неё заранее резервировалось место.
• Заполните alt: отложенная картинка участвует в поиске по изображениям так же, как обычная.
• Главную картинку первого экрана оставьте без lazy и при необходимости дайте ей повышенный приоритет загрузки.
• Проверьте результат на телефоне и в отчётах скорости, а не только на мощном компьютере.

Что нельзя откладывать

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

• Баннер или фото товара на первом экране.
• Логотип и иконки в шапке.
• Первый слайд в слайдере (остальные откладывать можно).
• Картинку, которая служит LCP-элементом страницы.
• Всё, что появляется без прокрутки на типичном экране смартфона.

Как поисковик видит отложенные картинки

Google отрисовывает страницы и нормально работает со встроенным loading="lazy". Но робот не листает страницу, как человек, и не нажимает кнопки. Поэтому картинки, которые подгружаются только по событию прокрутки или клика, он может не увидеть.

Правила простые: используйте атрибут браузера или реализацию, которая срабатывает при попадании элемента в область видимости; держите настоящий адрес в src или srcset, а не только в служебном атрибуте скрипта; для контента, который подгружается порциями, делайте отдельные ссылки и включайте страницы в карту сайта.

Сравнение вариантов реализации

Встроенный атрибут: минимум кода, адрес в разметке, риск для индексации низкий. Подходит для большинства сайтов.

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

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

Как проверить, что всё работает

Проверка занимает немного времени, но именно она отделяет нормальную настройку от тихой потери трафика.

• Откройте исходный код страницы: в src стоит настоящий адрес картинки или заглушка.
• В Search Console запустите проверку URL и посмотрите отрисованный HTML и скриншот робота: картинки должны быть на месте.
• В отчёте Lighthouse или PageSpeed найдите LCP-элемент и убедитесь, что он не отложен.
• Сравните LCP и CLS до и после изменений, ориентируясь на реальные данные, а не на один замер.
• Прокрутите страницу на телефоне при медленном соединении: картинки должны появляться вовремя, без белых провалов и скачков.

Видео, карты и виджеты тоже можно отложить

Иногда тяжелее картинок оказываются встроенные блоки. Плеер YouTube можно заменить обложкой и загружать сам плеер по нажатию. Карту в блоке контактов стоит подгружать, когда человек дошёл до неё. Виджеты чатов и отзывов лучше запускать после основной загрузки страницы. Для iframe работает тот же атрибут loading.

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

Частые ошибки и итоговый чек-лист

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

Короткий чек-лист: первый экран без lazy; ниже первого экрана встроенный lazy с размерами; тяжёлые блоки по прокрутке или по клику; в коде реальные адреса; проверка в Search Console; сравнение LCP и CLS после правок.

Если хотите, чтобы это сделали аккуратно, команда markdev проверит шаблоны вашего сайта и подберёт настройки в рамках SEO-оптимизации сайта в Узбекистане. Опишите задачу, и мы подскажем, с чего начать.