Шрифты, необходимые для стилизации вашего текста, являются внешними ресурсами, которые браузер должен загрузить и обработать. Если этот процесс настроен неправильно, он может привести к замедлению отображения содержимого и негативно повлиять на метрики Core Web Vitals. Цель оптимизации — сделать так, чтобы текст был видим как можно быстрее, даже если он временно отображается запасным шрифтом.
1. Устранение блокировки рендеринга с помощью font-display
Проблема загрузки шрифтов заключается в том, что по умолчанию браузеры используют таймаут. Если шрифт не загружается быстро, они либо скрывают текст (FOIT — Flash of Invisible Text), либо отображают его запасным шрифтом (FOUT — Flash of Unstyled Text).
Свойство CSS font-display в @font-face позволяет явно указать браузеру, как себя вести во время загрузки. Для достижения 100 баллов в PageSpeed Insights критически важно использовать значение swap.
Критические значения font-display:
| Значение | Поведение | Применимость |
|---|---|---|
swap | Мгновенно отображает текст с запасным шрифтом. Как только пользовательский шрифт загружен, он заменяет запасной. | Рекомендуется для LCP. Обеспечивает немедленную читаемость и устраняет FOIT. |
block | Скрывает текст на короткий период (блокирующий период), затем отображает запасной шрифт. После загрузки происходит замена. | Используется редко, если брендовый шрифт критически важен. Приводит к FOIT. |
fallback | Скрывает текст очень короткое время, а затем отображает запасной шрифт. Таймаут замены очень короткий. | Подходит для второстепенных шрифтов. |
optional | Браузер сам решает, загружать ли шрифт, исходя из скорости соединения. Если быстро — загружает и использует, если медленно — оставляет запасной шрифт навсегда. | Для некритичных элементов. |
Пример использования swap:
@font-face {
font-family: 'MyBrandFont';
src: url('/fonts/MyBrandFont.woff2') format('woff2');
/* КЛЮЧЕВОЙ МОМЕНТ */
font-display: swap;
}
Использование font-display: swap гарантирует, что текст не будет невидимым, тем самым предотвращая блокировку рендеринга и резко улучшая LCP.
2. Техники приоритизации: Preload и Preconnect
Для ускорения начала загрузки шрифтов используются директивы preload и preconnect, которые должны быть прописаны в <head> документа.
2.1. Предварительное соединение (preconnect)
Если вы загружаете шрифты со стороннего источника (например, Google Fonts CDN), браузер тратит время на установление соединения (DNS lookup, TCP handshake, TLS negotiation). preconnect инициирует этот процесс заранее.
<!-- Ускоряет соединение с доменом Google Fonts -->
<link rel="preconnect" href="[https://fonts.gstatic.com](https://fonts.gstatic.com)" crossorigin>
Важно: Всегда используйте атрибут crossorigin, так как шрифты часто запрашиваются анонимно.
2.2. Предварительная загрузка (preload)
preload сообщает браузеру, что конкретный файл критически необходим для текущей страницы и должен быть загружен как можно раньше в процессе рендеринга, до того, как он будет найден в CSS.
<!-- Загружает критический шрифт MyBrandFont.woff2 до того, как его запросит CSS -->
<link rel="preload"
as="font"
href="/fonts/MyBrandFont.woff2"
type="font/woff2"
crossorigin>
Осторожность: Используйте preload только для самых важных шрифтов (например, для одного начертания, используемого на первом экране). Чрезмерное использование preload может привести к конфликту ресурсов и замедлить загрузку других критически важных файлов CSS или JS.
3. Выбор формата и минимизация размера
Размер файла шрифта напрямую влияет на скорость загрузки. Для ускорения необходимо использовать максимально эффективные форматы и минимизировать объем данных.
3.1. Формат WOFF2 (Web Open Font Format 2)
WOFF2 обеспечивает примерно на 30% лучшее сжатие по сравнению со своим предшественником WOFF. Он поддерживается всеми современными браузерами и должен быть вашим приоритетным форматом.
Правило: Всегда предоставляйте WOFF2 первыми в списке src для максимально быстрого скачивания.
@font-face {
font-family: 'OptimizedFont';
src: url('OptimizedFont.woff2') format('woff2'), /* Главный приоритет */
url('OptimizedFont.woff') format('woff'); /* Резерв для старых браузеров */
}
3.2. Сабсеттинг (Subsetting)
Сабсеттинг — это удаление из файла шрифта тех символов, которые вам не нужны. Это особенно актуально для:
- Кириллических шрифтов: Полный файл может содержать символы для десятков языков. Если вам нужен только русский алфавит, удалите все остальные (например, греческий, латинский расширенный и т. д.).
- Шрифтов иконок: Удалите иконки, которые вы не используете.
Результат: Файл шрифта может уменьшиться в размере в два и более раза, что критически важно для мобильных пользователей.
4. Определение запасных шрифтов и диапазона символов
Создание продуманной цепочки запасных (системных) шрифтов и использование Unicode Range помогает браузеру работать максимально эффективно.
4.1. Цепочка запасных шрифтов
Браузеры будут отображать текст моментально, используя первый системный шрифт из вашего списка, пока пользовательский шрифт загружается.
body {
/* Резервная цепочка: Arial, Helvetica, системный sans-serif */
font-family: 'MyBrandFont', Arial, Helvetica, sans-serif;
}
4.2. Использование unicode-range
Если ваш текст использует разные скрипты (например, латиница и кириллица), храните их в отдельных файлах и используйте дескриптор unicode-range. Это указывает браузеру, какой файл шрифта нужен только для определенных символов.
/* Загрузит кириллический файл только если в тексте есть кириллические символы */
@font-face {
font-family: 'MyFont';
src: url('MyFont-cyrillic.woff2') format('woff2');
unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
font-display: swap;
}
/* Загрузит латинский файл для латинских символов */
@font-face {
font-family: 'MyFont';
src: url('MyFont-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
Благодаря этому, если на странице нет текста на кириллице, соответствующий файл шрифта не будет загружен, что экономит трафик.
5. Самостоятельный хостинг Google Fonts (Self-Hosting)
Многие разработчики предпочитают размещать файлы шрифтов Google Fonts на своем сервере, а не использовать CDN Google.
Преимущества Self-Hosting:
- Устранение
preconnect: Не нужно устанавливать соединение со сторонним доменом, что устраняет задержку. - Контроль: Полный контроль над кешированием и заголовками HTTP.
- Соответствие CDN: Шрифты будут загружаться через ваш основной CDN, который уже максимально оптимизирован.
Для самостоятельного хостинга вы можете использовать инструменты, которые автоматически скачивают и генерируют оптимизированные файлы WOFF2 и CSS с использованием font-display: swap.
Резюме по оптимизации
- Всегда используйте
font-display: swapв@font-face. - Используйте
preloadиpreconnectдля критических шрифтов (особенно для шрифтов, влияющих на LCP). - Переведите все шрифты в формат WOFF2.
- Используйте сабсеттинг и
unicode-rangeдля минимизации размера файлов. - Рассмотрите самостоятельный хостинг (self-hosting).
