Сегодня узнаем как грамотно оформлять header.php в Битрикс, как правильно подключать .css и .js в header.php, как правильно подключать jQuery в Битрикс и как включить сжатие .css и .js файлов в Битрикс.

Это очень острая и актуальная проблема на сегодняшний день. Самые частые обращения по модулям связаны с ошибками в скриптах, когда неправильно подключена jQuery в header.php, и очень часто подключено несколько jQuery, но должна быть подключена на всех страницах сайта только одна библиотека jQuery и самой первой среди всех скриптов шаблона сайта.

На одном сайте был рекорд, я насчитал 7 подключенных библиотек jQuery, просто человек замучился искать ошибки и деваться уже некуда было, когда проблема была найдена и исправлена, все стало работать на сайте правильно.

Правильный header.php в Битрикс

Итак, как грамотно должен быть оформлен файл header.php шаблона сайта в Битрикс:

  1. Перед <!DOCTYPE html> не должно быть никаких пробелов и переносов
  2. Кодировка страницы задается перед <title>
  3. После заголовка <title> перечисляются все мета-теги <meta>
  4. После мета-тегов подключаются .css стили сайта <link>
  5. И только после подключения .css стилей подключаются  все .js скрипты <script>
  6. Комментарии к IE по возможности лучше опустить в самый конец перед закрывающим тегом </head>

Пример header.php для HTML 5 DOCTYPE

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)  die();
/**
 * @var CUser $USER
 * @var CMain $APPLICATION
 * @var $full_width - переменная в которой будет true если выполнится условие из  $arFullWidthPages
 */
?><!DOCTYPE html>
<html lang="<?=LANGUAGE_ID?>">
<head>
<meta charset="<?=SITE_CHARSET?>">
<title><?$APPLICATION->ShowTitle()?></title>
<?
//Тут мета-теги
$APPLICATION->ShowMeta("robots", false, false);
$APPLICATION->ShowMeta("keywords", false, false);
$APPLICATION->ShowMeta("description", false, false);
?>
<meta name="yandex-verification" content="xxxxxxxxxxxxxxxx">
<meta name="google-site-verification" content="xxxxxxxxxxxxxxxx">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<?
//Тут канонический url
$APPLICATION->ShowLink("canonical", null, false);

//Тут стили шаблона сайта
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/uikit.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/form-password.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/sticky.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/placeholder.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/jquery.responsive-tabs.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/nanoscroller.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/scrollup/image.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/pace.min.css');

//Тут выводим стили
$APPLICATION->ShowCSS(true, false);
?>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/ie8-polyfill.js');?>"></script>


<![endif]-->
<script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/jquery-1.11.2_min.js');?>"></script>
<?
//Это встроенная в ядро Битрикс jQuery, если подключать ее, то строку подключения jQuery 1.11.2 выше надо удалить.
//CJSCore::Init(array('jquery'));

//Тут скрипты
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/core.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/grid.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/modal.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/dropdown.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/scrollspy.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/utility.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/button.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/switcher.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/nav.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/sticky.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/form-password.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/pace.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.nanoscroller.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.responsiveTabs.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/switchery.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/readmore.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.scrollUp.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/fn.js');

//Тут выводим скрипты
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
</head>

CUtil::GetAdditionalFileURL() - генерирует url к файлу с указанием метки версии файла, т.е. он будет кешироваться в браузере посетителя.

SITE_TEMPLATE_PATH - это константа указывающая URL от корня сайта до папки текущего шаблона включая имя папки, если измените папку шаблона, то в header.php ничего  исправлять уже не придется, он изменится в этой константе, например: /bitrix/templates/папка шаблона сайта/


Разберем представленный выше код header.php детально, чтобы понимать, что тут для чего подключается.
Хочу обратить внимание на передаваемые параметры true и false в методах, например ShowMeta() и ShowCSS(), от них зависит стандарт вывода тегов, для HTML 4, HTML 5 в виде <link>, иначе по стандарту xHTML в виде <link />, в данном примере для HTML 5, подробнее читайте в API-документации Битрикс.

Тут мы выводим мета-теги "описание" и "ключевые слова" для поисковых систем.

<?
$APPLICATION->ShowMeta("robots", false, false);
$APPLICATION->ShowMeta("keywords", false, false);
$APPLICATION->ShowMeta("description", false, false);
?>

Методом SetAdditionalCSS() подключаем стили шаблона, так каждый стиль.

$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/uikit.gradient.min.css');

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

<?
$APPLICATION->ShowCSS(true, false);
?>

Перед подключением вообще всех скриптов сайта и только для браузера Internet Explorer младше IE 9  я подключаю специальные полифилы функций/методов, которые в нем отсутствуют и вызывают ошибки javascript, возможная самая частая ошибка типа Object doesn't support property or method 'forEach'...
Т.е. если какого-то метода нет в IE 8, но он используется в новой jQuery или каком-то плагине, то может повезет и он найдется в этом скрипте, но Вы можете его не подключать, только если нужен.

<!--[if lt IE 9]>
<script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/ie8-polyfill.js');?>"></script>
<![endif]-->

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

<script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/jquery-1.11.2_min.js');?>"></script>

Методом AddHeadScript() подключаем скрипты шаблона и только после подключения стилей, стили всегда подключайте выше скриптов.

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/core.min.js');

Ниже два заключительных метода "выводят":

Обратите внимание на порядок, именно в таком порядке!

$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();

Почему строго в таком порядке?
Потому что в методе ShowHeadStrings() может выводиться jQuery ядра Битрикс, вызываемая таким образом:

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

Я ее специально закомментировал, чтобы Вы это знали, и знали где подключать. Вызываться он может в любом компоненте, в шаблоне, на любой странице сайта, а выводится она именно в этом самом первом методе, если поменять их местами, она окажется в самом низу, вот и ошибка разработки, можно это смело добавлять в чек-лист по разработке сайта.
Но если Вы выводите встроенную jQuery, значит подключенную ранее вручную jQuery надо удалить со страницы, не забывайте, она должна быть одна на всем сайте! 

Итак, все это подключенное в исходном коде выглядит так:

Правильный header.php в Битрикс

Это конечно все круто! Но, как мы видим, к серверу очень много запросов - 93 шт., много подключено всяких файликов, а это заметно сказывается на скорости загрузки страницы, на время ожидания клиентом, мне-то как разработчику очень удобно, наглядно все видно в коде, но посетители мои от этого заметно страдают...
Просмотр количества запросов к серверу в Firebug


Оказывается, в Битрикс есть отличные опции в настройках главного модуля, позволяющие:

Включается сжатие и объединение .css и .js здесь:

Администрирование -> Настройки -> Настройки модулей -> Главный модуль

Поставьте галочки и сохраните настройки модуля зеленой кнопкой Сохранить.
При включении этих опции в идеальном случае на странице подключается 3 css и 3 js файла, подробнее читайте в курсе про Сжатие css и js файлов.
Сжатие о объединение .css и .js Битрикс


Все, сжатие включено и должно работать.
Для точного результата работы сжатия необходимо разлогиниться, далее открывайте главную страницу сайта, обновите ее, откройте исходный код и увидите такую картину
Результат работы сжатия в Битрикс

Наглядно видим, насколько уменьшилось количество файлов, все скрипты шаблона сжаты в один файл, стили также в один файл.
Количество запросов уменьшилось в разы, время полной загрузки страницы сократилось с 3.8сек. до 1.8сек., запросы к серверу сократились с 93 до 43.
Просмотр количества запросов к серверу в Firebug

Заключение

Данный способ конечно не является идеальным, но он послужит хорошим образцом, как все подключать и в каком порядке, и как не совершать грубейших ошибок при разработке сайта.

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

Это была моя первая статья из курса "Ускорение сайта", продолжение следует...
Вернуться в список