Недавно я был сильно озадачен скоростью загрузки своего сайта. Ресурс, некогда загружающийся за 0.4 секунды, начал виснуть в среднем полторы-две секунды, а иногда и по 4!
Сразу отбросив варианты "да это в хостинге дело" и "их CDN как-то неправильно работает", я ринулся искать подтверждение своей криворукости. Первым делом прогнал сайт через Google PageSpeed Insights. Для своих тестов я взял последнюю статью в блоге: https://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>
Я не понимаю зачем эта строчка в футере: ShowHeadScripts();?>. Про не не сказано ни слова.
Эта функция отвечает за вывод служебных скриптов.
Отличная статья, спасибо!
Заходи еще!)
Уважаемый Дмитрий. Я прочитал Вашу статью, она должна быть очень полеззна, но я не могу применить ее к своему решению, не могли бы подсказать как и куда надо переставить ? Заранее спасибо
вот header
Fetch();
$htmlClass = ($_REQUEST && isset($_REQUEST['print']) ? 'print' : false);
$bIncludedModule = (\Bitrix\Main\Loader::includeModule("aspro.next"));?>
<html xmlns="www.w3.org xml:lang="<?=LANGUAGE_ID?>" lang="<?=LANGUAGE_ID?>" <?="($htmlClass" ?="" 'class="'.$htmlClass.'" '="" :="" '')?="">>
<head>
<title>ShowTitle()?></title>
ShowMeta("viewport");?>
ShowMeta("HandheldFriendly");?>
ShowMeta("apple-mobile-web-app-capable", "yes");?>
ShowMeta("apple-mobile-web-app-status-bar-style");?>
ShowMeta("SKYPE_TOOLBAR");?>
ShowHead();?>
AddHeadString('<script>BX.message('.CUtil::PhpToJSObject( $MESS, false ).')</script>', true);?>
<style>
p {
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
<script type="text/javascript">
//Источник: " +document.location.href+" МетеоВосток - кондиционеры, камины, водонагреватели и другая клматическая техника meteovostok.ru";
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout( function() {
body_element.removeChild(newdiv);
}, 0);
}
document.oncopy = addLink;
//]]>
</script>
<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined")
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined")
target.style.MozUserSelect="none"
else
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
</head>
<body oncontextmenu="return false;">
<body class="<?=($bIncludedModule ? " fill_bg_".strtolower(cnext::getfrontparametrvalue("show_bg_block"))="" :="" "");?="">" id="main">
<div id="panel">ShowPanel();?></div>
SetTitle(GetMessage("ERROR_INCLUDE_MODULE_ASPRO_NEXT_TITLE"));?>
<center>IncludeFile(SITE_DIR."include/error_include_module.php");?></center></body></html>
IncludeComponent("aspro:theme.next", ".default", array("COMPONENT_TEMPLATE" => ".default"), false, array("HIDE_ICONS" => "Y"));?>
<div class="wrapper1 <?=($isIndex && $isShowIndexLeftBlock ? " with_left_block"="" :="" "");?=""> ">
<div class="header_wrap visible-lg visible-md title-v<?=$arTheme[" page_title"]["value"];?="">">
<header id="header">
</header>
</div>
<div id="headerfixed">
</div>
<div id="mobileheader" class="visible-xs visible-sm">
<div id="mobilemenu" class="<?=($arTheme[" header_mobile_menu_open"]["value"]="=" '1'="" ?="" 'leftside':'dropdown')?="">">
</div>
</div>
$arRegion['LIST_STORES']);
else
$GLOBALS['arRegionality'] = array('PROPERTY_STORE_ID' => $arRegion['LIST_STORES']);
}
}
if($isIndex)
{
$GLOBALS['arrPopularSections'] = array('UF_POPULAR' => 1);
$GLOBALS['arrFrontElements'] = array('PROPERTY_SHOW_ON_INDEX_PAGE_VALUE' => 'Y');
}?>
<div class="wraps hover_<?=$arTheme[" hover_type_img"]["value"];?="">" id="content">
ShowViewContent('section_bnr_content');?>
GetProperty("HIDETITLE") !== 'Y'):?>
ShowViewContent('top_section_filter_content');?>
<div class="wrapper_inner front <?=($isShowIndexLeftBlock ? " "="" :="" "wide_page");?="">">
<div class="wrapper_inner <?=($isHideLeftBlock ? " wide_page"="" :="" "");?="">">
<div class="right_block <?=(defined(" error_404")="" ?="" "error_page"="" :="" "");?=""> wide_">
<div class="middle <?=($is404 ? 'error-page' : '');?>">
<div class="container">
<div class="maxwidth-theme">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12 content-md <?=CNext::ShowPageProps(" error_404");?="">">
а вот footer
</div>
<div class="col-md-3 col-sm-3 hidden-xs hidden-sm right-menu-md">
<div class="sidearea">
ShowViewContent('under_sidebar_content');?>
IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "sect", "AREA_FILE_SUFFIX" => "sidebar", "AREA_FILE_RECURSIVE" => "Y"), false);?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
GetProperty("HIDE_LEFT_BLOCK") != "Y" && !defined("ERROR_404")):?>
<div class="left_block">
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
GetProperty("viewed_show") == "Y" || $is404):?>
IncludeComponent(
"bitrix:main.include",
"basket",
array(
"COMPONENT_TEMPLATE" => "basket",
"PATH" => SITE_DIR."include/footer/comp_viewed.php",
"AREA_FILE_SHOW" => "file",
"AREA_FILE_SUFFIX" => "",
"AREA_FILE_RECURSIVE" => "Y",
"EDIT_TEMPLATE" => "standard.php",
"PRICE_CODE" => array(
0 => "BASE",
),
"STORES" => array(
0 => "",
1 => "",
),
"BIG_DATA_RCM_TYPE" => "bestsell"
),
false
);?>
<script type="text/javascript">
disableSelection(document.body)
</script>
</footer>
<div class="bx_areas">
</div>
</body>
</html>
Модуль позволяет перенести все CSS файлы в конец body и создать для сайта critical.css, который будет отображаться при открытии страницы. Значительно увеличивает скорость открытия страниц + прибавляет попугаев на Google PageSpeed
заметил странную штуку: если $this->ShowHeadScripts();
прописать в footer.php - перестает работать корзина:(
выдает ошибку BX undefined :(
У Вас в корзине используется BX библиотека Bitrix. Вероятно, код, вызывающий ошибку неверно подключен (код в шаблоне компонента или др).
Да и сама статья про ускорение крайне полезная. Обязательно у себя такое попробую.
Спасибо, стараюсь)
Чёрт побери! ОГРОМНОЕ вам спасибо - я уже намучался с font-awesome - то не отображаются иконки, прописал тупо в хедере путь к их cdn - слетел font-size.
А подключив ПРАВИЛЬНО: $APPLICATION->SetAdditionalCSS("//maxcdn.bootstrapcdn.com/fon...");, то есть не через $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . '/css/font-awesome.min.css');, всё взлетело.