Ленивая загрузка изображений: когда она помогает, а когда мешает

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

Зачем это нужно

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

Обычная страница каталога может содержать 40-60 изображений. Если каждое весит 200 килобайт, это 8-12 мегабайт. При хорошем интернете разница незаметна, при мобильном на окраине города страница открывается восемь-десять секунд. За это время значительная часть людей уходит.

Отложенная загрузка решает задачу: браузер грузит только то, что попадает в видимую область, — обычно 4-6 картинок. Страница появляется почти сразу, остальное подтягивается по мере прокрутки. Экономия на первом экране — в разы.

Второй эффект — экономия трафика посетителя. Если человек посмотрел верх страницы и ушёл, он не скачал сорок изображений впустую.

Третий — снижение нагрузки на сервер. При большом потоке это заметно.

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

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

Сейчас существует два принципиально разных способа.

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

Через скрипт. Картинка изначально вставляется без адреса — адрес хранится в отдельном атрибуте, а скрипт подставляет его, когда изображение приближается к видимой области. Этот способ появился раньше и до сих пор встречается в большинстве шаблонов и плагинов. Он гибче, позволяет делать плавное появление, заглушки, эффекты — но именно он источник почти всех проблем.

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

Что ломается чаще всего

Перечислим по частоте.

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

Не работает без скриптов. Если по какой-то причине скрипт не загрузился — конфликт с другим скриптом, ошибка, блокировщик, медленное соединение, — на странице не будет ни одной картинки. Не «загрузятся позже», а вообще не будет.

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

Прыгающая вёрстка. Если у изображения не заданы размеры, браузер не знает, сколько места под него зарезервировать. Пока картинка не загрузилась, места ноль; когда загрузилась — контент резко сдвигается вниз. Человек в этот момент целился пальцем в кнопку и попал в другую. Это раздражает сильнее, чем медленная загрузка, и напрямую бьёт по количеству оставленных заявок.

Серые прямоугольники при быстрой прокрутке. Если порог срабатывания настроен слишком узко — картинка начинает грузиться ровно в момент появления в кадре, — при быстрой прокрутке человек успевает проскочить мимо. Лечится расширением зоны предзагрузки: начинать грузить изображение за 200-400 пикселей до появления.

Не грузятся картинки внутри скрытых блоков. Вкладки, раскрывающиеся списки, карусели. Скрипт считает, что блок не виден, и ничего не грузит. Человек открывает вкладку — там пусто. Нужна дополнительная обработка события открытия.

Ломается печать. При печати страницы браузер не прокручивает её, и неподгруженные изображения в печатную версию не попадают. Для сайтов с прайсами, спецификациями и коммерческими предложениями это реальная проблема.

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

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

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

Как проверить свой сайт

Практические проверки, которые можно сделать без специальных знаний.

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

Проверка вторая: исходный код страницы. Открыть просмотр исходного кода и найти изображения. Если у них есть нормальный адрес — хорошо. Если вместо адреса заглушка или пустота, а настоящий адрес лежит в стороннем атрибуте, — робот, скорее всего, картинку не увидит.

Проверка третья: быстрая прокрутка. Открыть каталог на телефоне и быстро пролистать вниз. Если остаются серые пятна — узкий порог срабатывания.

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

Проверка пятая: вкладки и карусели. Открыть все вкладки и пролистать слайдеры — везде ли есть изображения.

Проверка шестая: печать. Отправить страницу на печать в файл и посмотреть, есть ли картинки.

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

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

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

Набор правил, который закрывает большинство проблем.

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

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

Всегда задавать размеры изображений. Ширину и высоту. Тогда браузер резервирует место и вёрстка не прыгает. Это решает проблему сдвигов полностью.

Задавать запас предзагрузки. Начинать грузить за несколько сотен пикселей до появления в кадре.

Использовать лёгкую заглушку. Не белое пятно, а размытый уменьшенный вариант или однотонный прямоугольник в цвет. Визуально страница выглядит целой.

Обрабатывать скрытые блоки отдельно. При открытии вкладки или переключении слайда — принудительно грузить изображения внутри.

Отключать при печати. Перед печатью подгружать всё.

Не применять к маленьким изображениям. Иконки и логотипы весят копейки, откладывать их бессмысленно — только лишние операции.

Проверить, что нет двух механизмов сразу. Один должен быть отключён.

Отдельно стоит сказать: отложенная загрузка — не замена оптимизации самих изображений. Если картинка весит четыре мегабайта, она будет грузиться долго в любом случае — просто позже. Сначала нужно привести в порядок размеры и форматы изображений, и только потом включать отложенную загрузку. Часто после нормального сжатия выясняется, что страница и без отложенной загрузки открывается достаточно быстро.

Связь с оптимизацией изображений

Раз уж речь зашла — короткий список того, что нужно сделать с картинками в любом случае.

Приводить к разумным размерам. Фотография товара шириной четыре тысячи точек на странице, где она показывается в четыреста, — это трёхкратный перерасход.

Сжимать. Качественное сжатие уменьшает файл в несколько раз при незаметной на глаз разнице.

Готовить разные размеры для разных устройств. Телефону не нужна картинка для большого монитора.

Использовать современные форматы изображений — они дают существенно меньший вес при том же качестве.

Настроить систему управления сайтом так, чтобы она делала это автоматически при загрузке. В ХостСМС правила создания размеров изображений задаются в настройках, и один раз настроенная схема избавляет сотрудников от необходимости думать об этом вручную.

Именно сочетание нормальных изображений и корректной отложенной загрузки даёт результат. По отдельности каждое работает хуже.

Как это связано с продвижением 3 в 1

Тема кажется чисто технической, но влияет на все три точки получения обращений.

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

Яндекс.Справочник. Карточка в Яндекс Картах и Яндекс Бизнесе ведёт на сайт, и первое впечатление формируется за секунды. Человек, пришедший с карты, обычно на телефоне и часто на не самом быстром интернете. Страница, которая грузится семь секунд или показывает прыгающую вёрстку, теряет его сразу. Плюс отдельный момент: фотографии в самой карточке — это другой канал, и их тоже нужно регулярно обновлять, независимо от того, что происходит на сайте.

2ГИС. Та же мобильная аудитория, ещё менее терпеливая. Здесь скорость открытия сайта критична настолько, что имеет смысл проверять её именно в мобильном режиме и именно на медленном соединении.

Общее правило прежнее: обращения с карт считать наравне с заявками с сайта. Отдельные номера телефонов на карточках в Яндекс Картах и 2ГИС плюс регулярный просмотр статистики карточек. Это, в частности, помогает понять эффект от технических работ: если после ускорения сайта выросла доля людей, дошедших до формы, а поток с карт не менялся — эффект точно от сайта.

Работа только над одной точкой даёт неполный результат: быстрый сайт и карточка без фотографий означают, что до сайта просто не дойдут.

Что измерять

Эффект от корректной отложенной загрузки измеряется в понятных цифрах.

• Время до появления содержимого на первом экране, на телефоне и на медленном соединении.
• Суммарный вес страницы при открытии.
• Показатель сдвига вёрстки — он отдельно измеряется сервисами проверки скорости.
• Доля отказов на страницах каталога.
• Глубина прокрутки: насколько далеко люди уходят по странице. В Яндекс.Метрике это видно в отчётах и в карте скроллинга.
• Доля посетителей, дошедших до формы и оставивших заявку.
• Количество обращений из поиска по картинкам — если картинки стали видимы, этот канал должен появиться.

Смотреть нужно до и после изменений, иначе оценить эффект невозможно.

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

Частые ошибки

Включить «в один клик» и не проверить. Самая распространённая.

Применить ко всем изображениям без исключения. Включая первый экран.

Не задать размеры картинок. Вёрстка прыгает, люди промахиваются мимо кнопок.

Оставить скриптовый вариант без запасного решения. При сбое скрипта картинок нет вообще.

Не проверить вкладки и слайдеры. Там чаще всего пусто.

Считать, что это заменяет сжатие. Не заменяет.

Забыть про печать. Для коммерческих документов важно.

Не проверить, как видит страницу поисковый робот. А это делается за две минуты в Яндекс.Вебмастере.

Коротко

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

Если вы не уверены, как на вашем сайте загружаются изображения и не теряете ли вы из-за этого посетителей, — специалисты компании «Сайты Профессионально» проведут бесплатную техническую проверку. Измерим скорость на мобильных устройствах, посмотрим, видит ли ваши картинки поисковый робот, проверим вёрстку на сдвиги и подготовим список конкретных исправлений с оценкой эффекта — без обязательств с вашей стороны.