Оптимізація шрифтів для 1С-Бітрікс: прискорення завантаження та LCP

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

Ми постійно стикаємося з проєктами, де шрифти Google Fonts, підключені через @import, стають головним гальмом завантаження. Один наш клієнт — інтернет-магазин на редакції «Бізнес» — мав LCP 4,8 с на мобільних, і 70% цього часу припадало на шрифти. Після аудиту ми перенесли шрифти на сервер, застосували subsetting та preload — LCP впав до 2,1 с. Такі результати можливі лише при системному підході.

Чому Google Fonts сповільнює ваш сайт?

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

Завантаження шрифтів із зовнішнього CDN додає DNS-lookup, TCP handshake та TLS negotiation — сумарно від 100 до 300 мс на холодному з'єднанні. Плюс кожен файл шрифту може важити 150–200 КБ. Без оптимізації render-blocking затримка легко досягає 500 мс і більше.

Як правильно підключити шрифти в Бітрікс?

Self-hosted шрифти

Перенесення шрифтів на свій сервер усуває залежність від зовнішнього CDN. Завантажуємо файли через google-webfonts-helper і розміщуємо в /local/templates/[template]/fonts/. CSS-правила з font-display: swap гарантують, що текст не буде прихований під час завантаження:

@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; /* лише кирилиця */ } 

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

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

$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

Якщо дизайн використовує кілька накреслень однієї гарнітури, розгляньте variable font — один файл замінює кілька. Наприклад, Roboto VF важить ~75 КБ і покриває всі ваги, тоді як окремі subset-файли чотирьох накреслень важать ~120 КБ. Підключення:

@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; } 

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

Магазин на Бітрікс «Бізнес» підключав 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 шрифтів — практично недосяжна без описаних оптимізацій. Докладніше про метрики читайте на Wikipedia.

Порівняння методів підключення шрифтів:

Що входить в роботу

Наш пакет оптимізації шрифтів для Бітрікс включає:

• Аудит поточних підключень шрифтів (скрипти, стилі, заголовки)
• Перенесення шрифтів на self-hosted з підтримкою subsetting
• Налаштування preload для критичних накреслень
• Конфігурація кешуючих заголовків (Cache-Control, ETag)
• Застосування font-display: swap для всіх @font-face
• Тестування LCP, FCP та загальної ваги сторінки
• Надання звіту з рекомендаціями

Терміни

Як замовити оптимізацію?

Зв'яжіться з нами для безкоштовного аудиту поточного стану шрифтів. Оцінимо проєкт за 1 день і запропонуємо конкретний план робіт. Замовте консультацію — ми покажемо, як шрифти впливають на вашу швидкість та конверсію. Гарантуємо зниження LCP мінімум на 40% або повернемо гроші.