Форум Альфа-Банка про диджитал
До начала осталось:
Узнать
SEO
Евгений Калинский
12 999

Как 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.

{ "author_name": "Евгений Калинский", "author_type": "self", "tags": [], "comments": 210, "likes": 21, "favorites": 140, "is_advertisement": false, "subsite_label": "seo", "id": 169540, "is_wide": false, "is_ugc": true, "date": "Thu, 22 Oct 2020 14:08:45 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
0
210 комментариев
Популярные
По порядку
Написать комментарий...
12

1. >Но бот Google не умеет прокручивать страницу!
Я оооооочень сильно в этом сомневаюсь, учитывая Pupperteer (https://pptr.dev/) и так далее
2. Я больше доверяю ребятам из гугла: https://web.dev/lazy-loading-images/, чем бородатому мужику из Воронежа на фоне ковров: https://prnt.sc/v4s49n

Ответить
6

1. Почитайте про фазы индексирования гугла для начала и поймете, что на первых стадиях идет работа сначала с голым HTML, без браузера
2. Вы читаете официальные мануалы, но не понимаете как оно работает, а бородатый мужик из Воронежа читает и экспериментально подтверждает каждое свое слово, в его видео есть все ссылки, чтобы провести данные эксперименты самостоятельно. Как только вы сделаете лично хоть один из его экспериментов - можно будет поговорить дальше. Спасибо

Ответить
–13

но не понимаете как оно работает

ой бле, даже коменнтировать это не буду, умник нах, ты то тока один у нас все понимаешь, остальные дибилы

Ответить
5

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

Ответить
–8

но не понимаете как оно работает

Это по твоему ведение дискусии? Ты товарищ откровенно хамишь, и послали тебя по делу, так что заглохни плесень

Ответить

Ранний Даниль

Якушенк…
0

Пашка, факапнулся ты. Лучше заглохни

Ответить
4

Павел а Вы в курсе, что во втором пункте ребята "из Гугла" пишут похожий подход, что и Евгений описал, указав в src заглушку, а в data-src или srcset ссылку на изображения?

Ответить
1

Аналогично

Ответить
0

На самом деле нет  книжки по тому, как именно гуглбот реагирует на безграмотно настроенные сайты (а тут мы имеем дело именно с таким случаем) лейзилоад причина вполне себе не на первом месте. А автору только одно можно посоветовать - учите матчасть монсеньер, желающий тут учить нас бездарей. Подсказка - истинная причина лежит в том, что любой поисковик просто стремится экономить свои ресурсы. Ошибка настолько банальна, что должно быть стыдно учителю.
*поправка: сайты.

Ответить
8

Раздутая проблема.
Сами по себе картинки редко когда реально влияют на ранжирование. Это раз.
А два - ну составьте сайтмап по картинкам и скормите гуглоботу. Зачем огород городить?

Ответить
2

Про то что картинки не влияют на ранжирование - устаревшая информация. Ознакомтесь https://www.youtube.com/watch?v=F6KGcb6trXc
Да сайтмап и микроразметка  частично решит проблему, но не полностью

Ответить
1

Я не сказал, что вообще не влияют. У гугла философия простая: страничка должна максимально соответствовать запросу. Нужно 20 иллюстраций - выкладывай.
Но 20 стоковых картинок ни о чём веса страничке не дадут.
А теперь вопрос: много сайтов, реально вкладывающихся в видуальный медиа-контент?

Ответить
3

Если Вы проанализируете выдачу, то поймёте, что в ТОПе по конкурентным тематикам нет сайтов с неуникальными картинками.
Поэтому кто ещё не вкладывается - тот много теряет

Ответить
5

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

Ответить
0

Это Ваше право так считать. А тот кто анализирует выдачу - поймёт закономерности. И особенно как изменилось ранжирование  после майского апдейта.

Ответить
0

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

Ответить
0

Ну а не голословно что можно обойтись без Н1 , а просто выделить жирным и это будет считаться заголовком? Есть примеры из выдачи?

Ответить
2

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

Ответить
0

Я много раз слушал эти говорящие головы и хочу сказать - они почти всегда говорят правду. Но эту правду они говорят так, что ты не сможешь её применять "в лоб". И только потом, когда начинаешь в выдаче замечать закономерности, до тебя доходит, что то что говорил Каттс правда, только он не рассказал детали, а без них его рассказ бесполезен.

Ответить
0

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

Ответить
1

Виктор, да перестаньте силы тратить. Человеку не нужен диалог. Есть только его мнение

Ответить
0

Согласен 👍
Можно просто использовать нативный атрибут loading="lazy"

Ответить
0

Видно, что не посмотрели исследование Мурыча про нативный лейзи

Ответить
3

В статье не указан ни один правильный пример ленивой загрузки с точки зрения ux/seo, вот вам и современный фронтенд, главное свой говно плагин лохам толкнуть

Ответить
2

Ждём статью от Вас с примерами правильных методов реализации

Ответить
5

У меня нет плагина который я хочу продавать

Ответить
4

Долгое время занимаюсь именно выводом картинок в топ и приводом траффика с них на проекты.
HTML код одного изображения занимает около 50 строк.
Гуглу показываем одно, юзеру другое, гостю третье.
Ну и figure, figcapture, alt, title в ссылке с превью на полноразмер. Там десятки факторов.

А по сути автор прав - заглушки зло.

Ответить
1

Поделитесь опытом как правильно сделать?

Ответить
0

Вот как выглядит код сейчас

Ответить
0

Ваш код полностью противоположен мои представлениям о вёрстке.
Например, зачем Вы применяете семантический тег<i>, чтобы обернуть тег картинки?
По определению:
Тег определяет часть текста в альтернативном голосе или настроении. Содержимое тега обычно отображается курсивом.
Тег может использоваться для обозначения технического термина, фразы из другого языка, мысли или названия корабля и т. д.
То есть как в этом контексте вообще обосновано применение тега i для картинки?

Ответить
0

Это обусловлено версткой и is для корректного отображения и на десктопе и в приложении. Цикл картинок выводится плиткой на подобии masonry.

Ответить
1

Понимаете.... применение семантических тегов типа strong, i для визуального оформления контента....такое
Но всё равно спасибо, что поделились кодом

Ответить
1

Тут по сути i это обертка корая не используется в других кусках кода картинок и ее можно безопасно отлавливать js. По сути можно изменить на тот же small или b. Это не имеет значения.

Ответить
0

А webp не используете? Сделала на своих сайтах для браузеров, что читают этот формат, подгрузку изображений в нем. Скорость прямо заметно улучшилась.

Ответить
0

Это один из способов. Но webp не поддерживает Safari.Это конечно решается с помощью тега picture, но в итоге, зачем он нам нужен если можно сделать правильный Lazy Load?

Ответить
0

Правильно, зачем вообще нужны эти пользователи, пусть ждут сколько хотят пока эти заглушки в изображения превратятся. Да и за трафик они сами платят. Главное же чтоб Гугл балы нам нарисовал.

Ответить
0

Пока нет, возможно начну. В планах полноценный платный cloudflare который сам все сделает.

Ответить
0

Мне проще завтра с рабочего компа показать сразу готовый код.

Ответить
0

В этом конкретном случае сама запись "Topanga state park", автор записи подписал картинку "Seaside view in Malibu", если бы нет то вместо Seaside view... было бы Topanga state...
Выдернуты локация съемки и имя автора. Ну и сама модель камеры. Сервис для фотографов. Все разложено по метатегам. 

Ответить
1

Всегда интересно поговорить со специалистом, который занимается чем-то похожим. А вот "в ссылке с превью на полноразмер" - это Вы про Lightbox, когда картинка оборачивается в ссылку, чтобы можно было увидеть полный размер?

Ответить
0

Да, с 800 на 2000-4000 пикс

Ответить
0

Наши опыты с картинками начали с общения с Мурычем, просмотра его видео и выступлений на вебинарах. И вот основные тезисы:
 тег figure нужно убирать, он снижает значимость контента внутри него;
соответственно и figcapture отпадает;
 Lightbox в том виде как есть, то есть картинка обёрнутая в ссылку, это плохо. нужно чтобы картинка была без ссылки и просто отрабатывался клик на картинке по JS и затем "всплытие" картинки в бОльшем размере;
Можете прокомментировать?
Ну и если интересно, добавляйтесь в тг, возможно нам есть что обсудить.

Ответить
0

У меня перед сном час что то почитать и с утра за кофе) Остальное что на работе - работовое)

Ответить
0

я ниже выложил свой код

Ответить
0

Но, автор предлагает заменить половину на картинки, а остальное оставить как есть. Что не есть хорошо!

Ответить
0

Подскажите, где и что почитать по продвижению картинок, а то как то давно задавался вопросом, но как то всё мутно было?!

Ответить
0

Просто правильно указывать все необходимое для их индексирования. По сути у меня на проекте
а. В принципе не нужен левый трафик - то есть нет смысла приводить юзеров не на целевую стр их поиска
б. Очень много картинок - это сервис для фотографов и очень легко создать низкочастоники. 
А так все зависит от задач и пациента, я из "почитать" только могу рекомендовать официальные доки Гугла и нужных соц-сетей, я много внимания уделяю ФБ и Пинтересту - метатеги и сниппеты.

Ответить
1

автор спс за статью...
остальные комментаторы какие-то петушки.. кукарекуют не по делу

Ответить
2

Как сделать “правильный” Lazy Load?
Вот так: https://web.dev/browser-level-image-lazy-loading/

Ответить
1

это нативный loading=lazy и если Вы посмотрите видео в статье то поймёте что он вредит, а не помогает

Ответить
2

простите что влезаю, но я посмотрел видео, вреда не увидел
да, реализация нативной ленивой загрузки пока далека от идеала, но:

сайт без неё < сайт с нативной ленивой загрузкой < сайт с ленивой загрузкой через сторонние скрипты

а если еще покопать тему(почитать коменты к тому же видео), можно узнать, что хром поддерживает css свойство content-visibility, которое вполне себе неплохо работает вместе с нативной ленивой загрузкой
оригинал - https://murych.com/articles/loading-lazy/examples/html/
дотюненная версия - https://www.dudka.name/exmpl/loading_lazy/
 

Ответить
2

Спасибо, не следил за комментариями под тем видео. Очень интересное решение. Буду тестить. Но очевидный недостаток то, что работает пока только в Chrome 85+. Но очень интересное решение

Ответить
0

если большая часть платящих пользователей это хромоюзеры (а в большинстве случаев это так), то нативной загрузки вполне достаточно, благо они и так почти все на 85 хроме сидят https://caniuse.com/usage-table

Ответить
1

Кто платит, у того Сафари, по известным причинам

Ответить
0

Это личный опыт или есть какие-то исследования/кейсы/статьи на эту тему?

Ответить
0

Явно бородач что-то начудил, у меня все - ок

Ответить
0

Там есть все ссылки. Все утверждения из видео Вы можете проверить сами.

Ответить
0

Все равно, бородач что-то накарабасил у себя. Нативно все работает

Ответить
3

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

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Дело в том, что данный тул - это не бот гугла.

https://support.google.com/webmasters/answer/6352293?hl=en&ref_topic=9384213
This tool accesses the page as Googlebot (that is, not using your credentials, but as Google).

Ответить
0

надеюсь в вашей WP Booster только "дипломированные специалисты" младше 37 лет, иначе моя гипотеза насчет компетентности им подобным летит в тар-тарары :)

Ответить
0

Вы удивитесь, но https://santehsklad.com.ua/krany-i-ventili/krany-dlya-vody.html ведет себе точно так же.
Я конечно понимаю, что своего покупателя вы и так найдете, но хотя бы постарались найти сайты с реально кривой загрузкой, благо это не так сложно

Ответить
0

Что я должен там увидеть) 

Ответить
0

¯ \ _ (ツ) _ / ¯

Ответить
0

Забавно. Сразу не посмотрел. А знаете почему там нет preloadbox.png? Там нет ни одного тега img! То есть этот тул не видит не то что заглушек, а даже тегов картинок!

Ответить
2

Не совсем понял логики выбора пациентов, у которые изображения сделаны не правильно. Ибо если верить данным из условного ahrefs, у данных сайтов нет каких-то видимых или весомых проблем с ранжированием. В той же выдаче изображения в сниппете есть - https://prnt.sc/v4mp3o
Было бы интересно увидеть какие-то реальные кейсы по изменениям в изображениях. Условно:
- вот 22.10 на сайте изображения сделаны криво
- замеряем позиции сайта в обычной выдаче и по картинкам
- 23.10 мы сделали правильные изображения на сайте
- 07.11 показываем результаты
- ???
- профит

Ответить
1

2 недели слишком быстро. Переиндексация картинок длится примерно месяц. В моих экспериментах 27-30 дней. 
Вернее так. Учёт изменений на странице (в том числе связанных с картинками) длится примерно 30 дней.

Ответить
0

Ну я же написал, про условных 14 дней
Ну а про 30 дней есть какие-то видимые изменения чтоб можно было показать до/после?

Ответить
0

Нужен пациент для внедрения. Есть такой сайт?

Ответить
0

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

Ответить
0

Как мы сможем зафиксировать состояние "до" если на моих сайтах нет неправильного лейзи лоада? У меня уже  примерно год как всё внедрено и исправлено.
Я предлагаю взять Ваш сайт. Есть с неправильным лейзи?

Ответить
1

А как вы фиксировали как правильно делать, если у вас не было замеров до/после?
Только по информации из вне? Я просто почему спрашиваю, потому что я вот такой информации как правильно делать - видел достаточно много. Но вот как-то не видел ни одного реального примера влияния этих изменений. Посему, был бы рад их посмотреть

Ответить
2

Вы же понимаете что сложно сделать изолированный эксперимент на живом сайте? на живом сайте постоянно что-то меняется. Мурыч для экспериментов генерировал "куздру" на отдельных доменах.
В общем мы открыты для предложений. Есть сайты для желающих проверить влияет ли правильный Lazy Load - велкам. Будем тестить вместе. Ну и потом вместе напишем получилось или нет.

Ответить
0

Не видя админки этого сайта не смогу сказать, скорее всего ошибка в настройке functions.php

Ответить
0

А есть пример сайта без индексации картинок (невозможно найти) в гугле и в сохраненной копии, когда на их месте пусто?

Ответить
0

Если Вы имеете ввиду кеш гугла (сохранённую копию), то он не имеет отношения к работе поискового робота и по состоянию кеша мы не можем судить о том что проиндексировалось, а что нет.
Насчёт "пример сайта без индексации картинок" - я наделся читатели статьи теперь, зная про наличие проблемы, подкинут примеры.
на самом деле у наших клиентов есть сайты где было всё плохо с индексацией картинок. Но показывать без их согласия сайты я не могу.

Ответить
0

В приведенном примере страница просто страница дублирует картинку c  https://www.svyaznoy.ru/catalog/phone/224/5756213/comments 

картинка с этой страницы в индексе есть

https://www.google.com/search?q=site:https://www.svyaznoy.ru/catalog/phone/224/5756213/comments&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiS24HCwsjsAhUZ4OAKHesNAMYQ_AUoAXoECAIQAw

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

Ответить
1

Я приводил в пример листинг, а не отдельную страницу товара. Насчёт того что картинка в индексе - просто потому что она на 1м экране и скрипт lazy load мгновенно при загрузке подставляет в src нужную картинку.
В статье говорится о том, что картинки ниже первого экрана не будут индексироваться.

Ответить
0

А какой смысл что бы поиск проиндексировал мелкие картинки со второго экрана листинг?

Ответить
0

Если мелкие - конечно не нужно. Более того, если речь идёт про иконки и сервисные изображения, то их нужно оформлять не через тег img, а стилями через background-image.
Но в статье речь идёт именно про индексацию полезных изображений, как например для Пациента 3.

Ответить
0

А зачем тогда других пациентов приводите? Да и поиск проиндексирует как раз по ссылке большие картинки лучшие по качеству, что только плюсом будет. 

Ответить
1

Хорошая статья должна давать различные примеры сайтов

Ответить
0

Хороша статья должна приводить конкретные примеры и аргументацию. Я конечно понимаю, что очень хочется свой плагин продать и денег заработать, но може тогда не притягивать за уши примеры, которые не о чем! 

Ответить
0

Расскажите как должен выглядеть пример "о чём"

Ответить
0

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

Ответить
0

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

Ответить
0

Так в чем смысл вашего плагин тогда? Разве не в попадании картинок в индекс? 

Ответить
0

Да.
Но плагин не снимает ответственности с разработчика сайта, правильно сверстать иконки и превьюшки.
Если разрабочик ошибся в этом - то ему никакой плагин не поможет.

Ответить
1

Так кому нужен ваш плагин? Каковы условия его применения и что от даст за 1800 рублей? 

Ответить
0

В описании всё написано. Но можете написать мне в личку в тг и я объясню подробнее

Ответить
0

Так вы статью написали для продвижения плагина своего сюда, тут и ответьте пожалуйста! 

Ответить
0

Неправда, что статья только для продвижения. Я написал статью в которой:
1. Обозначил проблему
2. Показал примеры
3. Дал бесплатный способ её решения
4. Дал платный способ её решения
 Опытный разработчик по моим рекомендациям внедрит правильный лейзи и ничего не купит.
А значит для него это была полезная бесплатная инструкция.

Ответить
0

Повторюсь тогда: Так кому нужен ваш плагин? Каковы условия его применения и что от даст за 1800 рублей?

Ответить
0

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

Ответить
1

Конкретно, за счет чего вернуться вложения в ваш плагин? Вы ничего конкретно сказать не можете!
Приведенные сами сайты ИМ разные имеют большое количество картинок только в листингах, для которых ваше решение бесполезно, вы сами это признали. А большие оригинальные фото и так проиндексируются норамльно по ссылкам и с товарных...

В чем плюсы?

Скоросто загрузки увеличится? Нет, скорее уменьшится
На продвижение повлияет? Нет
Скопище превьюх (дублей) в индексе Гугла положительное явление? Нет

Ответить
1

Как проиндексируются большие изображения, если на них нет ни откуда ссылок (xml карта, html) и вместо ссылок в html ссылка на заглушку.

Плагин же добавляет микроразметку с нужными для ПС размерами, добавляет правильный srcset, максимальное изображение вставляет в src (после отрабатывания лейзи)

Похоже вы не понимаете, что делает плагин и для чего. Вы видео с канала Деми Мурыча поглядите - станет яснее.

Ответить
–1

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

Ответить
0

Гугл в разных местах покажет превью разного размера: 1:1, 4:3, 16:9 все одновременно они не будут выводиться) В сниппете один размер, в поиске по картинкам - другой и так далее.

Ответить
0

Какой глубокий смысл в этом!??? 

Ответить
0

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

Ответить
–1

При чем тут пользователь? Хватит мозги пудрить! Вы тут всем про поисковики втираете и про правильную верстку!

Ответить
–1

ну будут примеры, пишите, а так факторов много, некоторые элементор в ввордпрессе юзают, так там весь сайт в дно превращается.

Ответить
0

Добавил в статью "Пациент 3"

Ответить
0

а какой картинки нет в гугле?

Ответить
0

Ну там же написано с цифрами. Откройте исходный код и посмотрите.

Ответить
0

Вам же в чате уже писали, Вы не можете гарантировать улучшения ранжирования. Зачем Вы обманываете потенциальных клиентов в описании плагина?

Ответить
1

И давайте Вы начнёте думать, прежде чем бросаться голословными обвинениями что мы "обманываем клиентов". Так и я могу написать что Dmitry Verzjikovsky обманщик.

Ответить
0

Где Вы нашли слово "гарантия"?

Ответить
1

Ну у вас написано "Мы безусловно уверены, что применение плагина улучшит ранжирование сайта в поисковой системе Google" прям вот так!? Реально!? 

Ответить
0

там есть слово "Гарантия"?

Ответить
1

Перефразирую. Вы реально уверенны? На чем основывается ваша уверенность? 

Ответить
0

Да, уверен.
На личном опыте внедрения.

Ответить
0

Примеры приведите пожалуйста!

Ответить
–1

Я свои сайты "светить" не буду. Потом начинаю скликивать рекламу или ещё какие нибудь чудеса устраивать

Ответить
–2

 Скликивания да чудеса... Вы себе льстите! Так вы покажите продукт лицом, или показать нечего?

Ответить
0

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

Ответить
0

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

Но в таком случае это уже не lazy load, так как если в теге src прописана ссылка на картинку - значит она будет загружена браузером во время рендеринга страницы, а потом еще ваш скрипт подгрузит дополнительную картинку (на замену той что в src).

И в документации к Lozad.js в примерах использования приведены стандартные техники отложенной загрузки, когда используется data-src вместо src.

Ответить
4

У Вас распространённое заблуждение про то как работает srcset. Не будет ничего грузится дважды. Вот простая статья, которая объясняет как это всё работает https://tproger.ru/translations/responsive-images-using-srcset/

Ответить
2

Ознакомился, действительно не знал об этом. Ну тогда методика на самом деле отличная, вопросов нет)

Ответить
1

"И в документации к Lozad.js в примерах использования приведены стандартные техники отложенной загрузки, когда используется data-src вместо src."
Забавно, но документация неправильная, а код работает правильно. То есть подставляет заглушку в srcset. Это парадокс

Ответить
0

Напишите пожалуйста, как нужно правильно использовать lozad.js, не могу разобраться! в какой атрибут заглушка, а в какой само изображение...

Ответить
0

Проще говоря, при наличии заполненного srcset, браузер берёт картинку оттуда, а не из src. Например такой код прекрасно отработает в браузере даже без src: <img srcset="тут заполненный атрибут"

Ответить
–4

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

Ответить
4

Шошо? Какой нахер скрипт миниатюр, любите вы всяким гоавно js кодом сайты засерать...

Ответить
1

где же можно познакомиться с этим волшебным "скриптом миниатюр"?

Ответить
0

Cloudflare

Ответить
0

 на сайте cloudflare.com?

Ответить
0

Да, он в платных тарифах сам берет ваш фулл и режет его на сколько угодно и отдает их их CDN своих.

Ответить
–1

Вы видимо не программист, а просто вебмастер, который ставит плагин, судя по вопросу. Я лучше напишу статью об этом раз вам интересно. 
Тут ниже люди пишут про клоудфларе, но это совсем не решение, особенно для российского интернета. У них там постоянно какие то блокировки по ip + надо платить за тариф.

Ответить
1

Прочитал в комментах, что что-то там про w3c валидацию вы сказали, мол есть кавычки, робот гугла не спарсть все как надо... А ничего, что робот гугла строит xml dom из html, что w3c просто рекомендации, что парсинг ботом происходит не по регекспам?
Чухня какая-то, а не статья. 
Lazy load by wp rocket лучшее, что случалось с пользователями wp, т.к бесплатный и с инлексацией картинок нет проблем, как и писал выше, тег noscript никто не отменял 

Ответить
–1

Подводя итог: плагин по факту ничего на практике не даёт, но вы покупайте! Прям заголовком себе на главной повесьте! 

Ответить
1

А чего Вы прицепились к плагину?
В статье есть пример бесплатной реализации правильного lazy load на JS. Внедряйте.
Но Вам мозолит глаза плагин?
Может Вы завидуете?

Ответить
–1

Похоже вы совсем не поняли, что делает плагин, для чего он нужен и в чем проблема нативного атрибута loading=lazy. Посмотрите описание в конце статьи и на сайт и видео Мурыча. 

Ответить