Главная Статьи Оптимизация

Веб-шрифты и скорость

Красивый фирменный шрифт — это здорово, но за него платят скоростью. Шрифт — это файл, который надо скачать, и пока он грузится, текст либо не виден, либо мигает, подменяясь на лету. На медленном интернете это особенно заметно. Хорошая новость: шрифт можно подключить так, чтобы он почти не вредил. Разберём как.

В чём проблема

Когда страница использует нестандартный шрифт, браузеру нужно скачать его файл. Пока файл не пришёл, возможны два неприятных сценария: либо текст вообще не показывается (пустое место там, где должны быть слова — «мерцание невидимого текста»), либо сначала рисуется системным шрифтом, а потом резко перерисовывается вашим — и страница дёргается. Оба варианта раздражают и портят впечатление, а второй ещё и ухудшает показатель сдвигов CLS.

Главное — font-display: swap

Самое важное правило одной строкой. Свойство font-display: swap говорит браузеру: «не прячь текст — покажи его сразу системным шрифтом, а когда мой загрузится, подмени». В результате человек начинает читать мгновенно, а фирменный шрифт подхватывается чуть позже, без пустого экрана.

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap;
}

Что ещё ускоряет шрифты

📦 Формат woff2
Современный сжатый формат шрифтов — заметно легче старых ttf/otf. Используйте woff2, его понимают все актуальные браузеры.
🔤 Только нужные символы
Подмножество (subset) — оставить в файле лишь кириллицу и латиницу, выбросив иероглифы и редкие знаки. Файл худеет в разы.
⚖️ Меньше начертаний
Каждое начертание (тонкое, обычное, жирное, курсив) — отдельный файл. Подключайте только те, что реально используете.
⚡ Preload ключевого
Основной шрифт можно предзагрузить, чтобы он пришёл раньше и текст не мерцал.

Свой сервер или внешний

Шрифты можно подключать с внешнего сервиса или хранить у себя. Сегодня чаще советуют хранить у себя (self-host): это убирает лишнее соединение со сторонним доменом, даёт полный контроль над кэшированием и не зависит от доступности чужого сервиса. Если всё же используете внешний источник — добавьте к его домену preconnect, чтобы сэкономить время на соединение.

💡 Самый быстрый шрифт — тот, который не нужно грузить. Системные шрифты (те, что уже стоят на устройстве) подключаются мгновенно и выглядят аккуратно. Если фирменный шрифт не принципиален, системный набор — отличный вариант без единого килобайта загрузки.
⚡
Шрифты — часть общей скорости вместе с критическим CSS, ленивой загрузкой картинок и сжатием. Как это отражается на метриках — Core Web Vitals.

Коротко

Веб-шрифты тормозят показ текста: пока файл грузится, текст либо не виден, либо мерцает при подмене. Главное лекарство — font-display: swap: текст показывается сразу системным шрифтом, а фирменный подхватывается позже. Дополнительно используйте формат woff2, подмножество только нужных символов, минимум начертаний и preload ключевого шрифта. Шрифты лучше хранить у себя. А если фирменный шрифт не критичен — системные шрифты грузятся мгновенно и выглядят достойно.

Частые вопросы

Почему веб-шрифты замедляют сайт?
Нестандартный шрифт — это файл, который браузеру нужно скачать. Пока он грузится, текст либо не показывается (пустое место вместо слов), либо сначала рисуется системным шрифтом, а потом резко перерисовывается вашим, из-за чего страница дёргается. Оба варианта раздражают, а второй ещё и ухудшает показатель сдвигов CLS.
Что такое font-display: swap?
Это свойство CSS, которое говорит браузеру не прятать текст во время загрузки шрифта: показать его сразу системным шрифтом, а когда фирменный загрузится — подменить. В результате человек начинает читать мгновенно, без пустого экрана, а кастомный шрифт подхватывается чуть позже. Это главный приём для скорости шрифтов.
Какой формат шрифтов использовать?
woff2 — современный сжатый формат, заметно легче старых ttf и otf, и его понимают все актуальные браузеры. Дополнительно стоит оставить в файле только нужные символы (подмножество — кириллицу и латиницу), подключать лишь используемые начертания и предзагружать основной шрифт через preload.
Хранить шрифты у себя или подключать внешние?
Сегодня чаще советуют хранить шрифты у себя (self-host): это убирает лишнее соединение со сторонним доменом, даёт контроль над кэшированием и не зависит от доступности чужого сервиса. Если используете внешний источник, добавьте к его домену preconnect, чтобы сэкономить время на установку соединения.
Можно ли обойтись без веб-шрифтов?
Да, и это самый быстрый вариант. Системные шрифты, которые уже стоят на устройстве пользователя, подключаются мгновенно и выглядят аккуратно — без единого килобайта загрузки. Если фирменный шрифт для вас не принципиален, системный набор шрифтов это отличное решение для скорости.

🛠 Полезные инструменты

Анализ сайтаСинонимайзерПроверка ИКСПодбор ключейЧастотность запросовТошнота текстаПревью сниппетаПроверка индексации

📚 Читайте также