СОДЕРЖАНИЕ
Влияние Lazy Load на индексирование изображений
Решение проблемы с индексированием картинок из-за Lazy Load
Кейсы с помехами индексирования картинок из-за Lazy Load
Как Вы знаете, поисковики оценивают не только качество контента, функционал сайта, но и скорость его работы. В частности – время, необходимое на полную загрузку страницы. Один из инструментов ускорения загрузки страницы является Lazy Load.
Lazy Load (в дословном переводе – «ленивая загрузка») позволяет подгружать на страницу изображения не сразу, а только по факту прокрутки страницы. И с точек зрения юзабилити, скорости загрузки страницы, нагрузки на сервера, к Lazy Load претензий никаких нет и быть не может. Но как дела обстоят с точки зрения SEO?
Влияние Lazy Load на индексирование изображений
Как ни странно, но в 98% случаев Lazy Load оказывает негативное влияние на индексирование изображений. И вот почему.
Почти всегда при конструировании сайта используются для реализации ленивой загрузки уже готовые решения, т.е. плагины, которые кто-то когда-то написал под конкретную CMS. И почти 100% таких решений работают следующим образом:
- В тег <img>, а именно – в атрибут src, вместо ссылки на реальную картинку вставляется ссылка на «заглушку» - файл, имя и содержание которого не имеет значения, а размер составляет буквально несколько пару байт.
- По мере прокручивания страницы пользователем в атрибуте src происходит замена адреса «заглушки» на адрес картинки.
Т.е. сначала с сервера грузится картинка-заглушка, а потом по мере прокрутки подгружаются остальные картинки.
Визуально это выглядит очень даже круто – плавное появление картинок «из фона сайта».
Нагрузка на сервера при этом распределяется куда более «равномерно», поскольку не нужно грузить все 50 картинок общим объемом 15 мегабайт, можно подгружать по 1-2-3 картинки по 150-200 килобайт каждая.
Да и Google Speed Insight такой подход оценит – накинет несколько баллов на быструю загрузку страницы.
Pingdom Tools тоже в тестах покажет малый объем передачи данных и малое время загрузки.
И всё это звучит просто изумительно! Вот только есть одна маленькая деталь, которая всё портит – боты поисковых систем НЕ УМЕЮТ ПРОКРУЧИВАТЬ СТРАНИЦЫ!!! Именно поэтому вместо картинок-заглушек они видят… КАРТИНКИ-ЗАГЛУШКИ! И для поисковых систем это выглядит примерно вот так:
<img src=”lazy-zaglushka.svg”>
Но если открыть сам код страницы, то там будут ссылки на настоящие картинки:
<img src=”realy_image.jpg”>
Но поисковик эти ссылки не увидит.
Т.е. вместо того, чтобы индексировать картинки, которые будет видеть пользователь, поисковики будут индексировать ЗАГЛУШКИ!!! Хотя кого мы обманываем – не будут поисковики их индексировать…
Ой! Это что ж получается? Из-за ленивой загрузки мы теряем трафик из Google-картинок и Яндекс.Картинок? Да ну нафиг тогда эту ленивую загрузку! Сказали бы мы, если б не одно элементарнейшее решение проблемы.
Решение проблемы с индексированием картинок из-за Lazy Load
А решение действительно элементарное!
Всего-то нужно ссылки на «заглушки» размещать не в атрибуте src, а в атрибуте srcset, но в теге <img> при этом использовать оба атрибута.
Неправильно:
<img src="/realy_image.jpg" src=”lazy-zaglushka.svg”>
Неправильно:
<img data-src="/realy_image.jpg" src=”lazy-zaglushka.svg”>
Правильно (до прокрутки страницы):
<img src="/realy_image.jpg" srcset="lazy-zaglushka.svg">
Правильно (после прокрутки страницы):
<img src="/realy_image.jpg" srcset="/realy_image.jpg">
Вот так вот элементарно и просто решается эта задача! Таким образом мы убиваем двух зайцев одним выстрелом.
Во-первых, мы никак не меняем (визуально) функционал сайта по части «ленивой загрузки».
Во-вторых, в коде в любом случае будет присутствовать ссылка на то изображение, которое необходимо проиндексировать.
В-третьих, поисковые системы БУДУТ ВИДЕТЬ адреса этих изображений.
С решением мы разобрались, теперь поговорим о реализации. Тут на самом деле тоже особых сложностей не возникает.
Во-первых, вот Вам скрипт, благодаря которому Lazy Load будет работать именно так, как и надо.
Во-вторых, для WordPress есть платный плагин True Image & Lazy Load (1800р за 1 домен, 5700р за 5 доменов, либо 12800р за 10 доменов). Самое смешное, что самым дешевым является вариант на 5 доменов, а не на 10, поскольку в первом случае у нас получается 1140р на 1 домен, а во втором – 1280р на 1 домен.
И вот на этом, собственно, самая вкусная часть статьи, пожалуй, и заканчивается. Всё, что ниже – «на любителя», ибо мы переходим к кейсам, когда из-за Lazy Load количество проиндексированных картинок сводится к минимуму, а в особо тяжких случаях – к нулю.
Кейсы с помехами индексирования картинок из-за Lazy Load
Первый кейс – магазин сантехники https://santehnika-tut.ru/.
Что же тут интересного? Заходим на сайт, не прокручивая страницу, нажимаем Ctrl+U, чтобы глянуть код страницы. Открываем и смотрим – заглушки.
Что-что? «Пруф или трындобол?» Как скажете!
Первый пруф – в коде отчетливо видно:
<span class=”title tsh”>Чугунные ванны</span>
<span class=”title tsh”>Акриловые ванны</span>
<span class=”title tsh”>Популярная сантехника</span>
Т.е. на скрине «засветилось» целых 3 разных раздела, причем достаточно «разномастных», поскольку акриловые и чугунные ванны выглядят абсолютно по-разному, даже если и имеют одинаковый цвет и одинаковую форму.
Тем не менее, во всех трех случаях у нас одна и та же заглушка, которая размещена по адресу https://cdn.santehnika-tut.ru/img/asset/preloadbox.png.
Пруф 2. Знаете, как выглядит эта заглушка? Вот так:
А вот сколько места она занимает – всего 311 байт, т.е. менее, чем 1/3 килобайта. И это в PNG? Который еще и не сжат!
Т.е. если эту заглушку прогнать через iloveimg, который уже многократно обозревался у нас в блоге, то эта PNG-шка будет весить еще меньше!
Многие из Вас возразят, мол, ссылки на правильные картинки в коде тоже присутствуют. Да, так и есть. Вот только они прописаны не в атрибутах src, а в атрибутах data-src, а это совершенно другой атрибут.
Второй кейс – всеми нами любимый «Связной».
Здесь всё еще интереснее, поскольку у них не то что «заглушек» нет, у них даже атрибут src нигде не используется!
И это, блин, один из лидирующих магазинов электроники!
Кейс 3 – сайт https://mastera-remonta.com/.
Здесь ситуация схожая со Связным – тоже нет «заглушек» и не используется атрибут src.
Берем случайную страницу, вставляем ее в Google с оператором site: и смотрим картинки:
2 ряда по 6 картинок = 12 и еще 3 внизу, итого 15.
А теперь заходим на страницу и делаем несколько скриншотов. Причем скриншоты мы делали таким образом, чтобы был виден слайдер и был виден адрес (чтоб не говорили, что это скрины с разных страниц). Ничего подозрительного не замечаете?
Если ничего подозрительного не заметили, то:
- очень малая часть фотографий со скриншотов сходится с фотографиями, которые проиндексированы Google’ом;
- 4 скриншота по 6 фото = 24 фото, что уже на 9 больше того, что проиндексировано;
- на этих скриншотах нету повторяющихся фотографий.
Суммарно с этой страницы не проиндексировалась и половина фотографий. Делайте выводы!
Кейс 4 – сайт Santechsklad.com.ua (оставили на десерт).
Это тот редкий случай, когда «снизу снова постучали».
Заходим в рандомный раздел, смотрим код и…
… и снова видим ЗАГЛУШКИ! Заглушки, причем снова в атрибуте src!
Заходим в свойства картинки-заглушки и видим, что у нее размер всего в 1 пиксель. 1 ПИКСЕЛЬ, КАРЛ!!!
Фигня! Вставляем адрес раздела в Google с оператором site: и видим, что…
единственная картинка, которая проиндексирована – ЭТО ЛОГОТИП САЙТА!!!
Итоги
А итоги, мои дорогие, очень неутешительные. Мы выяснили, что «ленивая загрузка» изображений действительно повышает производительность сайта, поскольку картинки подгружаются «порциями», да и не факт, что загрузка всех картинок вообще понадобится. Также мы разобрали несколько примеров того, где Lazy Load реализована криво, из-за чего в лучшем случае индексируются не все картинки, а в худшем – не индексируются вообще. Ну а самое печальное в том, что сайты, у которых правильно реализован функционал Lazy Load, можно пересчитать по пальцам. По пальцам одной руки. Руки токаря, который знает технику безопасности, как свои 3 пальца.
А ведь трафик с картинок, как правило, составляет от 5 до 15% общего трафика на сайт! А теперь представьте, сколько трафика ежедневно теряют те 4 рассмотренные нами сайта.