Простой способ ускорить Bitrix

Недавно я был сильно озадачен скоростью загрузки своего сайта. Ресурс, некогда загружающийся за 0.4 секунды, начал виснуть в среднем полторы-две секунды, а иногда и по 4!

Сразу отбросив варианты “да это в хостинге дело” и “их CDN как-то неправильно работает”, я ринулся искать подтверждение своей криворукости. Первым делом прогнал сайт через Google PageSpeed Insights. Для своих тестов я взял последнюю статью в блоге: http://ydmitry.ru/blog/prezentatsiya-material-design-lite/. … ну и увидел ужасающие 44 /100 по скорости (зато 97/100 удобство). Сразу бросилось в глаза:

“Подождите” — подумал я, точно помню, что JS перемещается в конец страницы.

Пришло время невообразимых костылей!

Открываем шаблон сайта и находим блок head. В нем:

<head>     
<meta name="viewport" content="width=device-width, initial-scale=1"> <title><?$APPLICATION->ShowTitle()?></title>
<link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/img/favicon1.ico" type="image/vnd.microsoft.icon"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<?$APPLICATION->ShowHead();?>
<?IncludeTemplateLangFile(__FILE__);?>
</head>

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

<?$APPLICATION->AddHeadScript("/bower_components/jquery/dist/jquery.js")?> 
<?$APPLICATION->AddHeadScript("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert")?> <?$APPLICATION->AddHeadScript("/js/my.js")?>

На этом все. Первым же делом подключаю font-awesome правильно:

<?$APPLICATION->SetAdditionalCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");?>

Но проблема не может быть только в этом. Скрипты выводятся в шапке и за это несет ответственность $APPLICATION->ShowHead(). Можно было бы перенести вызов функции из шапки в футер, но тогда мы столкнемся с кучей ошибок:

Если загуглить проблему, все решения сводятся к тому, что нужно перенести ShowHead обратно наверх, а нас это принципиально не устраивает.

Будем выводить скрипты и стили вручную. ShowHead легко заменяется несколькими методами:

<meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET;?>" /> 
<?$APPLICATION->ShowMeta("keywords")?>
<?$APPLICATION->ShowMeta("description")?>
<?$APPLICATION->ShowCSS();?>
<?$APPLICATION->ShowHeadStrings()?>
<?$APPLICATION->ShowHeadScripts()?>

Первые четыре добавим в блок head, оставшиеся два поместим в футер. Перезагружаем страницу, ничего не сломалось, стили и скрипты грузятся в футере. Все отлично!? А нет, 67 ошибок “Uncaught ReferenceError: BX is not defined” и “Uncaught ReferenceError: BXHotKeys is not defined” остались.

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

В шапку:

<?      
// Фикс множества багов "Uncaught ReferenceError: BXHotKeys is not defined" для админа
if ($USER->IsAdmin()) {
$APPLICATION->ShowHeadStrings();
}
?>

В футер:

<?     
// Фикс множества багов "Uncaught ReferenceError: BXHotKeys is not defined" для админа
if (!$USER->IsAdmin()) {
$APPLICATION->ShowHeadStrings();
}
?>

Вуаля. Грабли появились, ошибки исчезли! Если перестали отрабатывать какие-то скрипты в шаблонах компонентов (слайдеры, галереи и др.), просто создайте файл script.js рядом с template.php нужного шаблона и переместите код в него. Файл автоматически подключится шаблоном. Проверим скорость загрузки.

С ShowHead:

Без ShowHead:

Да, все еще есть над чем работать, но прогресс налицо. После некоторого ожидания, видим положительную тенденцию:

Для полноты картины вот что получилось в файле header.php:

<head>     
<title><?$APPLICATION->ShowTitle()?></title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET?>">
<meta name="viewport" content="width=device-width, initial-scale=1"> <?$APPLICATION->ShowMeta("keywords")?>
<?$APPLICATION->ShowMeta("description")?>
<!-- !Meta -->
<!-- CSS -->
<?$APPLICATION->ShowCSS();?>
<!-- !CSS -->
<link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/img/favicon1.ico" type="image/vnd.microsoft.icon"/>
<?$APPLICATION->SetAdditionalCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");?>
<?
// Фикс множества багов "Uncaught ReferenceError: BXHotKeys is not defined" для админа
if ($USER->IsAdmin()) {
$APPLICATION->ShowHeadStrings();
}
?>
<?IncludeTemplateLangFile(__FILE__);?>
</head>

footer.php

<?$APPLICATION->AddHeadScript("/bower_components/jquery/dist/jquery.js")?> 
<?$APPLICATION->AddHeadScript("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert")?> <!-- Scripts -->
<?
if (!$USER->IsAdmin()) {
$APPLICATION->ShowHeadStrings();
}
?>
<?$APPLICATION->ShowHeadScripts();?>
<!-- !Scripts -->
</body>
</html>

bitrix, скорость сайта, BX is not defined, BXHotKeys is not defined, ускорение битрикс


Originally published at ydmitry.ru.