Страница открывается быстрее
Браузер не скачивает картинки, до которых покупатель ещё не дошёл. В каталоге тестового магазина из 30 картинок при открытии загружается 8, остальные подгружаются при прокрутке.
Платформа
Разработчик
плагин
Lazy load для Shop-Script
Картинки грузятся по мере прокрутки — страница магазина открывается быстрее
Откладывайте загрузку картинок и iframe ниже видимой области страницы. Первые изображения остаются доступными сразу, остальные появляются при прокрутке.
- Не грузить невидимые картинки сразуИзображения ниже первого экрана загружаются по мере прокрутки.
- Первый экран остаётся доступнымНачальные изображения не откладываются, а адрес src сохраняется в разметке.
- Поддержка iframe и видеоМожно откладывать iframe и показывать лёгкую обложку для YouTube.
Зачем это магазину
Не загружать то, что покупатель не увидит
Обычно браузер скачивает все картинки страницы сразу, даже нижние, до которых покупатель может не дойти. Lazy load откладывает их, пока они не окажутся рядом с экраном. Количественных результатов плагин не обещает: они зависят от темы, числа картинок и их положения на странице.
Поисковики по-прежнему видят картинки
Атрибут src не убирается, поэтому робот индексирует картинки даже при отключённом JavaScript. Скрипт плагина весит около 4 КБ.
Включается одной галочкой
Править шаблон темы не нужно: плагин сам обрабатывает HTML витрины. Предзагрузка, эффекты и исключения настраиваются по желанию.
Исключения там, где они нужны
Страницы по адресу, картинки по классу или атрибуту, любая картинка через data-lazyload="false". Логотип и главный баннер можно показать сразу.
Как это работает
Три шага в браузере покупателя
Плагин правит HTML страницы витрины перед отправкой браузеру. Дальше всё происходит на стороне покупателя.
Страница открывается
Первые картинки (число задаёте вы) грузятся сразу. Остальным плагин ставит лёгкий индикатор вместо файла.
Покупатель прокручивает
Когда картинка подходит к экрану на заданное число пикселей, браузер начинает её загружать.
Картинка появляется
Элемент получает метку «загружен»; по желанию — плавное появление и автоматические width и height.
Обычные картинки и iframe
Работает автоматически на всех страницах витрины после включения плагина.
- Теги img и iframe обрабатываются без правки шаблона
- Первые N картинок страницы не откладываются
- Картинки внутри script и noscript не затрагиваются
Особые случаи
Для них в HTML добавляются атрибуты: плагин сам их не придумывает.
- Фоновые изображения из CSS: data-lazyhandler и data-background-image
- Видео YouTube с обложкой: настоящий плеер создаётся после клика
- LQIP-заглушки и переключение CSS-класса при появлении блока
Что и как загружается
Шесть типичных случаев
Обычные картинки и iframe обрабатываются сами, для остальных случаев нужна небольшая разметка.
Картинка ниже первого экранарезультатГрузится при подходе к экрану
Основной режим: каталог, карточка товара, статьи.
Картинки
Первые картинки страницырезультатГрузятся сразу
Логотип и баннер не задерживаются: число таких картинок задаёте вы.
Пропуск
Видео YouTubeрезультатОбложка, плеер после клика
Тяжёлый плеер не грузится, пока покупатель его не запустил.
Видео
Фон из CSSрезультатГрузится, когда блок виден
Один фон, несколько или набор для обычных и Retina-экранов.
Фон
Картинка с LQIPрезультатСначала лёгкая размытая копия
Вместо пустого места видна заглушка, страница не «прыгает».
LQIP
Страница, класс или блок в исключенияхрезультатПлагин их не трогает
Оформление заказа, личный кабинет, быстрый просмотр и любые другие места.
Исключения
Возможности плагина
Предзагрузка, эффекты и исключения
Всё настраивается на одной странице: «Магазин → Плагины → Lazy load».
Предзагрузка
Расстояние в пикселях до экрана, с которого начинается загрузка: отдельно по вертикали и по горизонтали (для каруселей).
Пропуск первых картинок
Первые N картинок страницы (по умолчанию 5) загружаются как обычно, чтобы верхний экран не замедлялся.
Плавное появление
Эффект CSS: картинка проявляется за 0,3 секунды. Также добавляет значок «Play» на обложки видео.
Размеры без прыжков
После загрузки плагин сам записывает картинке width и height. Индикатор загрузки можно ограничить 16 пикселями.
Совместимость
Режим для сайта, где уже есть другой lazyload, и слежение за сменой src (галереи, варианты товара). Работает рядом с «Изображениями PRO».
Тонкая настройка
Классы и атрибуты картинок и блоков с динамическим содержимым, которые плагин не трогает.
Настоящий интерфейс
Как это выглядит в настройках
Снимки сделаны в версии 1.4.3 на тестовом магазине с вымышленными товарами. Нажмите на скриншот, чтобы рассмотреть детали.
Первый запуск
От установки до проверки на витрине
Плагин устанавливается через Установщик Webasyst. Дополнительных настроек сервера не требуется.
Установите плагин через Установщик Webasyst: «Магазин → Плагины».
Откройте настройки плагина «Lazy load» и отметьте «Активировать плагин».
Нажмите «Сохранить» и откройте витрину в режиме инкогнито: картинки ниже первого экрана должны подгружаться при прокрутке.
Если какая-то картинка отображается неправильно, отключите для неё ленивую загрузку атрибутом data-lazyload="false" или добавьте её класс в «Запрещённые атрибуты».
Перед установкой
Что важно знать
Требования
- Работает в приложении «Магазин» (Shop-Script), в том числе на версиях до Shop-Script X
- Версия 1.4.3 проверена на тестовом стенде с Webasyst 4.3 и Shop-Script 12.7 (PHP 8.2)
- Совместим с плагином «Изображения PRO»: Lazy load нужно устанавливать после него; LQIP создаётся «Изображениями PRO» автоматически
- Браузеры без поддержки Intersection Observer API (включая Internet Explorer) не поддерживаются: там картинки грузятся как обычно
- Приложение Shop-Script
- Право открывать «Магазин → Плагины» в административной части
- Для видео-«обложки», фоновых изображений и LQIP в HTML нужно добавить атрибуты, поэтому понадобится доступ к шаблону или содержимому страницы
Ограничения
- Плагин не работает в Internet Explorer и браузерах без Intersection Observer API.
- Если другие JavaScript-скрипты тоже меняют картинки и iframe, работа плагина не гарантируется.
- Если в теме уже есть своя ленивая загрузка, отключите её или включите в настройках «Интегрировать со сторонним lazyload».
- Для картинок нужны атрибуты width и height, иначе PageSpeed Insights может снизить оценку из-за сдвига содержимого (CLS).
- Фоновые изображения, видео-«обложки» и LQIP требуют ручной разметки или плагина «Изображения PRO».
- В списках «Запрещённые страницы» и «Запрещённые атрибуты» не оставляйте пустых строк: пустая строка подходит к любому адресу.
- Эффект максимален, когда большинство картинок и iframe находятся ниже первого экрана.
Частые вопросы
Коротко о главном
Остальные ответы — в разделе «Если что-то не так» руководства.
Плагин включён, а картинки грузятся как раньше. Почему?
Нажмите «Сохранить» в настройках: до первого сохранения плагин на витрине не работает. Проверьте поле «Запрещённые страницы» (нет ли пустых строк) и откройте витрину в режиме инкогнито. В Internet Explorer плагин отключён.
Влияет ли плагин на SEO?
Нет, атрибут src у картинок остаётся, поэтому поисковый робот видит их даже без JavaScript.
Как не откладывать логотип и главный баннер?
Добавьте картинке data-lazyload="false" или увеличьте «Количество пропущенных изображений». Для групп картинок есть поле «Запрещённые атрибуты».
В теме уже есть свой lazyload. Что делать?
Отключите его в теме. Если нельзя, включите в плагине «Интегрировать со сторонним lazyload»: адрес будет браться из data-src.
Как плагин работает с «Изображениями PRO»?
Lazy load нужно устанавливать после «Изображений PRO». LQIP-заглушки, которые создаёт «Изображения PRO», плагин использует автоматически.
Будут ли откладываться фоновые изображения из CSS?
Только если добавить блоку атрибуты data-lazyhandler="lozad" и data-background-image. Примеры — в разделе «Разметка» руководства.
Помощь и инструкции
Руководство владельца магазина
Подробное руководство по версии 1.4.3: от включения до особых случаев. Программировать не нужно.
Lazy load для Shop-Script
Ускорьте магазин одной галочкой
Включите плагин, сохраните настройки и проверьте каталог на витрине.