Правильное подключение скриптов в шаблоне Bitrix

Часто новички неправильно подключают стили и скрипты в шаблоне битрикса. Постараемся разобрать все способы подключения.

Самый простой и очевидный способ подключения скриптов шаблоне битрикс конечно же:

<script src="<? echo SITE_TEMPLATE_PATH; ?>/js/script.js"></script>
<link href="<? echo SITE_TEMPLATE_PATH; ?>/css/style.css" type="text/css" rel="stylesheet" />

Конечно данный способ будет работать. Но вы не сможете воспользоваться штатными функциями битрикса, такими как объединение js или css-файлов, или же перемещение всех js в конец страницы. А это как никак один из инструментов оптимизации сайта.

Нам стоит обратится к API Bitrix. И существуют 2 способа подключения. Один на старом API, второй на новом d7 API. Пользоваться можно двумя способами. Хотя конечно предпочтительнее во всех своих проектах переходить на новое D7 API.

Старый способ

//css
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.css");

//js
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/css/style.js");

//вставляем в head нужный текст
$APPLICATION->AddHeadString('<link href="https://arhetstudio.ru" rel="canonical">');

Так же каждому js и css, ну или строке, можно указать вторым параметром true. Данный параметр помещает файлы стилей или js в конец списка ресурсов шаблона. Например так:

//css
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/style.css', true);

Новый способ

use Bitrix\Main\Page\Asset;

//css
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/style.css");

//js
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH."/js/jscript.js");

//string
Asset::getInstance()->addString('<link href="https://arhetstudio.ru" rel="canonical">');

Как и с первым случаем, на новом API, мы можем указать вторым параметром true, чтобы поместить файлы в конец списка.

//css
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/style.css", true);

Оптимизация сайта

Настройка модуля — Настройка главного модуля

Не забудьте в конце выставить нужные галочки для оптимизации сайта. Со сжатыми js и css файлами, перемещенными в конец страницы, страницы будет грузиться значительно быстрее. Плюс поисковики будут более благосклонны к такому сайту. Учтите, что при перемещении js-файлов в конец страницы, работа js-файлов может быть нарушена. Это касается например страниц, где js-файлом сразу подгружается в тело сайта без возможности указания, куда подгружать. Да, такой бред бывает. Так что после оптимизации не забудьте пройтись по всему сайту и проверить его работоспособность.

Вполне может быть, что придется снятьгалочку с "Переместить весь Javascript в конец страницы". И потом попробовать либо переписать, либо удалить плохой js-код.