Правильная реализация ленивой загрузки изображений

29 января 2021

СОДЕРЖАНИЕ

Влияние 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 рассмотренные нами сайта.


Подпишитесь на обновления
Лучшей оценкой нашего труда является ваша подписка на новые публикации. Мы очень постараемся быть интересными и обещаем не спамить.
 

(0)
Читайте также