Шрифты часто представляют собой большие файлы с медленной загрузкой. Некоторые браузеры скрывают текст до тех пор, пока шрифт не загрузится, вызывая вспышку невидимого текста (FOIT) .
Почему аудит отображения шрифтов Lighthouse терпит неудачу
Lighthouse помечает любые URL-адреса шрифтов, которые могут отображать невидимый текст:
![Скриншот Lighthouse. Убедитесь, что текст остается видимым во время аудита загрузки веб-шрифтов.](https://developer.chrome.com/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=5&hl=ru)
Как избежать отображения невидимого текста
API font-display
указывает, как отображается шрифт при использовании внутри стиля font-face
. Следующие значения font-display
сообщат браузеру использовать системный шрифт, если пользовательский шрифт не готов:
-
swap
-
optional
-
fallback
Пример CSS
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Пример Google-шрифтов
Добавьте параметр &display=swap
/ &display=optional
/ &display=fallback
в конец URL-адреса Google Fonts:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Как избежать сдвигов макета, вызванных отложенными шрифтами
Временное отображение системного шрифта заменит FOIT миганием нестилизованного текста (FOUT). Это улучшает FCP и LCP за счет более быстрого рендеринга контента, но FOIT и FOUT будут иметь одинаковое влияние на CLS, когда пользовательский шрифт заменяет временный системный шрифт.
Влияние CLS на загрузку шрифтов можно смягчить, используя предварительную загрузку в сочетании с font-display: optional
. Однако чрезмерное использование предварительных загрузок может негативно повлиять на показатели нагрузки. Мы рекомендуем провести A/B-тестирование, чтобы убедиться, что предварительная загрузка шрифтов не приводит к снижению производительности.
Рекомендации для конкретного стека
Друпал
Укажите @font-display
при определении пользовательских шрифтов в вашей теме.
Магенто
Укажите @font-display
при определении пользовательских шрифтов .
Ресурсы
- Исходный код для обеспечения того, чтобы текст оставался видимым во время аудита загрузки веб-шрифтов.
- Избегайте невидимого текста во время загрузки
- Управление производительностью шрифтов с помощью отображений шрифтов
- Предварительная загрузка веб-шрифтов для повышения скорости загрузки (codelab)
- Предотвратите смещение макета и вспышку невидимого текста (FOIT), предварительно загрузив дополнительные шрифты.