Налаштування preload/prefetch ресурсів для 1С-Bitrix
Браузер завантажує HTML, розбирає його, знаходить <link rel="stylesheet"> на 5-й строці, іде за CSS, чекає, розбирає CSS, знаходить шрифти в @font-face, іде за шрифтами — це критична ланцюг запитів, яка блокує рендеринг. preload дозволяє повідомити браузер про потрібні ресурси заздалегідь, до того, як парсер їх знайде. prefetch завантажує ресурси, які знадобляться на наступній сторінці.
Різниця між preload і prefetch
<link rel="preload"> — високий пріоритет, ресурс потрібен на поточній сторінці негайно. Браузер починає завантаження до обробки основного HTML. Якщо ресурс не буде використаний протягом 3 секунд після завантаження — браузер видаст попередження в консолі.
<link rel="prefetch"> — низький пріоритет, ресурс знадобиться на наступній сторінці. Завантажується в фоні, кладеться в кеш. Відмінно працює для завантаження JS наступного розділу каталогу, поки користувач читає поточну сторінку.
<link rel="preconnect"> — встановлює TCP-з'єднання та TLS-handshake до того, як ресурс запитаний. Корисно для зовнішніх доменів: CDN, Google Fonts, Yandex.Metrica.
Додавання preload у шаблон Bitrix
Шаблон сайту в Bitrix — /bitrix/templates/[template_name]/header.php. Додайте в <head> перед основними тегами:
<?php
// Отримуємо хеш-версію файлу для cache busting
$cssVersion = filemtime($_SERVER['DOCUMENT_ROOT'] . '/bitrix/templates/.default/styles.css');
$jsVersion = filemtime($_SERVER['DOCUMENT_ROOT'] . '/bitrix/js/main/core/core.js');
?>
<head>
<meta charset="utf-8">
<!-- Preload критичного CSS (рендеринг блокується без нього) -->
<link rel="preload" href="/bitrix/templates/.default/styles.css?v=<?=$cssVersion?>"
as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="/bitrix/templates/.default/styles.css?v=<?=$cssVersion?>">
</noscript>
<!-- Preload шрифту (as="font" обов'язковий, інакше пріоритет неправильний) -->
<link rel="preload" href="/bitrix/templates/.default/fonts/roboto.woff2"
as="font" type="font/woff2" crossorigin>
<!-- Preconnect до зовнішніх ресурсів -->
<link rel="preconnect" href="https://mc.yandex.ru">
<link rel="preconnect" href="https://www.googletagmanager.com">
<!-- DNS-prefetch як fallback для старих браузерів -->
<link rel="dns-prefetch" href="//mc.yandex.ru">
</head>
Програмний preload через API Bitrix
Bitrix надає методи для управління заголовками Link через клас \Bitrix\Main\Page\Asset:
// У компоненті або шаблоні
$asset = \Bitrix\Main\Page\Asset::getInstance();
// Preload JS-файлу
$asset->addJs('/bitrix/js/ui/ui.js', [
'rel' => 'preload',
'as' => 'script'
]);
// Preload CSS
$asset->addCss('/bitrix/templates/.default/critical.css', [
'rel' => 'preload'
]);
Через HTTP-заголовок з обробника OnPageStart:
AddEventHandler('main', 'OnPageStart', function() {
header('Link: </bitrix/templates/.default/styles.css>; rel=preload; as=style', false);
header('Link: </bitrix/templates/.default/fonts/roboto.woff2>; rel=preload; as=font; crossorigin', false);
});
Prefetch для каталогу
Якщо користувач на головній сторінці, висока ймовірність переходу в каталог. Prefetch основного JS каталогу:
<?php
// У footer.php головної сторінки
if (defined('IS_INDEX_PAGE') && IS_INDEX_PAGE):
?>
<link rel="prefetch" href="/bitrix/js/catalog/catalog.js">
<link rel="prefetch" href="/catalog/">
<?php endif; ?>
Prefetch HTML-сторінки (/catalog/) кладе її в кеш браузера — перехід буде миттєвим. Але це працює лише якщо сторінка має правильні заголовки кешування.
Critical CSS для Bitrix
Найбільший прибуток дає inline critical CSS — стилі, необхідні для рендеринга видимої частини сторінки, вбудовані прямо в HTML. Це усуває блокуючий CSS-запит повністю.
Інструмент для виділення critical CSS:
npm install -g critical
critical --base /var/www/bitrix/public_html \
--src index.html \
--css bitrix/templates/.default/styles.css \
--width 1300 --height 900 \
--inline --extract
Вставте отриманий critical CSS у шаблон Bitrix у тег <style> в <head>, основний CSS завантажуйте асинхронно через preload з onload як показано вище.
Типові помилки
Preload без as — браузер не знає тип ресурсу, завантажує з неправильним пріоритетом і кешує окремо. Ресурс завантажується двічі: один раз через preload, другий — коли парсер знаходить тег <script> або <link>.
Preload шрифтів без crossorigin — CORS-запит до того ж домену вимагає crossorigin для шрифтів. Без нього браузер завантажує шрифт двічі.
Занадто багато preload — пріоритет у всіх = пріоритет ні у кого. Максимум 3–5 preload на сторінку для дійсно критичних ресурсів.