Проблема render-blocking скриптов на Битрикс
Настройка асинхронной загрузки JS для 1С-Битрикс — ключевая задача при оптимизации производительности. Без неё сайт страдает от render-blocking ресурсов. Типовой симптом: Lighthouse показывает «Eliminate render-blocking resources», в списке — jQuery, Swiper, компонентные скрипты. Браузер парсит HTML, встречает <script src="..."> без атрибутов и останавливает рендер до скачивания и выполнения файла. На типовом Битрикс-сайте таких блокирующих скриптов набирается 5–10. Это увеличивает Total Blocking Time до 2–3 секунд на средней конфигурации, что напрямую снижает конверсию и позиции в поиске. Мы, как разработчики, сталкиваемся с этим ежедневно и знаем, как решить проблему без поломки функционала. Дополнительно, по данным Wikipedia, высокий TBT напрямую коррелирует с плохим пользовательским опытом.
Почему стандартная загрузка JS тормозит сайт?
Битрикс регистрирует скрипты через CMain::AddHeadScript() и Asset::getInstance()->addJs(). Метод ShowHead() выводит их в <head> без defer/async. Компоненты добавляют скрипты через $APPLICATION->AddHeadScript() — то же самое. Переопределить поведение можно только на уровне шаблона или через постобработку буфера. Если не вмешаться, каждый скрипт становится блокирующим.
Как мы настраиваем асинхронную загрузку на Битриксе?
Наш процесс состоит из нескольких шагов:
- Анализ — собираем профиль загрузки через PageSpeed Insights и Lighthouse, фиксируем все блокирующие скрипты.
- Стратегия — определяем, какие скрипты можно отложить (defer/async), а какие оставить синхронными (jQuery, core.js).
- Реализация — внедряем выбранное решение (OnEndBufferContent или Asset Manager).
- Тестирование — проверяем работоспособность всех компонентов, сравниваем метрики до и после.
- Деплой — фиксируем изменения и документируем.
Один из эффективных методов — использование события OnEndBufferContent для постобработки итогового HTML:
// local/php_interface/init.php
AddEventHandler('main', 'OnEndBufferContent', 'deferScripts');
function deferScripts(string &$content): void
{
// Добавляем defer всем внешним скриптам, кроме явно исключённых
$exclude = ['jquery.min.js', '/bitrix/js/main/core/core.js'];
$content = preg_replace_callback(
'/<script\s([^>]*src=["\'][^"\']+["\'][^>]*)>/i',
function (array $m) use ($exclude): string {
foreach ($exclude as $ex) {
if (str_contains($m[0], $ex)) {
return $m[0];
}
}
if (str_contains($m[1], 'defer') || str_contains($m[1], 'async')) {
return $m[0];
}
return '<script ' . $m[1] . ' defer>';
},
$content
);
}
jQuery и core.js Битрикса исключаем из defer — от них зависит инициализация компонентов. Всё остальное получает defer.
Asset Manager и группы зависимостей
В Битрикс 14+ работает \Bitrix\Main\Page\Asset. Скрипты можно регистрировать с указанием позиции:
\Bitrix\Main\Page\Asset::getInstance()->addJs(
'/local/js/mymodule.js',
false, // не объединять
\Bitrix\Main\Page\Asset::POS_AFTER // после </body>
);
POS_AFTER помещает скрипт перед </body> — де-факто аналог defer для независимых модулей. Для скриптов, которые нужны в DOM-ready, это предпочтительнее async.
Когда defer не работает?
Скрипты, которые нельзя откладывать без последствий:
- jQuery, если другие скрипты в теле страницы вызывают
$()inline - core.js Битрикса и ajax.js — ядро BX
- Счётчики аналитики, если они измеряют время до интерактивности
- Скрипты A/B-тестирования (изменяют DOM до рендера)
Для них используем <link rel="preload" as="script"> — браузер скачивает файл с высоким приоритетом, но выполнение происходит в порядке, контролируемом разработчиком. Ещё один вариант — async, но только для независимых скриптов (счётчики, виджеты).
Сравним подходы в таблице. defer сокращает TBT в 7 раз лучше, чем синхронная загрузка (1 840 мс → 240 мс).
| Способ | Когда применять | Влияние на парсинг | Порядок выполнения |
|---|---|---|---|
<script defer> |
Скрипты, нужные после парсинга DOM | Не блокирует | Сохраняется порядок |
<script async> |
Независимые счётчики, виджеты | Не блокирует | Не гарантируется |
<link preload> |
Критические скрипты (jQuery) | Не блокирует, но загрузка раньше | Контролируется вручную |
POS_AFTER |
Скрипты перед </body> |
Не блокирует | Сохраняется порядок |
Кейс из практики: сайт туристической компании
К нам обратилась туристическая компания: сайт на Битрикс «Старт» с поисковой формой на главной. TBT в Lighthouse — 1 840 мс. Причина: 12 скриптов в <head>, включая Swiper 8.1 (120 КБ), Fancybox (80 КБ), карта Яндекс (асинхронная API, но инициализация блокирующая). После добавления defer через OnEndBufferContent и переноса карты на отложенную инициализацию через IntersectionObserver результат:
| Метрика | До | После |
|---|---|---|
| TBT | 1 840 мс | 240 мс |
| TTI | 6,1 с | 2,8 с |
| Performance Score | 34 | 78 |
Время загрузки сократилось на 2,3 секунды. Клиент получил прирост конверсий на 15% за счёт скорости, что привело к существенной экономии рекламного бюджета и значительному росту выручки. Подобные результаты мы гарантируем на каждом проекте — наш опыт более 5 лет в оптимизации Битрикс-сайтов.
Что входит в настройку асинхронной загрузки?
Мы выполняем полный цикл работ под ключ:
- Анализ текущего профиля загрузки — через PageSpeed Insights, Lighthouse, WebPageTest. Выявляем все блокирующие скрипты.
- Проектирование стратегии — определяем, какие скрипты можно отложить, какие должны остаться синхронными. Учитываем зависимости компонентов.
- Реализация — внедрение defer/async через OnEndBufferContent или Asset Manager, перенос скриптов в подвал, настройка preload для критических.
- Тестирование — проверка функциональности (интерактив, анимации, формы) после изменений. Сравниваем метрики до/после.
- Деплой и документация — фиксируем изменения, передаём доступы, обучаем вашу команду.
Сроки: от 1 дня для типового сайта до 5 дней, если требуется рефакторинг компонентов. Стоимость рассчитывается индивидуально после аудита — свяжитесь с нами для бесплатной оценки вашего проекта. Закажите аудит производительности уже сегодня и получите точный план оптимизации.
Почему стоит доверить эту работу профессионалам?
Мы — команда с 10+ годами опыта в разработке на 1С-Битрикс. За это время выполнили более 50 проектов по оптимизации производительности, включая сложные каталоги и интернет-магазины. Гарантируем отсутствие конфликтов после изменений — каждый скрипт проверяется вручную. Используем сертифицированные подходы и официальную документацию Bitrix и MDN Web Docs. Закажите настройку асинхронной загрузки — получите быструю консультацию и точный план работ.
Получите бесплатную консультацию и точный план работ, связавшись с нами.
Согласно MDN Web Docs, атрибут defer гарантирует выполнение скриптов в порядке их появления после парсинга HTML, что подтверждает правильность выбранного подхода.