Битрикс не перемещать JS скрипт в конец страницы

В 1С-Битрикс в настройках Главного модуля есть полезная опция:

Переместить весь Javascript в конец страницы

После включения этой настройки Битрикс автоматически переносит JS-скрипты перед закрывающим тегом:

</body>

Это позволяет:

• ускорить загрузку страницы;
• улучшить показатели PageSpeed;
• снизить блокировку рендера страницы;
• ускорить отображение контента.

Проблема с переносом Javascript

Однако некоторые скрипты нельзя переносить вниз страницы.

Например:

• Яндекс.Карты;
• 2ГИС карты;
• виджеты;
• онлайн-чаты;
• некоторые сторонние библиотеки.

После переноса таких скриптов могут появляться ошибки:

• карта не отображается;
• виджет не инициализируется;
• JS выполняется раньше загрузки библиотеки;
• ломается логика страницы.

Как исключить скрипт из переноса

Для исключения скрипта нужно добавить атрибут:

data-skip-moving="true"

Например:

<script
    data-skip-moving="true"
    charset="utf-8"
    src="https://widgets.2gis.com/js/DGWidgetLoader.js">
</script>

Как это работает

При наличии атрибута:

data-skip-moving="true"

Битрикс:

• не переносит скрипт вниз страницы;
• оставляет его на текущем месте;
• загружает скрипт в исходной позиции.

Когда это особенно полезно

• подключение Яндекс.Карт;
• подключение 2ГИС;
• Google Maps;
• онлайн-чаты;
• виджеты callback;
• сторонние JS SDK;
• старые библиотеки без defer;
• скрипты, зависящие от порядка загрузки.

Пример с Яндекс.Картами

<script
    data-skip-moving="true"
    src="https://api-maps.yandex.ru/2.1/?lang=ru_RU">
</script>

Пример с Google Maps

<script
    data-skip-moving="true"
    src="https://maps.googleapis.com/maps/api/js">
</script>

Где включается перенос Javascript

Настройка находится:

• Настройки;
• Настройки продукта;
• Главный модуль;
• вкладка «Настройки».

Пункт:

Переместить весь Javascript в конец страницы

Плюсы переноса JS вниз страницы

• ускоряется First Paint;
• улучшается Lighthouse;
• снижается блокировка рендера;
• страница быстрее становится видимой пользователю.

Минусы и подводные камни

После включения настройки могут перестать работать:

• карты;
• старые плагины;
• inline-скрипты;
• скрипты без ожидания загрузки DOM;
• сторонние виджеты.

Поэтому иногда приходится вручную исключать скрипты через:

data-skip-moving="true"

Итог

Если в Битрикс включен перенос Javascript вниз страницы, но определенный скрипт должен остаться на своем месте, достаточно добавить атрибут:

data-skip-moving="true"

После этого Битрикс не будет переносить данный JS-файл в конец страницы.