Исправление ошибок, связанных с отложенной загрузкой

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

Загружайте контент, когда он находится в области просмотра

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

Обязательно проверьте результат своей работы.

Обеспечьте поддержку постраничной загрузки для бесконечной прокрутки

Для реализации бесконечной прокрутки необходимо обеспечить постраничную загрузку контента. Такой способ загрузки дает пользователям возможность возвращаться к уже просмотренным материалам и делиться ими. Кроме того, он позволяет Google показывать ссылки на определенные элементы внутри контента, а не на стартовую страницу.

Предоставьте уникальные ссылки на каждый раздел, чтобы пользователи могли переходить по ним и делиться друг с другом. Рекомендуем использовать History API для обновления URL во время динамической загрузки контента.

Тест

При проверке используйте скрипт Puppeteer для локального тестирования. Библиотека Puppeteer д��я Node.js позволяет контролировать браузер Headless Chrome. Для работы скрипта необходим фреймворк Node.js. Выполните следующие команды для проверки скрипта и его запуска: 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

После запуска скрипта изучите созданные им скриншоты. Если на них представлен весь контент, который должен быть виден посетителям и индексироваться поисковыми роботами, значит всё в порядке.

Вы также можете узнать, все ли изображения загрузились, с помощью инструмента проверки URL в Search Console. Для этого сравните скриншот с обработанным HTML-кодом.