Совместимость и PageSpeed Insights

Сторонний lazyload

Если в теме или другом плагине уже есть ленивая загрузка картинок, возможны два конфликтующих механизма. Есть два решения:

  1. Отключите ленивую загрузку в теме. Это предпочтительный вариант.
  2. Если отключить нельзя, включите в настройках «Интегрировать со сторонним lazyload»: Lazy load будет брать адрес из data-src.

«Изображения PRO»

Плагин «Изображения PRO» создаёт адаптивные копии картинок и LQIP-заглушки.

  • Устанавливайте Lazy load после «Изображений PRO».
  • Опция «Отслеживание изменений в атрибутах src» в Lazy load недоступна, если такая же функция включена в «Изображениях PRO»: она уже работает там.
  • LQIP-атрибуты, которые создаёт «Изображения PRO», Lazy load использует автоматически (см. Разметку).

Тема оформления и скрипты

  • Плагин выводит свой код через стандартные хуки frontend_head и frontend_footer: тема должна вызывать {$wa->header()} и {$wa->footer()}.
  • Плагин использует jQuery темы.
  • Если другие скрипты тоже меняют картинки и iframe (слайдеры, галереи, быстрый просмотр), работа плагина не гарантируется. Исключите такие блоки в Исключениях.

Браузеры

Плагин использует Intersection Observer API. Он работает в современных браузерах; в Internet Explorer плагин отключается, и картинки грузятся как обычно.

PageSpeed Insights

  • Метрика «Отложите загрузку скрытых изображений» должна стать зелёной.
  • PageSpeed Insights требует у картинок атрибуты width и height. Без них возможен штраф за сдвиг содержимого (CLS). Укажите размеры в тегах (см. Разметку).
  • Эффект максимален, когда большинство картинок находятся ниже первого экрана.
  • Первые картинки верхнего экрана лучше не откладывать (настройка «Количество пропущенных изображений»).

SEO

Атрибут src у картинок сохраняется, поэтому поисковый робот индексирует их даже при отключённом JavaScript.

Нагрузка на сервер

Плагин обрабатывает HTML страницы перед отправкой, поэтому нагрузка на сервер немного растёт. За счёт отложенной загрузки картинок это, как правило, компенсируется.

Просмотр изображения
Оригинал