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

Видео по Ремкомплекту:

Основной сценарий

Основной сценарий декомпозиции какой-то из частей страницы (на примере промо-блоков статей на детальной странице товара):

• анализируем, что нужно для запуска и работы блока статей;
• обеспечиваем независимую работу собранных данных:
  • отделяем программный код от других сущностей (библиотек, шаблонов, компонентов, хелперов, классов),
  • выносим стили, которые относятся к промо-блоку, в отдельные файлы (чтобы их можно было подключить отдельно),
  • выносим джаваскрипт в отдельные файлы, обеспечиваем корректную инициализацию внутренних механизмов по событию или по специальному методу (например function promoPagesOnDetailPageInit() { /* ... */ };)
• выносим блок в аякс-обёртку;
• обеспечиваем на странице, в том месте, куда через аякс будет подгружен промо-блок, каркас, резервирующий место под него (для обеспечения правильного CLS и LCP).

Основной инструмент

Основной инструмент оптимизатора: компонент, который одновременно является и контроллером, принимающим аякс-запросы на выполнение экшенов компонентов. Прямой вызов (при размещении на странице) выполняет шаблон компонента, в котором инициализируется посадочный минимум (каркас, стили, дата-атрибуты для последующего аякс-вызова). Экшены класса компонента выполняют сбор и обработку данных, формирование ответа необходимых под конкретную задачу ресурсов (html, css, js).

Пример компонента с полным набором примеров на все основные случаи работы по ускорению, находится по пути /bitrix/modules/burlakastudio.speeder/examples.lazy/namespace/component/

На основании компонента-примера следует разворачивать свои компоненты. Как мог бы выглядеть новый компонент:

• в примере: /namespace/component/ (namespace — пространство имён компонентов, component — название компонента),
• рабочая копия: /local/components/burlaka.studio/articles.promo.lazy/

  Название класса внутри: ArticlesPromoLazy, неймспейс: /BurlakaStudio

  Код подключения компонента на странице:

  $APPLICATION->IncludeComponent(
      'burlaka.studio:articles.promo.lazy',
      '.default',
      [
          'PARAM1' => 'value1',
          'PARAM2' => 'value2'
      ]
  );

Цепочка важных узлов*

*Все узлы, описываемые ниже, присутствуют в компоненте-примере либо в закомментированном, либо в используемом виде.

Параметры

Чтобы входящие параметры (параметры компонента) пробрасывались через аякс:

• устанавливаем параметры в вызове компонента,
• в классе компонента обеспечиваем метод listKeysSignedParameters

Если параметры подхвачены корректно, у оболочки, которая формируется шаблоном, будет дата-атрибут data-ar-params

Ленивая или полная версия

Компонент следует разрабатывать с тем учётом, что его вызов может быть как ленивым, так и "прямым". Следует ограничиться отслеживанием только в основном шаблоне компонента. Список условий довольно обширный, например модуль ускорения отключен, либо срабатывает отключающее условие для:

• текущего урла,
• группы пользователей,
• хита (не браузерный хит, аякс-вызов).

В шаблон компонента передаётся параметр $arResult['FULL_LAZY_MODE'], который принимает true, если для компонент вызван в окружении, для которого активирован ленивый режим.

Дата-атрибут аякс-режима

Чтобы аякс-механизм ремкомплекта работал для конкретного компонента, в шаблоне нужно сформировать DOM-узел со специальным дата-атрибутом data-lazy-ajax.

Например:

<div data-lazy-ajax="ajaxActionPuller"></div>

Во-первых, этот дата-атрибут сканируется скриптами модуля и при появлении узла в области видимости посетителя сайта срабатывает джейэс-метод, название которого содержится в значении атрибута. Аякс-механизм обеспечивается джейэс-методом ajaxActionPuller, но в значении может содержаться любой другой метод, который будет лениво запущен при подскролле к нему пользователем.

Во-вторых, этот дата-атрибут является индикатором для пост-обработчика шаблона компонента, подсказывающим, какому узлу следует дописать другие дата-атрибуты (такие как название компонента, параметры компонента и дополнительные параметры).

inline.css для CLS и LCP

В наборе файлов шаблона может присутствовать файл inline.css. Если пост-обработчик компонента обнаруживает его, файл подключается вместе с шаблоном компонента.

Задача файла inline.css — обеспечить присутствие на странице важных для структурных элементов вёрстки шаблона компонента стилей (высота, ширина, отступы, адаптивность на разных устройствах, ...). Например, когда ячейка, ожидающая подгрузку содержимого через аякс-запрос, должна быть определённой высоты и иметь определённый отступ. Это обеспечивает хорошие показатели CLS (и косвенно — LCP, если ячейка определена механизмом проверки гугл.пейджспид таковой), но только в том случае, если на момент отрисовки каркаса стили уже определены. Для этого их публикуют непосредственно перед шаблоном.

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

• для администратора стили всегда подключаются через link-элемент. Это делается для того, чтобы было удобно редактировать стили (через девтулз браузера), пока они ещё не полностью сформированы;
• чтобы принудительно указать ремкомплекту, что стили нужно разместить непосредственно перед компонентом, предусмотрен специальный ключ в параметрах: FORCE_INLINE_STYLE.

Экшн компонента

Экшн, зашитый внутрь ремкомплекта и срабатывающий по-умолчанию: getFull. Соответственно, метод getFullAction — точка входа аякс-запроса на уровне класса нашего компонента. Экшн уже настроен на приём всех сигналов, в том числе и неавторизованных, принимает только post-сигналы. Также экшн снабжён пост-обработчиком, который собирает все выброшенные с нижнего уровня скрипты и стили.

Если компоненту были заявлены и переданы параметры, они попадают в объект $this автоматически и доступны по $this->arParams.

Результат работы экшена

Объект, возвращаемый экшеном, может содержать любые данные, которые могут быть переданы в качестве аякс-ответа, но есть набор ключей, наличие которых обрабатывается при получении ответом в браузере:

• html — массив. Если ключ каждого из элементов является валидным внутренним цсс-селектором, будет найден соответствующий дом-узел и его содержимое будет заменено на значение ключа.

  Магические ключи:

  • _self_append — данный ключ указывает на то, что нужно ко всему содержимому контейнера, "внутри" которого был сформирован аякс-запрос, прикрепить значение данного ключа,
  • _self_replace — данный ключ указывает на то, что нужно заменить содержимое контейнера, "внутри" которого был сформирован аякс-запрос, на значение данного ключа,
• ajax_css, ajax_js — ключи, которые собираются пост-обработчиком экшена и добавляются в результат автоматически,
• ajax_callbacks — массив. Список названий джейэс-методов, которые будут вызваны в браузере после того, как размещён html и сформированы подключения js и css.
  
  Важно! Методы будут выполнены один за другим, в той очерёдности, в которой они указаны в массиве. Если какого-то из методов нет (например, js-файл ещё не успел скачаться/обработаться), механизм, разбирающий список колбэков, останавливается и через таймаут повторяет попытку с того метода, на котором он остановился.

Выполнение внутреннего аякс-шаблона

Объект $this компонента содержит специальный метод, позволяющий выполнить и отреднерить результат выполнение файла шаблона. Например, вызов $this->renderTemplateFile('full'); подключит файл full.php текущего шаблона компонента и вернёт html-код, сформированный во время выполнения файла. Внутри full.php может находиться любой код, включая другие компоненты. Доступны переменные $this->arParams, $this->arResult, объект шаблона, специальные переменные шаблона (типа $templateFolder) и объект компонента ($this->__component).

Пост-обработчик экшена соберёт все джейэс- и цеэсэс-подключения, вне зависимости от того, как от того, как они были сформированы — через старое ядро или через новое.