Оптимізація шрифтів для 1С-Бітрікс

Оптимізація шрифтів для 1С-Бітрікс

Шрифти — один із найбільш недооцінених джерел затримки при завантаженні сторінок. На типовому Бітрікс-проєкті зустрічається ситуація: сайт підключає 4–6 накреслень Google Fonts через @import прямо в CSS, кожен @import блокує рендер, браузер чекає CSSOM, а користувач бачить порожню сторінку або «мерехтіння невидимого тексту» (FOIT). У Lighthouse це фіксується як «Ensure text remains visible during webfont load» і напряму б'є по метриці LCP.

Як Бітрікс підключає шрифти за замовчуванням

У більшості тем шрифти підключаються одним із трьох способів:

1. @import url('https://fonts.googleapis.com/...') всередині template_styles.css — найповільніший варіант: браузер виявляє запит лише після завантаження CSS.
2. <link> у header.php шаблону без атрибутів preconnect і preload.
3. Пряме підключення .woff/.woff2 через CDN без кешуючих заголовків.

Бітрікс не керує шрифтами через ядро — все живе в шаблоні, тому змінювати потрібно саме там, а не через налаштування модуля main.

Ключові техніки оптимізації

Self-hosted шрифти замість Google Fonts

Завантаження шрифтів з зовнішнього CDN додає DNS-lookup + TCP handshake + TLS negotiation — сумарно від 100 до 300 мс на холодному з'єднанні. Переносимо шрифти на власний сервер:

# Завантажуємо через google-webfonts-helper або npx
npx google-webfonts-helper --family="Roboto" --subsets="latin,cyrillic" --variants="400,700"

Файли кладемо в /local/templates/[template]/fonts/, CSS — у fonts.css:

@font-face {
    font-family: 'Roboto';
    src: url('/local/templates/main/fonts/roboto-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491; /* лише кирилиця */
}

font-display: swap — обов'язково. Без нього браузер блокує відрисовку тексту до завантаження шрифту.

Preload для критичних накреслень

У header.php шаблону додаємо preload для накреслення, що використовується на першому екрані:

// header.php
$APPLICATION->AddHeadString(
    '<link rel="preload" href="/local/templates/main/fonts/roboto-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">'
);

Preload працює для одного-двох накреслень. Preload усіх варіантів — контрпродуктивний: браузер завантажує їх з високим пріоритетом, конкуруючи з HTML і критичним CSS.

Subsetting: видаляємо зайві гліфи

Повний Roboto важить 150–200 КБ на накреслення. Для україномовного сайту потрібні лише latin + cyrillic. За допомогою pyftsubset (fonttools):

pyftsubset roboto-regular.ttf \
    --unicodes="U+0020-007E,U+0400-045F,U+0490-0491,U+00A0" \
    --flavor=woff2 \
    --output-file=roboto-400-subset.woff2

Результат — файл 20–35 КБ замість вихідних 150+ КБ.

Variable fonts

Якщо дизайн використовує кілька накреслень однієї гарнітури (Regular, Medium, Bold), розгляньте variable font — один файл замінює кілька:

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-VF.woff2') format('woff2 supports variations'),
         url('/fonts/Roboto-VF.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

Variable font Roboto важить ~75 КБ і покриває всі ваги — проти 4×30 КБ = 120 КБ для окремих файлів із subsets.

Кейс: інтернет-магазин будівельних матеріалів

Магазин на Бітрікс «Бізнес» підключав 3 сімейства через Google Fonts: Roboto (3 накреслення), Open Sans (2), Oswald (1). Разом 6 HTTP-запитів до fonts.googleapis.com + 6 запитів до fonts.gstatic.com. render-blocking затримка становила 480–620 мс, LCP на мобільних — 4,8 с.

Після перенесення на self-hosted із subsetting і одним preload для Roboto 400:

• LCP знизився до 2,1 с
• Сумарна вага шрифтів: з 820 КБ до 94 КБ
• Render-blocking шрифтів: 0 мс (завдяки font-display: swap + preload)

Роботи зайняли 2 дні: аналіз поточного підключення, підготовка subset-файлів, правка header.php і fonts.css, тестування в Lighthouse та WebPageTest.

Діагностика проблем

Швидка перевірка через DevTools: вкладка Network → Font. Якщо в стовпці Initiator написано stylesheet (а не preload), шрифт завантажується реактивно, а не проактивно. Метрика FCP у Lighthouse нижче 1,8 с за наявності render-blocking шрифтів — практично недосяжна без описаних оптимізацій.

Терміни