Недавно наткнулся на интересную об оптимизации скорости загрузки страниц. Вкратце суть предложенного метода состоит в том, чтобы в теге <head> сначала располагались CSS, а только потом JS. Вызвано это тем, что браузер производит загрузку CSS асинхронно, в отличие от JS.
Теперь о том, как реализовать это в Битриксе. Прежде всего мы должны воспользоваться отложенными функциями, для того, что бы вынести все подключения CSS и JS из кода страниц / шаблонов компонентов в тег <head>. В документации мне удалось найти всего одну отложенную функцию, подходящую для этого - CMain::AddHeadString/CMain::ShowHeadStrings. Однако нам в нашем случае понадобится как минимум две. Не много порывшись в исходниках мне удалось познакомиться с функцией CMain::AddHeadScript/CMain::ShowHeadScripts, созданной специально для подключения скриптов.
Итак, решение найдено. Теперь на остаётся заменить прямые подключения CSS на CMain::AddHeadSting и JS на CMain::AddHeadScript в коде:
и установить в теге <head> следующий порядок подключений:
1. Общие теги <link/>
2. $APPLICATION->ShowCSS();
3. $APPLICATION->ShowHeadStrings();
4. Общие теги <script/>
5. $APPLICATION->ShowHeadScripts();
Естественно, такая оптимизация не решит всех Ваших проблем, но по крайней послужит небольшим кирпичиком в оптимизации проекта.
Теперь о том, как реализовать это в Битриксе. Прежде всего мы должны воспользоваться отложенными функциями, для того, что бы вынести все подключения CSS и JS из кода страниц / шаблонов компонентов в тег <head>. В документации мне удалось найти всего одну отложенную функцию, подходящую для этого - CMain::AddHeadString/CMain::ShowHeadStrings. Однако нам в нашем случае понадобится как минимум две. Не много порывшись в исходниках мне удалось познакомиться с функцией CMain::AddHeadScript/CMain::ShowHeadScripts, созданной специально для подключения скриптов.
Итак, решение найдено. Теперь на остаётся заменить прямые подключения CSS на CMain::AddHeadSting и JS на CMain::AddHeadScript в коде:
<?$APPLICATION->AddHeadString('<link href="'.$APPLICATION->GetTemplatePath().'styles/someStyle.css" rel="stylesheet" type="text/css" />')?>
<?$APPLICATION->AddHeadScript('/js/someScript.js')?> |
и установить в теге <head> следующий порядок подключений:
1. Общие теги <link/>
2. $APPLICATION->ShowCSS();
3. $APPLICATION->ShowHeadStrings();
4. Общие теги <script/>
5. $APPLICATION->ShowHeadScripts();
Естественно, такая оптимизация не решит всех Ваших проблем, но по крайней послужит небольшим кирпичиком в оптимизации проекта.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
