Бортовой журнал Ктулху
    Вы здесь:
  • Главная
    • >
  • /dev
    • > Битрикс: оптимизация загрузки страницы

Битрикс: оптимизация загрузки страницы

Актуальная проблема вообще и в частности для Битрикса - это быстрая загрузка страницы которая зависит от того насколько она правильно скомпонована, в каком порядке загружаются подключенные стили и скрипты.

 

header.php

Основные правила:

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

<?
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/style.css');


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


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

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

SITE_TEMPLATE_PATH - это константа указывающая URL от корня сайта до папки текущего шаблона включая имя папки.

Параметры true и false в методах например ShowMeta() и ShowCSS() указывают стандарт вывода тегов для HTML 4 и HTML 5 в виде <link> (true), иначе по стандарту xHTML в виде <link />(false).

https://dev.1c-bitrix.ru/api_help/main/reference/cmain/showmeta.php

 

SetAdditionalCSS() - подключение стилей.

https://dev.1c-bitrix.ru/api_help/main/reference/cmain/setadditionalcss.php

 

ShowCSS(true, false) - вывод CSS из всех подключенных модулей и шаблонов и ядра.

https://dev.1c-bitrix.ru/api_help/main/reference/cmain/showcss.php

 

Внимание! Подключение jQuery производить в первую очередь, т.к. многие скрипты от нее зависят.

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

Скрипты шаблона подключать ПОСЛЕ подключения стилей. Стили всегда подключать ДО скриптов.

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

ShowHeadStrings() выводит все скрипты ядра Битрикс, включая встроенную jQuery, если вызывается методом CJSCore::Init(array('jquery'));
ShowHeadScripts() выводит скрипты шаблона добавленные с помощью AddHeadScript(), а также специальные стили, JavaScript, либо произвольный html-код, который задается в компонентах с помощью CMain::AddHeadString() и все на свете пользовательское.
Именно в таком порядке!

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

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

Сжатие js и css

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

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

Битрикс позволяет сжимать, объединять и перемещать в конец страницы.

screenshot 2016 06 15 09 17 13 1

Порядок загрузки

Одним из способов оптимизации является перенос скриптов в футер но это приведет к ошибкам типа чего-то там not defined.

Поэтому, если использовалась функция 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, оставшиеся два - в футер. Проверка показывает что ошибки остались только под админом.

Можно сделать оптимимзацию только для пользователей.

if ($USER->IsAdmin()) { // для админа
// >ShowHead()
} else { // для пользователя
// <?$APPLICATION->ShowMeta("keywords")?>
// <?$APPLICATION->ShowMeta("description")?>
// <?$APPLICATION->ShowCSS();?>
}

 

http://ydmitry.ru/blog/prostoy-sposob-uskorit-bitrix/

https://dev.1c-bitrix.ru/community/webdev/user/11948/blog/10078/

http://tuning-soft.ru/articles/bitrix/acceleration-optimization-compression-of-css-and-js-bitrix.html