Plugin Lazy load (lazyload) [Shop-Script]

klerk · Jul 17, 2022

Lazy load (lazyload) [Shop-Script]
lazyload
Отложенная загрузка изображений и iframe

Плагин «Lazyload» загружает изображения и iframe только тогда, когда они видны пользователю. Это уменьшает количество HTTP-запросов и сокращает время загрузки сайта.

Этот плагин относится к серии наших плагинов «SPEED» если вы хотите ускорить свой сайт, обратите внимание на другие плагины этой же серии: Супер кэш, Адаптивные изображения PRO

Преимущества:

Ускорение загрузки сайта
Оптимизирован для SEO (атрибут “src” всегда остается у изображений, поэтому поисковый робот, правильно проиндексирует изображения вашего сайта, даже при отключенном JavaScript)
Вес скрипта всего 4кб
Поддержка LQIP (заполнители изображений низкого качества), что позволяет сократить размер изображений во время загрузки около 10 раз и не получить скачка контента сайта. (автоматически создавать lqip возможно с помощью плагина Адаптивные изображения PRO)

Особенности:

Использует относительно новую технологию “Intersection Observer API”, поэтому старые браузеры и IE не поддерживаются
Для Iframe есть возможность использовать отложенную загрузку с фасадом.

You do not have permission to view link please Log in or Register
При использовании с плагином Адаптивные изображения PRO Lazy load должен быть установлен после него

Возможности:

Запрет работы на определенных страницах
Исключение выбранных изображений
Настройка предзагрузки элементов
Работа с тегами HTML и с фоновыми изображениями добавленными через CSS
Автодописывание размеров изображения после загрузки

PageSpeed Insights:

Улучшение PageSpeed Insights с помощью исправления метрики «Отложите загрузку скрытых изображений».

You do not have permission to view link please Log in or Register

PageSpeed Insights требует чтобы при использование технологии Lazyload у изображений были атрибуты «width» и «height», иначе PageSpeed Insights может дать штраф по скорости за сдвиг контента, по метрике CLS (Cumulative Layout Shift). Учитывайте это если при использовании плагина увидите снижение показателей в этом сервисе.

Начало работы:
В настройках плагина нажать «Активировать плагин» — плагин готов к использованию.

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

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

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

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

3 способа проверить работу:

Зайдите на любую из страниц приложения «Магазин». Откройте консоль браузера и найдите изображения (html-тег img). По мере прокрутки страницы должны добавляться атрибуты data-loaded="true".
Зайдите на любую из страниц приложения «Магазин». Откройте консоль браузера, перейдите во складку «Сеть», выберите тип «Изображения», список изображений в консоли должен дополняться по мере прокрутки страницы.
Проанализируйте сайт с помощью «PageSpeed Insights», метрика «Отложите загрузку скрытых изображений» должна быть отмечена зеленым.

Demo:

You do not have permission to view link please Log in or Register

lazyload 1.2.1