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 предоставляет возможность каждому желающему скачать плагин и настроить его под свои стандарты полностью бесплатно. Профессионалы команды проработали плагин для универсальных целей, что позволяет любому человеку сделать работу своего сайта эффективнее и быстрее в разы.