Ленивая загрузка картинок съедает ваш трафик из поиска по изображениям

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

Как устроена ленивая загрузка и зачем её придумали

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

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

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

Почему робот перестаёт видеть изображения

Чтобы понять корень, надо посмотреть на код глазами робота. Обычная картинка описывается тегом изображения, где в атрибуте src стоит реальный адрес файла, а в атрибуте alt — текстовое описание. Робот заходит, видит адрес, идёт по нему, скачивает файл, читает описание. Изображение попадает в индекс.

Теперь то, что делают многие скрипты ленивой загрузки. Они переписывают код так, что реальный адрес фотографии переносится в атрибут data-src, а в стандартный src подставляется прозрачный пиксель или заглушка. Настоящий адрес возвращает на место уже скрипт — в тот момент, когда посетитель долистал до этого места. Пока скрипт не отработал, в основном атрибуте болтается пустышка.

Дальше вопрос простой: что видит робот, который зашёл на страницу и не выполняет скрипты так же охотно, как браузер живого человека? Он видит прозрачный пиксель. А ваша фотография спрятана в атрибуте, который для индексации изображений не значит ничего. Итог: двадцать картинок на странице, а в индекс уходит двадцать одинаковых заглушек — или не уходит ничего.

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

Встроенная ленивость против скриптов

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

Подробнее об этом — в статье «Нейропоиск Яндекса съедает ваш трафик: что будет с сайтами, когда ответ даёт ИИ».

Критерий	Встроенная ленивость	Скрипт с подменой адреса
Реальный адрес в основном атрибуте	Есть сразу	Спрятан во вспомогательный атрибут
Виден роботу без выполнения скриптов	Да	Нет
Риск для индексации изображений	Минимальный	Высокий
Нужен дополнительный скрипт	Нет	Да, и он сам тормозит отрисовку
Влияние на скорость	Положительное	Спорное: экономия на файлах, потери на скрипте

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

Помогу с продвижением: SEO-продвижение для бизнеса — вывожу сайты в топ Яндекса белыми методами.

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

Первый экран: где ленивость вредит

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

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

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

Атрибут alt: без него остальное бесполезно

Здесь ошибаются даже те, кто с ленивой загрузкой всё сделал правильно. Атрибут alt — текстовое описание изображения. Именно по нему система понимает, что изображено, и решает, по каким запросам показывать вашу картинку. Нет описания — робот видит файл, но не понимает его смысла, и шансов ранжироваться в поиске по изображениям практически нет.

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

Тему разбирал отдельно: «Бесплатный трафик из поиска: как получать 500 заявок в месяц без бюджета на рекламу».

Как писать описания, чтобы они работали:

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

Как проверить, видит ли робот ваши картинки

Проверка занимает несколько минут и делается вручную, без сервисов.

1. Посмотрите исходный код страницы. Именно исходный код, а не панель разработчика: в панели вы видите уже собранную скриптами версию. Найдите свои изображения и посмотрите, что стоит в основном атрибуте. Заглушка или прозрачный пиксель при реальном адресе во вспомогательном атрибуте — это ваш диагноз.
2. Отключите выполнение скриптов в браузере и обновите страницу. Картинки пропали — робот их на входе тоже не увидит. Остались — уже хорошо.
3. Проверьте страницу инструментом в Вебмастере. Он показывает, как робот видит страницу и какие ресурсы с неё забрал. Здесь же видно, попали ли изображения в загруженные.
4. Посмотрите динамику по картиночному поиску. В счётчике и Вебмастере видна доля визитов из поиска по изображениям. Резкий провал, совпадающий по дате с установкой нового плагина или сменой шаблона, — прямая улика.

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

Что ещё закрывает картинки от индексации

Ленивая загрузка — самая частая причина, но не единственная. Прежде чем менять плагины, проверьте ещё четыре вещи.

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

Порядок починки

Очередь	Что делаем	Зачем
1	Проверить исходный код и файл правил для роботов	Определить, есть ли подмена адреса и запрет
2	Убрать подмену: заменить скрипт встроенным атрибутом	Вернуть реальные адреса в код
3	Снять ленивость с изображений первого экрана	Не портить время отрисовки главного элемента
4	Прописать описания всем значимым изображениям	Дать системе понять, что изображено
5	Сжать файлы и перевести в современные форматы	Ускорить сайт сильнее, чем даёт любая ленивость
6	Добавить изображения в карту сайта	Ускорить обнаружение файлов роботом
7	Через 2–4 недели проверить динамику картиночного трафика	Убедиться, что индексация восстанавливается

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

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

Сколько трафика на кону

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

Смежный материал по теме — «Как увеличить трафик из поиска Яндекс и улучшить позиции сайта».

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

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

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

Частые вопросы

Нужно ли вообще включать ленивую загрузку? Да, если на страницах много изображений. Правильно реализованная, она ускоряет открытие и ничего не ломает. Отказываться от неё из-за страха потерять картинки не нужно — нужно проверить реализацию.

Как быстро восстанавливается индексация после починки? Первые изменения видны через две-четыре недели, полное восстановление занимает до двух-трёх месяцев на большом каталоге. Ускорить можно отправкой основных страниц на переобход и добавлением изображений в карту сайта.

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

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

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

Коротко

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

Если хотите разобраться, что именно закрывает картинки вашего сайта от индексации и как ускориться без потери канала, приходите на SEO-консультацию: посмотрим код страниц, файл правил для роботов и динамику картиночного трафика.