Centum-D-Lazyload (Ленивая загрузка)

5
1 отзыв
Centum-D-Lazyload (Ленивая загрузка)

Скорость, с которой загружается сайт, является ключевым аспектом оптимизации ресурса. Метрика оказывает влияние на:

  • Время, проведенное пользователем на ресурсе;
  • Процент отказа;
  • Позицию органической выдачи;
  • Цену клика в платных поисках.

Основной причиной замедления загрузки страницы являются большие размеры изображений и видео-контента. Google с помощью PageSpeed Insights выдвигает рекомендации перечня решений, позволяющих оптимизировать медиафайлы. Среди таких решений:

  • Сжимать;
  • Кэшировать;
  • Использовать lazy loading.

Последний вариант мы обсудим в этой статье.

Ленивая загрузка – что это?

Lazyload js – это решение, благодаря которому оптимизируется скорость загрузки медиа-контента, некритичного для отрисовки страниц или взаимодействий с посетителями. Сам плагин реализует правильную загрузку изображений с точки зрения SEO. Оригинальный функционал WordPress подгружает в атрибут “src” белую точку, то есть пустое изображение. Для корректной индексации изображений в таких поисковых системах как Google и Yandex необходимо в атрибут “src” подгружать правильное изображение сразу, а для корректной работы lazyload использовать атрибут “src-set”. Библиотека Lozad, которая используется в этом модуле, выполняет ленивую загрузку изображений согласно рекомендациям вышеупомянутых поисковиков.

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

Загрузка ресурса оказывает сильное влияние на ситуацию продвижения веб-сайта в поисковиках. Поисковая система заинтересована как в демонстрации релевантных веб-сайтов пользователю, так и в быстрой загрузке каждой предложенной страницы.

Lazyload js также дает возможность сильно снизить уровень нагрузки на сервера или распределять ее, что в особенности актуально для веб-сайтов, содержащих большое число изображений или других медиа.

Типы Lazyload

Ленивая загрузка бывает разной и делится согласно ряду принципов взаимодействий посетителей ресурса со страницами.

  • Скролл. Является самым популярным вариантом. Для загрузки следующей части контента пользователь должен лишь продолжать скроллить. Такой вид представляет собой весьма удобный вариант, ведь не вызывает необходимости проделывать дополнительные действия и манипуляции, а также позволяет реализовать “бесконечную” страницу. Лучший пример – лента социальной сети, где контент сменяется другим и может продолжаться практически бесконечно.
  • Клик. При достижении последней точки страницы пользователь увидит предложение клика, который отобразит следующую часть страницы. Нередко используется в интернет-магазинах, агрегаторах или каталогах. 
  • Фоновая загрузка. Метод похож на скроллинг. Реализуется посредством первоначальной подгрузки первого экрана, и пока посетитель просматривает предложенный блок, в фоновом режиме загружается остальная часть страницы. Иногда это способствует улучшению поведенческих факторов, ведь при скролле виднеются глюки пролистывания страниц, а фоновая загрузка является решением проблемы. Особенно актуально, если на страницах публикуются картинки с большим размером. Однако в таких случаях должны подгружаться только те элементы, которые на самом деле необходимы пользователям.

Как правильно реализовать Lazyload: несколько рекомендаций

  • Удостоверьтесь в том, что контент может быть индексирован краулером Google.
  • Если принялись реализовать бесконечную прокрутку, обеспечьте возможность загружать контент постранично. Так пользователи смогут вернуться к предыдущей странице.
  • Тестировать Lazyload можно посредством скрипта Puppeteer и библиотекой Node.js. Скрипт позволяет создать скриншот, демонстрирующий предоставление загружаемого контента для посетителей и краулеров.

Ряд возможных проблем

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

Lazyload от Centum-D

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

Версия 1.0.0
Последнее обновление 28.08.2021
Активных установок 1
Версия WordPress 4.7
Совместимость вплоть до 5.4
Версия PHP 7.0

Отзывы

Отзывы