Быстрый старт: включить плагин за 5 минут

Шаг 1. Установите плагин

Установите Lazy load через Установщик Webasyst: «Магазин → Плагины» и поиск по магазину приложений. В Webasyst Store плагин имеет бесплатный пробный период 7 дней для облачных аккаунтов.

Шаг 2. Откройте настройки

«Магазин → Плагины → Lazy load». Откроется страница с настройками слева и подсказками справа.

Шаг 3. Активируйте и сохраните

Отметьте «Активировать плагин» и нажмите «Сохранить».

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

Шаг 4. Проверьте витрину

Откройте любую страницу магазина в режиме инкогнито, где много картинок (например, каталог). Прокрутите страницу вниз.

Убедиться, что плагин работает, можно тремя способами:

Код страницы. Откройте консоль браузера (F12), найдите теги img. У первых картинок будет data-lazyload="skipped", у остальных data-lazyload="true", а по мере прокрутки им добавляется data-loaded="true".
Вкладка «Сеть». В консоли откройте «Сеть» (Network), выберите тип «Изображения». При открытии страницы запрашивается только часть картинок, список пополняется по мере прокрутки.
PageSpeed Insights. Метрика «Отложите загрузку скрытых изображений» должна стать зелёной.

Шаг 5. Проверьте, что ничего не сломалось

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

Пример результата

В тестовом магазине с каталогом из 30 картинок (предзагрузка 200 px, пропуск 4 картинок) при открытии страницы загружается 8 картинок из 30, остальные подгружаются при прокрутке. В вашем магазине цифры будут другими: они зависят от темы, высоты экрана и числа картинок над первым экраном.

Дальше

Настройки: как подобрать предзагрузку и число пропущенных картинок.
Разметка для особых случаев: фоновые изображения и видео.