Bitrix отложить загрузку css

Содержание
Шпаргалка. Оптимизации верстки шаблона в битриксе
Шпаргалка. Оптимизации верстки шаблона в битриксе
Оптимизация скорости загрузки страниц
Оптимизация скорости загрузки страниц
Шпаргалка. Оптимизации верстки шаблона в битриксе

3. 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( '/]+>/', ); $content = preg_replace($arPatternsToRemove, "", $content); $content = preg_replace("/\n/", "\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('/]+>/', $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) < ?>До: После: $content = str_replace($arMatches[0], "$sIncludeCssClear", $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)/", " ", $sResult); // tabs and double whitespace $sResult = preg_replace("/(\s|:)([\-]0px)\s/", " 0 ", $sResult); // zeros //$sResult = preg_replace("/#(\w);/", "#$1$1$1;", $sResult); // #dddddd => #ddd return $sResult; >
 Здесь, если не установлено свойство страницы "save_kernel = Y" из страницы исключается kernel.css и template.css заменяется на инлайновое представление, так экономится один GET запрос к серверу и страница быстрее отображается.
Но момент с CSS неоднозначный, т.к. не будь он инлайном, то мог бы и кешироваться на стороне браузера. Я считаю, что если этот файл получается небольшим, то лучше его инлайнить, особенно, если работает gzip.
 P.S. Написал тут обращение разработчикам, что бы добавили события на формирование файла template.css после объединения всех CSS шаблона - дополнительно можно было бы заменить маленькие картинки (скажем, до 2кб) на их base64 аналог. В таком случае нам бы не понадобилось грузить CSS иналайном. Ну или можно было бы разделить - загружать важный css инлайном, а остальное внизу страницы.
 P.P.S. Пытался решить задачу замены цветов типа #dddddd на #ddd с помощью регулярных выражений, но так и не получилось. Вот такая регулярка:
 
 забирает любое представление цвета, т.к. \w - это любая буква или число. По идее, регулярным выражением нужно получить 6 одинаковых(!) символов, а не "\w", но как это сделать я не знаю. Может подскажете? 
 Источник
 Шпаргалка. Оптимизации верстки шаблона в битриксе
 3. 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( '/]+>/', ); $content = preg_replace($arPatternsToRemove, "", $content); $content = preg_replace("/\n/", "\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('/]+>/', $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) < ?>До: После: $content = str_replace($arMatches[0], "$sIncludeCssClear", $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)/", " ", $sResult); // tabs and double whitespace $sResult = preg_replace("/(\s|:)([\-]0px)\s/", " 0 ", $sResult); // zeros //$sResult = preg_replace("/#(\w);/", "#$1$1$1;", $sResult); // #dddddd => #ddd return $sResult; >
 Здесь, если не установлено свойство страницы "save_kernel = Y" из страницы исключается kernel.css и template.css заменяется на инлайновое представление, так экономится один GET запрос к серверу и страница быстрее отображается.
Но момент с CSS неоднозначный, т.к. не будь он инлайном, то мог бы и кешироваться на стороне браузера. Я считаю, что если этот файл получается небольшим, то лучше его инлайнить, особенно, если работает gzip.
 P.S. Написал тут обращение разработчикам, что бы добавили события на формирование файла template.css после объединения всех CSS шаблона - дополнительно можно было бы заменить маленькие картинки (скажем, до 2кб) на их base64 аналог. В таком случае нам бы не понадобилось грузить CSS иналайном. Ну или можно было бы разделить - загружать важный css инлайном, а остальное внизу страницы.
 P.P.S. Пытался решить задачу замены цветов типа #dddddd на #ddd с помощью регулярных выражений, но так и не получилось. Вот такая регулярка:
 
 забирает любое представление цвета, т.к. \w - это любая буква или число. По идее, регулярным выражением нужно получить 6 одинаковых(!) символов, а не "\w", но как это сделать я не знаю. Может подскажете? 
 Источник
 Оптимизация скорости загрузки страниц
 Недавно наткнулся на интересную статью об оптимизации скорости загрузки страниц. Вкратце суть предложенного метода состоит в том, чтобы в теге сначала располагались CSS, а только потом JS. Вызвано это тем, что браузер производит загрузку CSS асинхронно, в отличие от JS.
 Теперь о том, как реализовать это в Битриксе. Прежде всего мы должны воспользоваться отложенными функциями, для того, что бы вынести все подключения CSS и JS из кода страниц / шаблонов компонентов в тег . В документации мне удалось найти всего одну отложенную функцию, подходящую для этого - CMain::AddHeadString/CMain::ShowHeadStrings. Однако нам в нашем случае понадобится как минимум две. Не много порывшись в исходниках мне удалось познакомиться с функцией CMain::AddHeadScript/CMain::ShowHeadScripts, созданной специально для подключения скриптов.
 Итак, решение найдено. Теперь на остаётся заменить прямые подключения CSS на CMain::AddHeadSting и JS на CMain::AddHeadScript в коде:
 AddHeadString('GetTemplatePath().'styles/someStyle.css" rel="stylesheet" type="text/css" />')?> AddHeadScript('/js/someScript.js')?>
 и установить в теге следующий порядок подключений:
 1. Общие теги 
2. $APPLICATION->ShowCSS();
3. $APPLICATION->ShowHeadStrings();
4. Общие теги 
5. $APPLICATION->ShowHeadScripts();
 Естественно, такая оптимизация не решит всех Ваших проблем, но по крайней послужит небольшим кирпичиком в оптимизации проекта.
 Источник
 Оптимизация скорости загрузки страниц
 Недавно наткнулся на интересную статью об оптимизации скорости загрузки страниц. Вкратце суть предложенного метода состоит в том, чтобы в теге сначала располагались CSS, а только потом JS. Вызвано это тем, что браузер производит загрузку CSS асинхронно, в отличие от JS.
 Теперь о том, как реализовать это в Битриксе. Прежде всего мы должны воспользоваться отложенными функциями, для того, что бы вынести все подключения CSS и JS из кода страниц / шаблонов компонентов в тег . В документации мне удалось найти всего одну отложенную функцию, подходящую для этого - CMain::AddHeadString/CMain::ShowHeadStrings. Однако нам в нашем случае понадобится как минимум две. Не много порывшись в исходниках мне удалось познакомиться с функцией CMain::AddHeadScript/CMain::ShowHeadScripts, созданной специально для подключения скриптов.
 Итак, решение найдено. Теперь на остаётся заменить прямые подключения CSS на CMain::AddHeadSting и JS на CMain::AddHeadScript в коде:
 AddHeadString('GetTemplatePath().'styles/someStyle.css" rel="stylesheet" type="text/css" />')?> AddHeadScript('/js/someScript.js')?>
 и установить в теге следующий порядок подключений:
 1. Общие теги 
2. $APPLICATION->ShowCSS();
3. $APPLICATION->ShowHeadStrings();
4. Общие теги 
5. $APPLICATION->ShowHeadScripts();
 Естественно, такая оптимизация не решит всех Ваших проблем, но по крайней послужит небольшим кирпичиком в оптимизации проекта.
 Источник
 
Читайте также:  Inline CSS