Отложенная загрузка скриптов и CSS в «Битрикс»

Низкая скорость загрузки страниц отпугивает до 70% пользователей. Это общеизвестный факт. Стратегия решения проблемы понятна, надо сокращать количество загружаемых элементов и уменьшать их «вес». В этой заметке мы рассмотрим один из приемов ускорения загрузки при помощи отложенной загрузки JavaScript и CSS файлов на странице.

1. Доработка заголовка header.php

Разбираем функцию ShowHead на составляющие:

//$APPLICATION->ShowHead();
      
$APPLICATION->ShowMeta("keywords");      // Вывод мета - тега keywords
$APPLICATION->ShowMeta("description");      // Вывод мета - тега description
$APPLICATION->ShowCSS();         // Подключение файлов стилей CSS
      
if($USER->IsAdmin())
   $APPLICATION->ShowHeadStrings();   // Отображает специальные стили, JavaScript

2. . Подключаем вывод скриптов в «подвале» сайта footer.php

$APPLICATION->ShowHeadScripts();      // Вывод скриптов

3. . Вывод скриптов из init.php

Непосредственно вывод будет выполняться из init.php или functions.php

AddEventHandler("main", "OnEndBufferContent", "deleteKernelCss");

function deleteKernelCss(&$content) {
   global $USER, $APPLICATION;
   
   if((is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/bitrix/")!==false) return;
   if($APPLICATION->GetProperty("save_kernel") == "Y") return;

   $arPatternsToRemove = Array(
      '/<li nk.+?href=".+?kernel_main\/kernel_main\.css\?\d+"[^>]+>/',
   );

   $content = preg_replace($arPatternsToRemove, "", $content);
   $content = preg_replace("/\n{2,}/", "\n\n", $content);
}

AddEventHandler("main", "OnEndBufferContent", "includeCssInline");

function includeCssInline(&$content) {
   global $USER, $APPLICATION;
   
   if((is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/bitrix/")!==false) return;
   if($APPLICATION->GetProperty("save_kernel") == "Y") return;

   preg_match('/<li nk.+?href="(\/bitrix\/cache\/css\/'.SITE_ID.'\/'.SITE_TEMPLATE_ID.'\/template_[^"]+)"[^>]+>/', $content, $arMatches);
   $sFilePath = "http://".$_SERVER["HTTP_HOST"].$arMatches[1];
   
   $obCache = new CPHPCache;
   $life_time = 0*60;
   
   if($obCache->InitCache($life_time, $sFilePath, "/")) {
      $vars         = $obCache->GetVars();
      $sIncludeCss      = $vars["sIncludeCss"];
      $sIncludeCssClear   = $vars["sIncludeCssClear"];
      
   } else {
      $sIncludeCss      = file_get_contents($sFilePath);
      $sIncludeCssClear   = compressCSS($sIncludeCss);
      
   }
   
   if(false) {
      ?><pre style="font-size:10px;line-height: 8px;">До: <?=strlen($sIncludeCss);?></pre><?
      ?><pre style="font-size:10px;line-height: 8px;">После: <?=strlen($sIncludeCssClear);?></pre><?
   }
   
   $content = str_replace($arMatches[0], "<st yle>$sIncludeCssClear</style>", $content);
   
   if($obCache->StartDataCache()) {
      $obCache->EndDataCache(array(
         "sIncludeCss" => $sIncludeCss,
         "sIncludeCssClear" => $sIncludeCssClear,
      ));
   }
}

function compressCSS($css, $arOptions = Array()) {
   $sResult = $css;
   
   $sResult = preg_replace("/\/\*[^*]+\*\//", "", $sResult);      // comments
   $sResult = preg_replace("/\/\**\*\//", "", $sResult);         // comments
   $sResult = preg_replace("/\s*(:|,|;|{|}|\t)\s*/", "$1", $sResult);   // whitespaces
   $sResult = preg_replace("/(\t+|\s{2,})/", " ", $sResult);      // tabs and double whitespace
   $sResult = preg_replace("/(\s|:)([\-]{0,1}0px)\s/", " 0 ", $sResult);   // zeros
   //$sResult = preg_replace("/#(\w){6};/", "#$1$1$1;", $sResult);      // #dddddd => #ddd

   return $sResult;
}

Готово!


Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!

Назад в раздел