Блог по продвижению сайтов Блог по SEO

Режим Lazy Loading для скрытых изображений с плавным появлением

Просмотров: 2715

Одним из требований поисковой системы Google с недавних пор стала ленивая загрузка изображений (Lazy Load), в Google Page Speed так и пишется «Отложите загрузку скрытых изображений». Это когда картинки на сайте подгружаются не сразу, а по мере скроллинга пользователя по странице вниз.

Lazy Loading для скрытых изображений

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

Особенно эффект от ленивой загрузки изображений виден на сайтах с десятками и сотнями картинок, но и на 5-7 фотках можно вырвать несколько баллов в гугл пейдж спид.

Установка ленивой загрузки в WordPress

Если ваш шаблон изначально не поддерживает отложенную загрузку изображений, то нужно установить плагин Lazy Loading для скрытых изображений.

A3 Lazy Load

Мне больше всего понравился «A3 Lazy Load»

  1. Устанавливайте как обычный плагин WordPress (как это сделать за 5 минут).
  2. В настройках меняется минимум: вместо эффекта спиннер я предпочитаю плавное появление картинок + можно сделать 200px отступа для начала включения Lazy Load.
  3. Сохраняйте изменения, сбрасывайте кеш (если используется).

настройка lazy load wordpress

Проверяем в Google:

отложите загрузку скрытых изображенийПишет — Отложите загрузку скрытых изображений

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

Без ошибки!

BJ Lazy Load

Второй модуль, который также способен быстро сделать ленивую загрузку - BJ Lazy Load.

Читайте также:  Что лучше СЕО продвижение или контекстная реклама

Настройки там вообще простые, ничего менять обычно не нужно.

настройки bj lazy load wordpress

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

"Эй читатель, давай сыграем в игру Установи их все :wall: Правила простые: я кину тебе 10 ссылок из гугла, а ты давай устанавливай каждый плагин и сам выбери лучший! И да, потом в комментах напиши, не забудь!".

Пипец :whew:

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

Но я включил сюда второй плагин потому что на одном сложном шаблоне только этот модуль нормально обеспечил работу всех картинок в режиме ленивой загрузки, остальные сбоили и либо не грузили фотки (как A3), либо выводили фик пойми что, как тот же Autoptimize.

Однако он не обновлялся уже пару лет, поэтому я рекомендую A3 (у меня на блоге на момент написания статьи работает именно он), если вдруг по каким-то причинам не сработает, то уже установить BJ Lazy Load.

Почему может не работать Lazy Load на сайте

Я наблюдал в своей практике несколько причин:

  • Перенавороченный шаблон.
    Всякие крутые штуки на Ajax выглядят отлично, но плохо оптимизируются, в том числе с помощью плагинов, призванных отложить загрузку скрытых изображений.
  • Корявый хостинг.
    Редко, но встречается такой «особенный» хостинг, на котором по неизвестным причинам не работают некоторые плагины, например, из-за особенностей сборки PHP конкретной версии. Можно попробовать поменять версию php в панели хостинга или просто сменить хостера (список проверенных хостеров есть тут).
Читайте также:  Как снизить показатель отказов Google Analytics в 12 раз?

Успехов в бизнесе!

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

Блог — Сергея Арсентьева 📈
image
Сергей Арсентьев
Всего материалов на сайте: 239
Активных комментариев: 3 500
Работает онлайн: 10.6 лет
Читателей за это время: 2 465 977
Я в соцсетях —
Фото
Бесплатный видеокурс для начинающих. Что такое фриланс, можно ли на нем зарабатывать и сколько?
Бесплатно Подробнее
Фото
Бесплатная мини книга для тех, кто хочет заказать сайт, но растерялся во множестве CMS и вариантов выбора.
Бесплатно Подробнее
Фото
Пошаговый видеокурс "Как работать в Опенкарт" с уроками по добавлению товаров и статей.
Добавить свой комментарий