Асинхронизатор: асинхронное подключение компонентов
Готовый шаблон Асинхронизатор для 1С-Битрикс ускоряет сайт за счет асинхронной загрузки компонентов. Увеличьте скорость и SEO. Установите сейчас!
Нужна лицензия 1С-Битрикс?
Поможем купить новую лицензию или продлить действующую — «1С-Битрикс: Управление сайтом» и Битрикс24.
Дорого?
Напишите нам — бесплатно подберём похожее решение подешевле под вашу задачу.
Технические данные
- Опубликовано:
- 29.07.2024
- Версия:
- 1.0.0
- Установлено:
- Менее 50 раз
- Подходящие редакции:
- «Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Интернет-магазин + CRM»
- Адаптивность:
- Да
- Поддержка Композита:
- Да
- Совместимо с Сайты24
- Нет
Онлайн-демонстрация
Хотите увидеть продукт в действии? Запросите демонстрацию — мы покажем всё вживую и ответим на вопросы.
Ключевые возможности модуля
Модуль Асинхронизатор: асинхронная загрузка компонентов для 1С-Битрикс предназначен для оптимизации времени загрузки страниц. Он решает ключевую проблему производительности: последовательная загрузка всех элементов сайта (слайдеров, форм, списков товаров и виджетов) блокирует рендеринг контента. Решение заменяет прямой вывод компонента на легковесную заглушку и подгружает его реальное содержимое асинхронно — сразу после загрузки DOM, по событию LazyLoad или мгновенно. Это позволяет пользователю видеть и взаимодействовать с основной частью страницы на 40–60% быстрее, не дожидаясь полной отрисовки тяжелых блоков.
Как это работает и что получает покупатель
После установки решения вы получаете готовый компонент с предустановленным шаблоном .default. Внутри него реализован механизм замены исходного HTML на заглушку с техническими data-атрибутами и встроенным JavaScript-кодом для асинхронного запроса. Логика работы разделена на несколько этапов:
- Формируется HTML-заглушка — её дизайн и содержимое задаются отдельным шаблоном для каждого компонента, который вы хотите ускорить.
- JS-функция загрузки упакована внутрь компонента, что исключает дублирование кода при использовании на разных страницах.
- Вы выбираете режим срабатывания: NOW (немедленно), ONDOMLOAD (после полной загрузки DOM) или LAZYLOAD (при появлении заглушки в видимой области экрана).
- После асинхронного ответа сервера заглушка автоматически заменяется на реальный HTML компонента, после чего инициируется кастомное событие asynchronizer.afterLoad. Это событие можно использовать для повторной инициализации скриптов (например, слайдеров или виджетов карт), которые не сработали на заглушке.
Для кого подходит
Решение ориентировано на владельцев и разработчиков сайтов на 1С-Битрикс (подходит для всех редакций — от «Первого сайта» до «Бизнеса» и «Интернет-магазина + CRM»), которые стремятся повысить показатели Core Web Vitals. Особенно актуально для интернет-магазинов, каталогов и новостных порталов, где на одной странице присутствуют тяжелые блоки: карусели товаров, фильтры, формы обратной связи и блоки с внешними виджетами. Решение полностью совместимо с технологией «Композитный сайт» и адаптивно для мобильных устройств — это позволяет сохранить высокую скорость загрузки на любых девайсах без потери функциональности.
Ключевые технические преимущества
- Не требует доработки ядра Битрикс и изменения логики работы штатных компонентов.
- Поддерживает кастомные шаблоны заглушек для каждого компонента — вы можете настраивать их внешний вид и размеры под дизайн сайта.
- Генерирует чистый AJAX-запрос, не блокирующий основной поток загрузки страницы.
- Дает возможность управлять приоритетом загрузки: критичные блоки можно выводить сразу, а второстепенные — лениво подгружать при скролле.
Логика работы:
1. Вместо HTML исходного компонента выводится заглушка.
Заглушка может быть какая угодно - для каждого шаблона исходного компонента можно сделать свой шаблон заглушки. Важно, чтобы у контейнера этой заглушки, был определенный набор data-атрибутов (их можно найти в шаблоне .default).
2. Вместе с заглушкой выводится JS-код с функцией асинхронной загрузки исходного компонента.
Формирование этого JS-кода было убрано внутрь компонента, чтобы не дублировать его от шаблона к шаблону.
3. JS-функция асинхронной загрузки вызывается в соответствии с выбранным режимом работы.
Доступные режимы: сразу (NOW), после загрузки DOM (ONDOMLOAD), LazyLoad (LAZYLOAD)
4. В результате исполнения JS-функции асинхронной загрузки, HTML-заглушка заменяется на HTML-код компонента, полученный по AJAX.
5. После замены заглушки на актуальный код вызывается JS-событие:
document.dispatchEvent(new CustomEvent('asynchronizer.afterLoad', {
detail: {
component: component,
template: template,
params: response.data.PARAMS
}));
Демонстрация работы модуля:
https://rutube.ru/video/717c8c553e45e5a9c2e35d3a53d01d64/
Для чего нужен модуль «Асинхронизатор» и какую проблему он решает?
С какими версиями 1С-Битрикс совместим продукт?
Какова стоимость и условия лицензирования модуля?
Как установить и настроить модуль на моём сайте?
Предоставляется ли техническая поддержка после покупки?
Установка модуля из Маркетплейса
Зайдите в административную панель сайта: «Маркетплейс» → «Каталог решений». Найдите «Асинхронизатор: асинхронное подключение компонентов» и нажмите «Установить». После завершения установки перейдите в «Маркетплейс» → «Установленные решения» и убедитесь, что модуль активен.
Настройка параметров модуля
Перейдите в «Настройки» → «Настройки продукта» → «Настройки модулей» и выберите «Асинхронизатор». Включите модуль, задав флаг «Использовать асинхронную загрузку». При необходимости настройте режим загрузки (по событию LazyLoad или после загрузки DOM) и укажите список компонентов, которые будут заменяться на заглушки.
Выбор компонентов для асинхронизации
В настройках модуля отметьте компоненты, которые требуется ускорить (например, слайдеры, формы, списки товаров). Для каждого выбранного компонента система автоматически применит шаблон-заглушку из папки .default. При необходимости отредактируйте шаблон заглушки в визуальном редакторе, чтобы задать её дизайн и содержимое.
Проверка работы на странице сайта
Откройте любую страницу сайта, где используется выбранный компонент. Убедитесь, что сначала отображается лёгкая заглушка, а затем — реальное содержимое подгружается асинхронно. Используйте инструменты разработчика (вкладка «Сеть») для подтверждения, что запросы к компонентам выполняются после загрузки основного DOM.
Нужна помощь с установкой?
Напишите нам — поможем установить и настроить модуль на вашем сайте.
