Все мы знаем, что хорошим тоном является максимально логичное использование 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 '';
}, $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 лишь затормаживает работу в целом. В рамках данной статьи мы не рассматриваем кеширование, технологию композитного сайта Битрикс но Вы не должны забывать, что этим можно и нужно пользоваться.