Оптимизация шрифтов для 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% или вернём деньги.