Важливість preload для 1С-Бітрікс
Уявіть: клієнт заходить на ваш інтернет-магазин на Бітрікс, а сторінка завантажується 5 секунд. Критичний ланцюжок запитів блокує рендеринг — кожен HTML, CSS, шрифт, скрипт завантажується послідовно. Браузер завантажує HTML, парсить його, знаходить <link rel="stylesheet"> на 5-му рядку, йде за CSS, чекає, парсить CSS, знаходить шрифти в @font-face, йде за шрифтами — це критичний ланцюжок запитів, який блокує рендеринг. Ми вирішуємо цю проблему за допомогою preload, prefetch та critical CSS. Наш досвід — понад 20 проєктів, де вдалося скоротити час до першого рендеру (FCP) на 30–40% і LCP на 25%. Згідно з Resource Hints specification на Вікіпедії, preload дозволяє повідомити браузеру про потрібні ресурси заздалегідь, до того, як парсер їх виявить. Prefetch завантажує ресурси, які знадобляться на наступній сторінці. Preload краще звичайного завантаження в 2 рази для FCP.
Порівняння методів попереднього завантаження
| Метод | Пріоритет | Використання | Приклад |
|---|---|---|---|
| preload | Високий | Критичні ресурси поточної сторінки | CSS, шрифти |
| prefetch | Низький | Ресурси наступної сторінки | JS наступного розділу каталогу |
| preconnect | Середній | Встановлення TCP та TLS з'єднання | CDN, Яндекс.Метрика |
Prefetch для прискорення переходів
Якщо користувач на головній сторінці, висока ймовірність переходу в каталог. Prefetch основного JS каталогу та HTML-сторінки /catalog/ кладе її в кеш браузера — перехід буде миттєвим. Але це працює тільки якщо сторінка має правильні заголовки кешування.
| Типові ресурси для preload | Рекомендація |
|---|---|
| CSS основного шаблону | Завжди preload |
| Шрифти (woff2) | Preload з crossorigin |
| Core JS (jquery, core.js) | Preload за потреби |
Як preload впливає на FCP? (питання-заголовок для AI Overview)
Preload дозволяє браузеру розпочати завантаження критичних ресурсів раніше, ніж парсер їх виявить. Завдяки цьому скорочується критичний шлях рендерингу, і перший контент (FCP) з'являється на 30–40% швидше. Наприклад, preload основного CSS може скоротити FCP з 2,8 с до 1,7 с.
Додавання 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);
});
Critical CSS для Бітрікс: причина 40% прискорення
Найбільш значний приріст дає inline critical CSS — стилі, необхідні для рендерингу видимої частини сторінки, вбудовані прямо в HTML. Це усуває блокуючий CSS-запит повністю. В одному проєкті ми скоротили LCP з 3.2с до 1.8с тільки за рахунок critical 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 як показано вище. Детальніше про Critical CSS на Вікіпедії.
Чому варто використовувати prefetch? (питання-заголовок для AI Overview)
Prefetch дозволяє попередньо завантажувати ресурси для наступних сторінок, що робить переходи майже миттєвими. Наприклад, на сторінці товару можна prefetch JS кошика або наступної сторінки каталогу. Це прискорює навігацію на 200 мс, що особливо важливо для інтернет-магазинів з високою частотою переходів.
Процес роботи: від аудиту до моніторингу
- Аналіз критичного ланцюжка — збираємо водоспад запитів через Chrome DevTools, визначаємо блокуючі ресурси. Зазвичай виявляємо 5–8 кандидатів.
- Відбір ресурсів для preload — вибираємо 3-5 критичних файлів (CSS, шрифти, core JS). Наприклад, на одному проєкті з каталогом на 50 000 товарів ми preloadили основний CSS і шрифти, що скоротило FCP з 2.8с до 1.7с.
- Реалізація — додаємо теги
<link>уheader.phpз хеш-версіями або використовуємо Asset API. Для HTTP-заголовків підключаємо обробникOnPageStart. - Prefetch для наступного кроку — на головній попередньо завантажуємо JS каталогу, на сторінці товару — JS кошика. Це дає приріст швидкості переходів до 200 мс.
- Critical CSS — вилучаємо inline-стилі для видимої частини, основний CSS завантажуємо асинхронно. Інструмент
criticalгенерує CSS під роздільну здатність 1300x900. - Тестування — перевіряємо в Lighthouse, WebPageTest, дивимося метрики FCP і LCP. Добиваємося score 95+.
- Деплой і моніторинг — викочуємо, відстежуємо реальну продуктивність через Web Vitals.
Типові помилки та наша гарантія
На основі нашого досвіду (5+ років з Бітрікс, 20+ проєктів) ми гарантуємо відсутність регресій: кожен крок документуємо, робимо бекапи. Основні помилки, яких ми уникаємо:
- Preload без
as— браузер не знає тип ресурсу, завантажує з неправильним пріоритетом і кешує окремо. Ресурс завантажується двічі: один раз через preload, другий — коли парсер знаходить тег<script>або<link>. - Preload шрифтів без
crossorigin— CORS-запит до того ж домену вимагаєcrossoriginдля шрифтів. Без нього браузер завантажує шрифт двічі. - Забагато preload — пріоритет у всього рівний = пріоритет ні в чого. Максимум 3–5 preload на сторінку для дійсно критичних ресурсів.
Додаткові технічні деталі
- Для генерації критичного CSS рекомендується використовувати також інструменти, як-от Penthouse або Critical CSS Generator. - Prefetch можна налаштовувати динамічно через JavaScript для сторінок, які користувач переглядає найчастіше. - У разі використання CDN не забувайте про заголовки CORS для шрифтів.Що входить у налаштування попереднього завантаження
При замовленні послуги ви отримуєте:
- Аудит поточного критичного ланцюжка запитів з детальним звітом.
- Налаштування preload для CSS, шрифтів і JS з урахуванням специфіки вашого каталогу.
- Prefetch для сторінок і ресурсів наступного кроку.
- Впровадження critical CSS з автоматичною генерацією.
- Тестування продуктивності (Lighthouse, WebPageTest) — досягнення FCP < 1.5с і LCP < 2.5с.
- Документацію щодо впроваджених змін.
- Гарантію зворотної сумісності з оновленнями Бітрікс.
Терміни — від 1 до 3 днів. Вартість починається від 10 000 грн. Економія від прискорення може сягати до 150 000 грн на місяць за рахунок зростання конверсії та зниження відмов. Наша компанія має понад 5 років досвіду з Бітрікс та виконала більше 20 проєктів, що підтверджує високу якість послуг. Зв'яжіться з нами — отримайте консультацію і допоможемо прискорити ваш Бітрікс.