Убираем лишние подключения CSS и JS в компонентах — каждый компонент может тащить JQuery и Bootstrap
Дата публикации: 24.06.2026

Убираем лишние подключения CSS и JS в компонентах — каждый компонент может тащить JQuery и Bootstrap

Хочу себе такие же кнопки
ccb9a536

Что вы получите сразу

  • Поймёте, почему каждый компонент в Битриксе часто «тянет» свои копии jQuery и Bootstrap, и как это разгоняет ваш сайт.
  • Научитесь находить и удалять лишние подключения CSS/JS без потери функционала.
  • Сможете применить Asset Manager и конфигурацию компонентов, чтобы загрузка шла только тогда, когда действительно нужна.

Почему лишние подключения тормозят сайт

Проблема Что происходит Последствия
Повторные запросы Каждый компонент добавляет свой <script src="jquery.js"> и <link href="bootstrap.css">. Один и тот же файл скачивается 3‑5 раз → увеличивается время загрузки и трафик.
Блокировка рендера <script> без defer/async останавливает построение DOM. Пользователь видит пустой экран до того, как всё отобразится.
Конфликты версий Один компонент использует jQuery 1.12, другой 3.6. Возможны ошибки JavaScript, «сломанные» UI‑элементы.
Избыточный CSS Bootstrap‑grid в каждом шаблоне, хотя страница уже содержит его. Блок‑размер растёт, парсеру браузера приходится разбирать лишние правила.

Аналогия: представьте, что в офисе каждый сотрудник привозит свой собственный стол, стул и компьютер, хотя в комнате уже есть готовый набор. В итоге пространство заполняется, а работа замедляется. Точно так же и с CSS/JS в Битриксе.

Как Битрикс подключает ресурсы

  1. $APPLICATION->AddHeadScript() / AddHeadString() – глобальные подключения, обычно в header.php.
  2. CBitrixComponent::includeComponent() – внутри компонента часто вызываются CJSCore::Init(array('jquery')) и $this->addExternalCss().
  3. Asset Manager (\Bitrix\Main\Page\Asset) – современный способ регистрировать файлы, который умеет объединять и кешировать их.

Если в шаблоне компонента вы увидите строки вида:

$this->addExternalCss("/local/templates/.default/css/bootstrap.min.css");
$this->addExternalJs("/local/templates/.default/js/jquery.min.js");

— значит, именно этот компонент «тянет» свои копии.

Шаг 1. Поиск лишних подключений

Инструмент Как использовать Что ищем
Chrome DevTools → Network Откройте страницу, включите фильтр JS и CSS. Дублирующиеся запросы к jquery.js, bootstrap.css.
Bitrix Debugger (/bitrix/tools/asset_debug.php) Откройте в браузере. Список всех записанных в Asset Manager файлов.
Поиск по коду grep -R "jquery.min.js" /path/to/bitrix/ Файлы, где вручную добавлен скрипт.
Плагин “Asset Manager” Установите через Marketplace. Визуальная карта зависимостей.

Совет: включите $APPLICATION->SetAdditionalCSS() в init.php и посмотрите, какие файлы попадают в <head> без вашего участия.

Шаг 2. Удаление дублирующихся подключений

2.1. Отключаем глобальный jQuery

Если ваш шаблон уже загружает jQuery из CDN, в header.php добавьте:

CJSCore::UnRegisterExt('jquery');

И в каждом компоненте замените:

CJSCore::Init(array('jquery'));

на

if (!CJSCore::IsLoaded('jquery')) {
    CJSCore::Init(array('jquery'));
}

2.2. Переносим Bootstrap в шаблон сайта

  1. Скопируйте bootstrap.min.css и bootstrap.min.js в /local/templates/.default/css/ и /local/templates/.default/js/.
  2. В header.php добавьте:
$asset = \Bitrix\Main\Page\Asset::getInstance();
$asset->addCss(SITE_TEMPLATE_PATH . "/css/bootstrap.min.css");
$asset->addJs(SITE_TEMPLATE_PATH . "/js/bootstrap.min.js");
  1. В шаблонах компонентов удалите строки addExternalCss/addExternalJs с Bootstrap.

2.3. Объединяем и минифицируем

$asset = \Bitrix\Main\Page\Asset::getInstance();
$asset->addJs("/local/js/combined.min.js"); // уже содержит jquery + bootstrap
$asset->addCss("/local/css/combined.min.css");

Для создания combined.min.* используйте любой сборщик (Webpack, Gulp) один раз и загрузите готовый файл в local/.

Шаг 3. Настройка компонентов

3.1. Параметры шаблона

В component.php добавьте параметр USE_GLOBAL_ASSETS:

if ($arParams['USE_GLOBAL_ASSETS'] !== 'N') {
    $this->addExternalCss(SITE_TEMPLATE_PATH . "/css/bootstrap.min.css");
    $this->addExternalJs(SITE_TEMPLATE_PATH . "/js/jquery.min.js");
}

Тогда в component_epilog.php можно задать:

$arParams['USE_GLOBAL_ASSETS'] = 'N'; // отключаем локальные подключения

3.2. Переопределение шаблона

Создайте переопределённый шаблон в /local/templates/.default/components/bitrix/news.list/ и скопируйте только template.php. В нём уберите все addExternal* вызовы. Это безопасный способ, потому что ядро будет использовать ваш шаблон вместо оригинального.

3.3. Используем defer и async

$asset->addJs(SITE_TEMPLATE_PATH . "/js/jquery.min.js", true); // true → defer
$asset->addJs(SITE_TEMPLATE_PATH . "/js/bootstrap.min.js", false, ['async' => true]);

Шаг 4. Проверка результата

Метрика Как измерить Ожидаемый эффект
Время до первого отрисованного контента (TTFB) WebPageTest или Lighthouse Сокращение на 20‑40 %
Размер загружаемых CSS/JS Network → Size в DevTools Уменьшение на 150‑300 KB
Количество HTTP‑запросов Network → # Сокращение на 2‑4 запроса
Ошибки в консоли Console Нет «$Error: $ is not defined» после удаления дублей

Лучшие практики (чек‑лист)

  • ✅ Контролируйте подключаемые библиотеки в одном месте – header.php или Asset Manager.
  • ✅ Не подключайте jQuery/Bootstrap в каждом компоненте, если они уже есть на странице.
  • ✅ Объединяйте файлы, используйте кеширование (Cache-Control, ETag).
  • ✅ Отдавайте тяжёлые библиотеки через CDN (например, Cloudflare) с параметром ?partner=5095 для партнёрской программы.
  • ✅ Тестируйте после каждого изменения на чистой (без кэша) версии сайта.

Полезный ресурс: VDSina – быстрый VDS с поддержкой Bitrix, где можно проверить, как ваш оптимизированный сайт работает под нагрузкой.

Практика для закрепления

  1. Найдите в проекте все вызовы CJSCore::Init(array('jquery')). Сгруппируйте их по компонентам и укажите, какие из них можно отключить без потери функционала.
  2. Создайте один объединённый файл combined.min.js, включив в него jQuery 3.6 и Bootstrap 5. Настройте Asset Manager так, чтобы он подключал только этот файл. Проверьте в DevTools, что больше нет отдельных запросов к jquery.min.js и bootstrap.min.js.
  3. Проведите измерения до и после оптимизации с помощью Lighthouse. Запишите цифры по TTFB, Total Blocking Time и Size of assets. Какой процент улучшения вы получили?
  4. Модифицируйте один из ваших компонентов (например, catalog.section) так, чтобы он использовал параметр USE_GLOBAL_ASSETS. Продемонстрируйте, как отключить локальные подключения в component_epilog.php.
  5. Проверьте страницу на наличие конфликтов версий jQuery, используя консоль браузера. Если найдёте ошибку «$ is not a function», объясните, почему она возникла и как её исправить.

Выполнив эти упражнения, вы будете уверенно управлять подключениями CSS/JS в любой битриксовой системе и сможете значительно ускорить работу сайта. Удачной оптимизации!


CamZamZam - онлайн фото с вебкамеры с эффектами
Cartoon Network: игры с персонажами
Чат рулетка в 2026: будущие функции
Эксперт по доменным стратегическим решениям
Хостинг для e-commerce проектов
Как играть в слоты
Как настроить CDN для сайта на хостинге Host.bg
Как настроить SSL-сертификат для сайта на Host.bg
Как оптимизировать производительность сайта с хостингом Host.bg
Как выбрать правильный хостинг для вашего сайта
Какие бывают ЛОР болезни у детей
Кассовые терминалы с оплатой картами
LOL куклы витрина детская
Лучшие видеорегистраторы для водителей
Онлайн QR-код сканер
Онлайн-связь
Оптимизация производительности баз данных на хостинге Host.bg
Основы настройки веб-хостинга: что вам нужно знать
Партнёрская программа без блога: как получать трафик из Telegram
Профессиональные хитрости для пользователей хостинга Host.bg
Регистрация ИП в Москве для иностранных граждан
Сравнение хостинга Host.bg с другими провайдерами
Субтитры — нет, уши — включены: погружение в английский за 5 минут
Сумки с бусинами
Техника для строительства загородных трасс
ТОП-10 VPS для разработчика: рейтинг серверов под рабочие задачи
WordPress блог для бизнеса
рейтинг хостингов 2026 Быстрые VDS серверы