Ленивая загрузка рекламы (lazy loading): как работает

При ленивой загрузке (lazy loading) рекламное место запрашивает объявление не в момент открытия страницы, а когда оказывается рядом с видимой частью экрана. Слот в конце длинной статьи запускает аукцион, только если читатель до него докрутит. Страница грузится быстрее, а показы реже достаются местам, которых никто не увидел.

#Как это сделать в браузере

Стандартный инструмент — IntersectionObserver: браузер сам сообщает, когда элемент пересекается с областью наблюдения, без ручного подсчета координат на каждом событии прокрутки.

const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (!e.isIntersecting) continue;
    io.unobserve(e.target);           // один запрос на слот
    requestAd(e.target.dataset.slot); // аукцион и отрисовка
  }
}, { rootMargin: '600px 0px' });

document.querySelectorAll('.ad-slot').forEach((el) => io.observe(el));

rootMargin расширяет экран на заданное расстояние: при 600px 0px колбэк сработает, когда до слота останется 600 пикселей прокрутки. Чем больше отступ, тем раньше начинается аукцион.

#Два порога: запросить и отрисовать

Запрос ставки и отрисовка креатива — разные моменты, и их выгодно разнести. В Google Publisher Tag ленивая загрузка так и настроена: fetchMarginPercent задает, на каком удалении от экрана запрашивать рекламу, renderMarginPercent — когда ее рисовать (в процентах от размера экрана), а mobileScaling — множитель отступов для мобильных устройств.

С header bidding важно запускать по тому же сигналу и торги. Иначе ставки собираются при открытии страницы, а ленивой оказывается только отрисовка: к моменту показа ставки стареют.

#Что происходит с видимостью и eCPM

Условный пример. На странице пять рекламных мест, первые два видны сразу, до остальных добирается 40% читателей. Тысяча просмотров страницы:

• без ленивой загрузки — 5 000 показов;
• с ней — 2 000 показов первых двух мест плюс 3 × 400 = 1 200 показов остальных, всего 3 200.

Показов стало на 36% меньше, но исчезли именно те 1 800, которые никто не видел. Доля видимых показов (viewability) растет, а покупатели, оптимизирующие видимость, готовы платить за такой инвентарь больше — растет eCPM. Доход на страницу может вырасти или упасть: это показывает только тест.

#Ленивая загрузка в приложениях

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

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

• Слишком малый отступ. Слот появляется на экране пустым и заполняется на глазах у пользователя; часть времени видимости потеряна.
• Нет зарезервированной высоты. Креатив раздвигает текст при загрузке, верстка прыгает.
• Ленивый слот с таймером обновления. Рефреш должен считать только время, когда слот на экране.
• Атрибут loading="lazy" у iframe вместо своей логики. Порог тогда выбирает браузер, и управлять моментом аукциона нельзя.

Где ленивая загрузка стоит в общем списке приемов, видно из чек-листа монетизации.