{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

Как Lazy Load убивает ваши сайты и что с этим делать

Одним из важных факторов ранжирования в Google является скорость загрузки страниц сайта, которую измеряют с помощью теста PageSpeed Insight (PSI). Мы в WP Booster давно занимаемся оптимизацией сайтов на WordPress под требования Google PageSpeed и к нам периодически обращаются за консультациями.

Просматривая чужие сайты, мы видим, что вебмастера, в погоне за “зелёненькими” цифрами, устанавливают плагины, которые улучшают показатели в тесте PSI, но при этом нарушают индексацию изображений. Типичный случай - установка одного из плагинов для отложенной загрузки (Lazy Load) изображений.

Как Lazy Load нарушает индексацию изображений

Если на странице много картинок, то установка плагина отложенной загрузки может значительно увеличить баллы. Проблема в том, что все эти плагины подставляют в атрибут src тега <img> заглушку типа placeholder.svg. И только после прокручивания страницы скрипт подставляет в src ссылку на нужное изображение. Но бот Google не умеет прокручивать страницу! В итоге вместо картинок бот “видит” на странице примерно следующее:

<img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”> <img src=”placeholder.svg”>

вместо:

<img src=”notebook.jpg”> <img src=”smartphone.jpg”> <img src=”televizor.jpg”> <img src=”stiralka.jpg”> <img src=”fen.jpg”>

Владельцы интернет-магазинов и статейных сайтов стараются, делают картинки, фотографируют товары, добавляют их на сайт, но Google о них никогда не узнает, потому что в погоне за баллами PSI они напрочь убили индексацию изображений установкой неправильного Lazy Load.

Вы подумаете что я нагнетаю и проблемы нет? Давайте проанализируем типичные сайты.

Пациент 1. Сантехника-Тут.Ру

Не прокручивая страницу жмём ctrl+U и смотрим исходный код:

Вместо ссылок на изображения в src стоят заглушки preloadbox.png! Хотите узнать как они выглядят? А вот так:

Именно их “увидит” бот Google вместо изображений унитаза, смесителя и кухонной мойки.

То же самое на внутренних страницах:

Пациент 2. Связной

Смотрим исходный код:

У “Связного” не то что заглушки, даже атрибута src нет!

Пациент 3. Мастер ремонта

Смотрим исходный код:

Опять нет атрибута src!

Проверим индексацию картинок на этой странице через оператор site:https://mastera-remonta.com/remont-novostrojka/chistovoj-remont/remont-2-k-kvartiry/ на вкладке Картинки:

На момент проверки на данной странице проиндексировано всего 15 изображений. Хотя в слайдерах и вкладках 49 изображений. И это без учёта фотографий сотрудников (которые в принципе и не должны ранжироваться на этой странице). То есть из-за Lazy Load проиндексировалось менее 50% изображений в этом конкретном примере.

Пациент 4. Santechsklad.com.ua

Опять открываем исходный код:

Судя по всему это Bitrix и в src мы видим заглушку ajax-loader.gif. Тем же способом, что и выше проверяем индексацию картинок. Кроме логотипа не проиндексировалось ни одной картинки!

Единственное, что хоть как-то спасает эти сайты - наличие микроразметки и sitemap.xml, благодаря которым можно сообщить поисковым системам о наличии этих изображений.

Как видите, это не единичный случай. Так что, прямо сейчас проверьте свои сайты, не используете ли Вы неправильный Lazy Load и тем самым “улучшаете” ранжирование сайта в Google.

Как сделать “правильный” Lazy Load?

Так как мы занимаемся в основном оптимизацией сайтов на WordPress, то буду приводить примеры для этой CMS, хотя данная проблема касается сайтов на Bitrix, Opencart и т.д. …..

Для начала грустная новость - в репозитории WordPress нет ни одного плагина, который реализует правильный Lazy Load. Неважно что Вы поставите: Lazy Load от Smush, Lazy Load от WP Rocket или a3 Lazy Load - они все подставляют в src заглушки. Из всех скриптов отложенной загрузки только 2-3 реализуют её правильно.

Но Вы можете сделать сами правильную отложенную загрузку. Для этого нужно, чтобы в атрибуте src всегда была ссылка на изображение, а заглушка подставлялась в атрибут srcset.

Вот так должно быть до прокручивания страницы:

<img src="/full-img.jpg" alt="" srcset="placeholder.svg" sizes="(max-width: 680px) 100vw, 680px" data-srcset=" /full-img-300x169.jpg 300w, /full-img-768x432.jpg 768w, /full-img.jpg 1200w">

Вот так после прокручивания страницы:

<img src="/full-img.jpg" alt="" srcset="/full-img.jpg" sizes="(max-width: 680px) 100vw, 680px" data-srcset=" /full-img-300x169.jpg 300w, /full-img-768x432.jpg 768w, /full-img.jpg 1200w">

В этом видео специалист по техническому SEO под ником Demi Murych объясняет, как правильно сделать Lazy Load .

смотреть с 8 минуты 44 сек

Скрипт рекомендованный в видео для правильного Lazy Load:

Плагин для WordPress, реализующий “правильный” Lazy Load

Если у Вас нет навыков программирования и разработки, то для WordPress Вы можете установить платный плагин True Image & Lazy Load.

Возможности плагина:

  • Правильный Lazy Load — отложенная загрузка изображений на JS, которая не нарушает их индексации.
  • Добавление к изображениям атрибута decoding=”async” (асинхронная загрузка изображений).
  • Добавление ко всем изображениям микроразметки https://schema.org/ImageObject.
  • Добавление к логотипу сайта микроразметки https://schema.org/Organization.
  • И многое другое …..

Мы всегда готовы ответить на Ваши вопросы и бесплатно проконсультировать по оптимизации Ваших сайтов. Пишите в Telegram чат WP Boost.

0
227 комментариев
Написать комментарий...
Aleksey Anisin
Пациент 1. Сантехника-Тут.Ру
 Вместо ссылок на изображения в src стоят заглушки preloadbox.png!
Именно их “увидит” бот Google вместо изображений унитаза, смесителя и кухонной мойки.

1. Смотрим сайт в инструменте проверке мобильных страниц https://search.google.com/test/mobile-friendly?id=4ir_LkaM3jPH3mhRRaeieA
2. Переключаемся на вкладку с html кодом
3. Поиском ищем preloadbox.png
...
4. PROFIT!!1

Ответить
Развернуть ветку
Евгений Калинский
Автор

Дело в том, что данный тул - это не бот гугла.
Он не имеет никакого отношения к индексации контента.
 Итак краткий курс по стадиям индексации контента. Допустим Вы добавили новую страницу. Дальше:
1 стадия - приходит индексирующий бот, который просто парсит хтмл и не выполняет JS. Он увидит заглушки
2 стадия - приходит картиночный бот. Он тоже увидит заглушки
3 стадия - через день, месяц, а может быть никогда! приходит бот, который рендерит JS
Так вот если он придёт никогда - то никогда и не проиндексирует. Следовательно важно отдать картинки при 1-2 стадии индексации.

Ответить
Развернуть ветку
Виктор Петров

А откуда эта информация про голый html?
https://webmasters.googleblog.com/2014/10/updating-our-technical-webmaster.html

Ответить
Развернуть ветку
Евгений Калинский
Автор

Эта ссылка никак не противоречит моим словам и рассказывает про 3ю стадию индексации
Вот русскоязычная статья, которая частично раскрывает суть этапов краулинга и индексирования https://tools.pixelplus.ru/news/seo-javascript

Ответить
Развернуть ветку
Aleksey Anisin

Лол, но там же чёрным по белому написано
1 этап - краулинг 
2 этап - обработка (в том числе is)
3 этап - отрисовка

Ответить
Развернуть ветку
Евгений Калинский
Автор

Мы читаем одно и тоже, а видим разное.
Кроме того даже при обработке js гуглобот всё равно не скроллит страницу. Во всяком случае до конца.

Ответить
Развернуть ветку
Aleksey Anisin

Если не сложно, подскажите где почитать ещё материалы по этапам индексации страницы?

Ответить
Развернуть ветку
Евгений Калинский
Автор

Информация размазана по блогам, единственный способ точно узнать https://vc.ru/seo/169540-kak-lazy-load-ubivaet-vashi-sayty-i-chto-s-etim-delat?comment=2155510
Ну и можно ещё найти Пациента 6, пациента 7 .... Пациента 10 где в поиске по странице не будет картинок

Ответить
Развернуть ветку
Aleksey Anisin

проверка такого плана подойдет http://test.aanisin.ru/ ?

Ответить
Развернуть ветку
Евгений Калинский
Автор

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

Скорее всего для Вашего примера все стадии индексации прошли быстро. Поздравляю.
Проблема Вашего примера, что он не похож на работу стандартного Lazy Load, где скрипт срабатывает по мере скроллинга страницы.
Чтобы корректно проверить, нужно переделать этот пример в длинную страницу на 3-4 экрана и скрипт должен быт ьв конце и срабатывать по событию window.addEventListener('scroll' ну или другому подобному. Тогда можно будет сравнивать корректно.

Ответить
Развернуть ветку
Aleksey Anisin

Ну так объясните. Я без шуток пытаюсь понять, в чем я не прав. 

Ответить
Развернуть ветку
Виктор Петров

Почему же не противоречит. Гуглобот = Хром. Притом новой версии, способный понять, что ему показывают.
И вот вам до кучи гугловский патент 2011 года: https://patentscope.wipo.int/search/en/detail.jsf?docId=WO2006074053
Если коротко: уже тогда речь шла о том, что визуальное представление может определять понимание структуры документа. 

Ответить
Развернуть ветку
Евгений Калинский
Автор

гуглобот = Хром, но только на 3ей стадии!
На 1й стадии приходит примитивный бот, который парсит лишь html!
Ещё раз. На 1ой стадии примитивный бот видит лишь заглушки.
 Бот "как браузер" придёт только на 3ей стадии. Которая может наступить через день, а может и никогда (учитывая последние проблемы в google)

Ответить
Развернуть ветку
Виктор Петров

ну вот я и спрашиваю, откуда данные про "примитивного" бота, когда гуглоиды прямо говорят, что гуглобот=Хром.

Ответить
Развернуть ветку
Евгений Калинский
Автор

1. Создайте новую страницу на синтетическом контенте
2. Половину страницы сделайте на голом хтмл, а половину через js
3. Добавьте её на переобход
4. Следите по логам сервера за тем как приходит гуглобот.
5. Наблюдайте когда в поиске появится контент со 2ой части страницы, реализованной через js.
И все вопросы будут сняты.

Ответить
Развернуть ветку
Виктор Петров

как минимум, способ с синтетическим контентом - плохой вариант. У вас всё равно структурно что-то будет в приоритете. Ну и шаманизмом всё это отдаёт. Даже Screaming Frog в состоянии спарсить страничку со всеми потрохами и правильно отобразить. Сразу, без индексатора, на уровне краулера.

Ответить
Развернуть ветку
Евгений Калинский
Автор

Screaming Frog при парсинге вместо заглушек подставляет правильные урлы на картинки? Я не проверял , но сомневаюсь

Ответить
Развернуть ветку
Виктор Петров

Я не про заглушки, это я сам не проверял

Ответить
Развернуть ветку
Евгений Калинский
Автор

Тогда Screaming Frog некорректный пример. Не нужно его приводить.

Ответить
Развернуть ветку
yesYouStp

данные от того, что наверное делалил такое, не?
У меня тоже js не индексируется нормально, как и SPA. ГУГЛБОТ != хром и уж тем более != пуппетер

Ответить
Развернуть ветку
Виктор Петров

ну может с сайтом какие проблемы?

Ответить
Развернуть ветку
224 комментария
Раскрывать всегда