Одним из важных факторов ранжирования в Google является скорость загрузки страниц сайта, которую измеряют с помощью теста PageSpeed Insight (PSI). Мы в WP Booster давно занимаемся оптимизацией сайтов на WordPress под требования Google PageSpeed и к нам периодически обращаются за консультациями.
Просматривая чужие сайты, мы видим, что вебмастера, в погоне за “зелёненькими” цифрами, устанавливают плагины, которые улучшают показатели в тесте PSI, но при этом нарушают индексацию изображений. Типичный случай - установка одного из плагинов для отложенной загрузки (Lazy Load) изображений.
Как Lazy Load нарушает индексацию изображений
Если на странице много картинок, то установка плагина отложенной загрузки может значительно увеличить баллы. Проблема в том, что все эти плагины подставляют в атрибут src тега <img> заглушку типа placeholder.svg. И только после прокручивания страницы скрипт подставляет в src ссылку на нужное изображение. Но бот Google не умеет прокручивать страницу! В итоге вместо картинок бот “видит” на странице примерно следующее:
вместо:
Владельцы интернет-магазинов и статейных сайтов стараются, делают картинки, фотографируют товары, добавляют их на сайт, но 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.
Вот так должно быть до прокручивания страницы:
Вот так после прокручивания страницы:
В этом видео специалист по техническому SEO под ником Demi Murych объясняет, как правильно сделать Lazy Load .
Скрипт рекомендованный в видео для правильного 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.
1. >Но бот Google не умеет прокручивать страницу!
Я оооооочень сильно в этом сомневаюсь, учитывая Pupperteer (https://pptr.dev/) и так далее
2. Я больше доверяю ребятам из гугла: https://web.dev/lazy-loading-images/, чем бородатому мужику из Воронежа на фоне ковров: https://prnt.sc/v4s49n
1. Почитайте про фазы индексирования гугла для начала и поймете, что на первых стадиях идет работа сначала с голым HTML, без браузера
2. Вы читаете официальные мануалы, но не понимаете как оно работает, а бородатый мужик из Воронежа читает и экспериментально подтверждает каждое свое слово, в его видео есть все ссылки, чтобы провести данные эксперименты самостоятельно. Как только вы сделаете лично хоть один из его экспериментов - можно будет поговорить дальше. Спасибо
Павел а Вы в курсе, что во втором пункте ребята "из Гугла" пишут похожий подход, что и Евгений описал, указав в src заглушку, а в data-src или srcset ссылку на изображения?
Аналогично
Комментарий недоступен
Раздутая проблема.
Сами по себе картинки редко когда реально влияют на ранжирование. Это раз.
А два - ну составьте сайтмап по картинкам и скормите гуглоботу. Зачем огород городить?
Про то что картинки не влияют на ранжирование - устаревшая информация. Ознакомтесь https://www.youtube.com/watch?v=F6KGcb6trXc
Да сайтмап и микроразметка частично решит проблему, но не полностью
Согласен 👍
Можно просто использовать нативный атрибут loading="lazy"
В статье не указан ни один правильный пример ленивой загрузки с точки зрения ux/seo, вот вам и современный фронтенд, главное свой говно плагин лохам толкнуть
Ждём статью от Вас с примерами правильных методов реализации
Комментарий недоступен
Поделитесь опытом как правильно сделать?
Всегда интересно поговорить со специалистом, который занимается чем-то похожим. А вот "в ссылке с превью на полноразмер" - это Вы про Lightbox, когда картинка оборачивается в ссылку, чтобы можно было увидеть полный размер?
Но, автор предлагает заменить половину на картинки, а остальное оставить как есть. Что не есть хорошо!
Подскажите, где и что почитать по продвижению картинок, а то как то давно задавался вопросом, но как то всё мутно было?!
автор спс за статью...
остальные комментаторы какие-то петушки.. кукарекуют не по делу
Как сделать “правильный” Lazy Load?
Вот так: https://web.dev/browser-level-image-lazy-loading/
это нативный loading=lazy и если Вы посмотрите видео в статье то поймёте что он вредит, а не помогает
Вместо ссылок на изображения в 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 стадии индексации.
Вы удивитесь, но https://santehsklad.com.ua/krany-i-ventili/krany-dlya-vody.html ведет себе точно так же.
Я конечно понимаю, что своего покупателя вы и так найдете, но хотя бы постарались найти сайты с реально кривой загрузкой, благо это не так сложно
Что я должен там увидеть)
Не совсем понял логики выбора пациентов, у которые изображения сделаны не правильно. Ибо если верить данным из условного ahrefs, у данных сайтов нет каких-то видимых или весомых проблем с ранжированием. В той же выдаче изображения в сниппете есть - https://prnt.sc/v4mp3o
Было бы интересно увидеть какие-то реальные кейсы по изменениям в изображениях. Условно:
- вот 22.10 на сайте изображения сделаны криво
- замеряем позиции сайта в обычной выдаче и по картинкам
- 23.10 мы сделали правильные изображения на сайте
- 07.11 показываем результаты
- ???
- профит
2 недели слишком быстро. Переиндексация картинок длится примерно месяц. В моих экспериментах 27-30 дней.
Вернее так. Учёт изменений на странице (в том числе связанных с картинками) длится примерно 30 дней.
Вы написали:
... Вы можете сделать сами правильную отложенную загрузку. Для этого нужно, чтобы в атрибуте src всегда была ссылка на изображение, а заглушка подставлялась в атрибут srcset.
Но в таком случае это уже не lazy load, так как если в теге src прописана ссылка на картинку - значит она будет загружена браузером во время рендеринга страницы, а потом еще ваш скрипт подгрузит дополнительную картинку (на замену той что в src).
И в документации к Lozad.js в примерах использования приведены стандартные техники отложенной загрузки, когда используется data-src вместо src.
У Вас распространённое заблуждение про то как работает srcset. Не будет ничего грузится дважды. Вот простая статья, которая объясняет как это всё работает https://tproger.ru/translations/responsive-images-using-srcset/
"И в документации к Lozad.js в примерах использования приведены стандартные техники отложенной загрузки, когда используется data-src вместо src."
Забавно, но документация неправильная, а код работает правильно. То есть подставляет заглушку в srcset. Это парадокс
Проще говоря, при наличии заполненного srcset, браузер берёт картинку оттуда, а не из src. Например такой код прекрасно отработает в браузере даже без src: <img srcset="тут заполненный атрибут"
Вам же в чате уже писали, Вы не можете гарантировать улучшения ранжирования. Зачем Вы обманываете потенциальных клиентов в описании плагина?
И давайте Вы начнёте думать, прежде чем бросаться голословными обвинениями что мы "обманываем клиентов". Так и я могу написать что Dmitry Verzjikovsky обманщик.
Где Вы нашли слово "гарантия"?
Ну и статья. Сразу видно что люди толком не разбираются в вопросе. Лази лоад это прошлый век. Сейчас уже надо ставить скрипт миниатюр, который сам все сделает как надо. Эх, молодёжь...
Шошо? Какой нахер скрипт миниатюр, любите вы всяким гоавно js кодом сайты засерать...
где же можно познакомиться с этим волшебным "скриптом миниатюр"?
Прочитал в комментах, что что-то там про w3c валидацию вы сказали, мол есть кавычки, робот гугла не спарсть все как надо... А ничего, что робот гугла строит xml dom из html, что w3c просто рекомендации, что парсинг ботом происходит не по регекспам?
Чухня какая-то, а не статья.
Lazy load by wp rocket лучшее, что случалось с пользователями wp, т.к бесплатный и с инлексацией картинок нет проблем, как и писал выше, тег noscript никто не отменял
Подводя итог: плагин по факту ничего на практике не даёт, но вы покупайте! Прям заголовком себе на главной повесьте!
А чего Вы прицепились к плагину?
В статье есть пример бесплатной реализации правильного lazy load на JS. Внедряйте.
Но Вам мозолит глаза плагин?
Может Вы завидуете?
Похоже вы совсем не поняли, что делает плагин, для чего он нужен и в чем проблема нативного атрибута loading=lazy. Посмотрите описание в конце статьи и на сайт и видео Мурыча.
Господи, Господи, Господи!
Автор далёк от реального seo и понимания работы поисковых роботов. Как и работы больших проектов, типа Связного.
Первое. Никто уже не парсит голый html, как вы тут всех пытаетесь убедить. Тот же Google отрисовывает страницы движком хрома, включая js. То есть в итоге картинка для паука прописывается когда он делает ПРОКРУТКУ страницы. Представьте себе!
Второе! Проекты уровня Связного могут позволить себе давать отдельный код для парсинга поисковиками. Для уменьшения нагрузки или простановки альтернативных cdn.
Так что с lazy load очень трудно что-то напортачить.
И чтобы вам, как топикстартеру не быть голословным. Лучше вменяемые примеры, где был бы включён LL, и все было плохо с ранжирование. Потом его отключили и все стало супер.
Это как раз Вы поверхносто разбираетесь в сути. При первичном краулинге как раз парсится голый html
Далее цитаты: " краулер не умеет выполнять пользовательские сценарии вроде кликов, заполнения форм и прочих взаимодействий с элементами на странице, поэтому всё, что должно попасть в индекс, обязано быть доступно сразу в DOM документа. "
"Googlebot не умеет скроллить страницу, поэтому загружаемый визуальный размер документа отличается от привычного пользователю. "
Реклама платного плагина? который никому не нужен?
Все картинки прекрасно индексируются в data-src, даже без учета того, что гугл бот давно обрабатывает js, по крайней мере простейший..
https://web.dev/browser-level-image-lazy-loading/
даже тут теперь предлагают совмещать loading lazy с data-src и lazysizes
Яндекс говорит, что прекрасно индексирует
https://yandex.ru/support/images/indexing.html
Если вы уж так боитесь, что не проиндексирует, добавьте картинку рядом в noscript чем заниматься такой ахинеей.
PS У гугла совсем не примитивный бот https://support.google.com/webmasters/answer/1061943?hl=ru
Если уж картинки не индексируются, значит они не нужны ПС.. как плохие или дубликаты.
В доках lazysizes говорят, что не скрывает картинки от гугла, даже если нет атрибута src:
SEO improved: lazysizes does not hide images/assets from Google. No matter what markup pattern you use. Google doesn't scroll/interact with your website. lazysizes detects, whether the user agent is capable to scroll and if not, reveals all images instantly.
Т.е про тег noscript и валидный внутри img с src уже забыли? Или это робот уже не видит?
Но это костыли. А можно сделать просто сразу правильно без костылей в виде noscript
Почему бы не использовать нативный атрибут?
Там есть свои минусы, связанные с тем что логика нативной ленивой загрузки не очень гибкая и слабо (почти никак) настраивается, посмотрите видео, там вполне интересно и доступно это рассказывается.
Это не значит что его не нужно использовать — наоборот по соотношению вложенных усилий и полученного результата это наиболее оптимальный вариант. Просто нужно отдавать себе отчёт, что это не серебряная пуля и там есть свои подводные камни.
Так data-src должны понимать боты, по крайней мере Яндекс точно:
https://yandex.ru/support/images/indexing.html
Да нам уже указали .
Здесь в статье речь шла в основном про Google.
Но разработчики Яндекса молодцы. Когда они увидели это безобразие с картинками, они приняли простое решение: "а давайте-ка мы не будем каждому объяснять как делать отложенную загрузку, а просто будем учитывать data-src и data-original. А те кто сделает не с такими атрибутами (например data-origin) - сами виноваты".
Яндекс молодцы, но насчёт Google тоже самое сказать не могу.
И сегодня в личку мне кинули пример из Яндекс.Вебмастера, где он указывает, что заглушки в виде data:image/svg .... воспринимаются как битые ссылки с 301 или 403 ответом. Так что в некоторых плагинах, ещё и заглушку надо ставить в виде обычной gif или png, чтобы не было таких предупреждений
Спасибо за статью и плагины.
Не очень ясно зачем тут видео Мурыча, он говорит и рекомендует делать другое. Может вы не до конца разобрались в его рекомендациях?
Алексей, приятно Вас здесь видеть. Смотрел на Ютубе.
По поводу видео - если смотреть его с 8 минуты 44 сек, как в подписи, то он как раз и объясняет про "правильный" лейзилоад.
Ну а в начале да - он разносит loading="lazy"
А, что так можно было: написать статью и бесплатно рекламировать продукт и чат?😏😛🤔
Да как видно можно. Пользуйтесь идеей.
А для чего ещё тут стать пишут 😊
Хорошая реклама. Я уже почти готов стать клиентом)
Есть сайт- https://fix4car.ru и... при внимательном его изучении понимаешь что с оптимизацией кода и в т.ч. с ускорением- там просто ахтунг. Да, пейджспид сейчас показывает не плохие цифры, но реалии находятся несколько дальше, чем только статистика пейджспида. Посмотрите, Есть ли вам что предложить? Обсудили бы сотрудничество.
Посмотрел только главную страницу.
У вас та же проблема что описана в статье - вместо картинок заглушки lazy_placeholder.gif
Валидатор validator.w3.org показывает что есть лишние кавычки - то есть бот гугла может неправильно парсить страницу.
Незакрытый тег <p>
Ну и несколько других ошибок чисто по вёрстке. Влияют ли они на SEO - это нужно смотреть подробнее.
Семантически свёрстано не очень правильно.
Это то что навскидку и бросается в глаза
не стоит торопиться)
во первых, "не стоит верить всему, что пишут в интернете" (с) В.И. Ленин
во вторых, гуглбот умеет проскроливать страницы, о чем явно пишет в своих рекомендациях для разработчиков https://developers.google.com/search/docs/guides/lazy-loading
если б он не умел прокручивать, как бы он мог индексировать infinite scroll контент?
В последнем обновлении wp по умолчанию включили лейзи лоад, без плагинов
В WP добавили атрибут loading="lazy", а в статье идёт речь про лейзи лоад на JS
Лучше вообще обходиться без ленивой загрузки. А то с мобилы заходишь на сайт, а он мал того, что медленно грузится, ещё и картинок не показывает.
Так в том то и дело, что делать нужно это красиво, правильно и аккуратно
1800р считаю жестоко с подпиской не? неужели нет похожего в themeforest?
Комментарий удален модератором
Комментарий удален модератором
Проблема освещенная в статье действительно существует.
Очень много статей и готовых скриптов решают задачу не корректно.
И в этой статье есть доводы отличающиеся от действительности.
Наличие атрибута src у изображений не обязательно.
Подтверждение из официальной документации Яндекс:
"Картинки скачиваются по ссылкам из атрибута src тега img, а также атрибутов data-src и data-original (в этом случае наличие ссылки на изображение в атрибуте src не обязательно)."
Ссылка на документацию:
Да нам сделали такое замечание в комментариях. И если бы можно было сейчас переписать статью - я бы так и сделал.
Но при написании статьи всё таки ориентировался на Google, поэтому упустил ньюанс с атрибутами data-src и data-original для Яндекса
поду ка я проверю на своём магзе это дело... и отпишусь чё и как. Мне важна индексация картинок
Извиняюсь, а если тег <img> обернуть в <noscript>, а с ленивой загрузкой извращаться как хочешь?
Это довольно старый метод и на вид вполне рабочий.
Проблема в том, что сейчас гуглобот на 2й стадии индексации - это фактически браузер Chrome и все скрипты в нем выполняются. Так что noscript уже не сработает
Зачем нужны плагины если Lazy Load уже встроен в новые версии Wp. И он работает корректно )
Комментарий удален модератором