Настройка preload/prefetch ресурсов для 1С-Битрикс
Браузер загружает 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-хендшейк до того, как ресурс запрошен. Полезно для внешних доменов: CDN, Google Fonts, Яндекс.Метрика.
Добавление preload в шаблон Битрикс
Шаблон сайта в Битрикс — /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 Битрикс
Битрикс предоставляет методы для управления заголовками 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 для Битрикс
Самый значительный прирост даёт 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 вставить в шаблон Битрикс в тег <style> в <head>, основной CSS загружать асинхронно через preload с onload как показано выше.
Типовые ошибки
Preload без as — браузер не знает тип ресурса, загружает с неправильным приоритетом и кеширует отдельно. Ресурс загружается дважды: один раз через preload, второй — когда парсер находит тег <script> или <link>.
Preload шрифтов без crossorigin — CORS-запрос к тому же домену требует crossorigin для шрифтов. Без него браузер загружает шрифт дважды.
Слишком много preload — приоритет у всего равный = приоритет ни у чего. Максимум 3–5 preload на страницу для действительно критических ресурсов.