Битрикс (Bitrix) и Google PageSpeed Insights

Как все мы знаем в конце 2018 года Google кардинально изменил систему оценки скорости загрузки как мобильных сайтов так и десктопных.

Все мы знаем, что хорошим тоном является максимально логичное использование css стилей и js скриптов. Хороший тон верстки и программирования сайтов сам по себе подразумевает соблюдение стандартов, но иногда в виду работы над сайтами не одной команды, смены верстальщика или программистов мы вынуждены бороться с последствиями нелогичных действий/нарушения структуры, целостности, захламления личным кодом и так далее.
Если вы читаете этот текст, значит так или иначе вы с этим столкнулись или сталкивались ранее. Давайте по порядку, с чего начать:

 - Провести ревизию CSS, JS и убрать все лишнее, что ранее уже не используется.
 - Разнести код стилей и скриптов непосредственно в компоненты, не подключать их глобально в header.php или footer.php
 - Для подключения скриптов всегда использовать методы Bitrix, это необходимо для работы стандартного функционала переноса и сжатия скриптов и стилей

<?php

use Bitrix\Main\Page\Asset;

Для подключения css
Asset::getInstance()->addCss("/css/main/mycss.css");
Для подключения скриптов
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js");

 - Использовать минифицированные сироты и стили, таким образом если вы подключили стили /css/main/mycss.css и включили загрузку минифицированных версий, в папке будет производиться поиск файла /css/main/mycss.min.css

<?php

use Bitrix\Main\Page\Asset;

Для подключения css
Asset::getInstance()->addCss("/css/main/mycss.css");//Будет подключен /css/main/mycss.css

 - Оптимизация изображений занимает одно из топовых позиций в процессе повышения результатов выдачи, как и положительно влияет на скорость загрузки сайта в целом. Стандартно выйти из ситуации может помочь установка стороннего модуля оптимизации изображений который будет работать с приложениями вашего сервера (если хостинг провайдер разрешит Вам это делать) либо использовать для сжатия изображений сторонние сервисы, для установки таких приложений достаточно зайти в маркетплейс Битрикс и выбрать подходящий Вам вариант. Есть также решения для сжатия изображений на лету, но тут слишком индивидуально и при необходимости мы можем помочь Вам в этом, достаточно обратиться к нам через форму обратной связи.

Мы в своей работе для оптимизации png используем pngquant, для jpg ImageMagick

 - Еще одним лайфкхаком для ускорения загрузки может стать исключение служебных Битрикс скриптов и стилей из конечной страницы, однако это не всегда оправдано поскольку Вы лишаетесь доступа к BX js api и некоторым другим моментам, код приведенный ниже является лишь небольшим примером как использовать данный способ, и не гарантирует правильную работу на Вашем сайте:

<?php
//file /local/php_interface/init.php
// Подключение обработчиков событий
if (file_exists($_SERVER["DOCUMENT_ROOT"]."/local/php_interface/include/handlers.php")) {
    require_once($_SERVER["DOCUMENT_ROOT"] . "/local/php_interface/include/handlers.php");
}

// Подключение глобальных функций (чаще всего используется для переноса кода сторонних разработчиков
// при получении проекта на доработку)
if (file_exists($_SERVER["DOCUMENT_ROOT"]."/local/php_interface/include/functions.php")) {
    require_once($_SERVER["DOCUMENT_ROOT"] . "/local/php_interface/include/functions.php");
}

<?php
//file /local/php_interface/include/functions.php
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
// удяляем скрипты ядра при отдаче сайта пользователям
function deleteKernelJs(&$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(
        //паттерны для извлечения js
    );

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

// удяляем css ядра при отдаче сайта пользователям
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(
        //паттерны для извлечения css
    );

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

//Сжатие HTML
function ChangeMyContent(&$content)
{
	if(trim($input) === "") return $input;
	    // Remove extra white-space(s) between HTML attribute(s)
	    $input = preg_replace_callback('#<([^\/\s<>!]+)(?:\s+([^<>]*?)\s*|\s*)(\/?)>#s', function($matches) {
	        return '<' . $matches[1] . preg_replace('#([^\s=]+)(\=([\'"]?)(.*?)\3)?(\s+|$)#s', ' $1$2', $matches[2]) . $matches[3] . '>';
	    }, str_replace("\r", "", $input));
	    // Minify inline CSS declaration(s)
	    if(strpos($input, ' style=') !== false) {
	        $input = preg_replace_callback('#<([^<]+?)\s+style=([\'"])(.*?)\2(?=[\/\s>])#s', function($matches) {
	            return '<' . $matches[1] . ' style=' . $matches[2] . minify_css($matches[3]) . $matches[2];
	        }, $input);
	    }
	    if(strpos($input, '') !== false) {
	      $input = preg_replace_callback('#(.*?)#is', function($matches) {
	        return ''. minify_css($matches[2]) . '';
	      }, $input);
	    }
	    if(strpos($input, '') !== false) {
	      $input = preg_replace_callback('##is', function($matches) {
	        return '';
	      }, $input);
	    }
	$content = preg_replace(
	        array(
	            // t = text
	            // o = tag open
	            // c = tag close
	            // Keep important white-space(s) after self-closing HTML tag(s)
	            '#<(img|input)(>| .*?>)#s',
	            // Remove a line break and two or more white-space(s) between tag(s)
	            '#()|(>)(?:\n*|\s{2,})(<)|^\s*|\s*$#s',
	            '#()|(?)\s+(<\/.*?>)|(<[^\/]*?>)\s+(?!\<)#s', // t+c || o+t
	            '#()|(<[^\/]*?>)\s+(<[^\/]*?>)|(<\/.*?>)\s+(<\/.*?>)#s', // o+o || c+c
	            '#()|(<\/.*?>)\s+(\s)(?!\<)|(?)\s+(\s)(<[^\/]*?\/?>)|(<[^\/]*?\/?>)\s+(\s)(?!\<)#s', // c+t || t+o || o+t -- separated by long white-space(s)
	            '#()|(<[^\/]*?>)\s+(<\/.*?>)#s', // empty tag
	            '#<(img|input)(>| .*?>)<\/\1>#s', // reset previous fix
	            '#( ) (?![<\s])#', // clean up ...
	            '#(?<=\>)( )(?=\<)#', // --ibid
	            // Remove HTML comment(s) except IE comment(s)
	            '#\s*\s*|(?)\n+(?=\<[^!])#s'
	        ),
	        array(
	            '<$1$2',
	            '$1$2$3',
	            '$1$2$3',
	            '$1$2$3$4$5',
	            '$1$2$3$4$5$6$7',
	            '$1$2$3',
	            '<$1$2',
	            '$1 ',
	            '$1',
	            ""
	        ),
	    $input);
}

<?php
//file /local/php_interface/include/handlers.php
addEventHandler("main", "OnEndBufferContent", "deleteKernelJs");

// удяляем css ядра при отдаче сайта пользователям
$eventManager->addEventHandler("main", "OnEndBufferContent", "deleteKernelCss");

// удяляем css ядра при отдаче сайта пользователям
$eventManager->addEventHandler("main", "OnEndBufferContent", "ChangeMyContent");

- Таким образом мы удаляем лишние js,css скрипты при загрузке страницы и чистим html.

- И последним пунктом будет использование CDN и оптимизации ресурсов с помощью CDN, использование данной возможности оправдано как мы заметили только в России, потому как основная часть серверов используемых для кеширования и оптимизации контента расположены на территории этой страны, и порой использование CDN лишь затормаживает работу в целом. В рамках данной статьи мы не рассматриваем кеширование, технологию композитного сайта Битрикс но Вы не должны забывать, что этим можно и нужно пользоваться.