Простой способ ускорить 1С-Битрикс

Опубликовано: 17 Февраля 2016

Изменено: 19 Декабря 2024

Время чтения: 4 минуты

🙈 ∞

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

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

Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

"Подождите" - подумал я, точно помню, что 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(). Можно было бы перенести вызов функции из шапки в футер, но тогда мы столкнемся с кучей ошибок:

Uncaught ReferenceError: BX is not defined

Если загуглить проблему, все решения сводятся к тому, что нужно перенести 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>