Использование шрифтов распространено на большинстве веб-страниц и часто содержит ошибки. Многие из этих ошибок негативно влияют на бюджет веб-производительности. Цель этой статьи — предоставить информацию об использовании веб-шрифтов и помочь улучшить вашу производительность в Интернете.
Как показано в иерархии, применяемой при рендеринге любой веб-страницы, элементы шрифта могут задерживать рендеринг других элементов до тех пор, пока они не будут загружены. Правильное управление этой задержкой важно как для совокупного сдвига макета (CLS), так и для восприятия пользователем.
Проблема с загрузкой шрифта
Пока шрифты страницы не загружены, видимость шрифтов в процессе рендеринга HTML и CSS варьируется от браузера к браузеру. Вот краткое описание того, как разные браузеры справляются с этой ситуацией:
| Браузер | Поведение по умолчанию, если шрифт не готов… |
|---|---|
| Edge | Использует системный шрифт, пока шрифт не будет готов. Заменяет шрифт. |
| Chrome | Скроет текст на срок до 3 секунд. Если текст еще не готов, используется системный шрифт, пока шрифт не будет готов. Заменяет шрифт. |
| Firefox | Скроет текст на срок до 3 секунд. Если текст еще не готов, используется системный шрифт, пока шрифт не будет готов. Заменяет шрифт. |
| Сафари | Скрывает текст до тех пор, пока шрифт не будет готов. |
Чтобы решить эту проблему, не полагаясь о поведении браузерабыл введен параметр font-display. В настоящее время 92% браузеров поддерживают параметр font-display.
Что делает Font-Display?
В процессе загрузки страницы внешний вид шрифтов может меняться до полной загрузки в зависимости от браузера. Например, некоторые версии браузера Safari скрывают текст до загрузки шрифта. шрифт-дисплей: поменять местами Параметр CSS стандартизирует это поведение, отображая текст с использованием системного шрифта до тех пор, пока файлы шрифтов не будут загружены. После загрузки шрифтов системный шрифт заменяется на нужный шрифт. Вот пример использования:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Предварительная загрузка шрифтов
С использованием Загрузка шрифтов до критического пути рендеринга может предотвратить возникновение пробелов во время загрузки шрифтов.
БОНУС: отраслевой подход к использованию шрифтов
Согласно данным LikeTech, давайте взглянем на важную тенденцию и картину мира Интернета. На первом графике ниже показано использование шрифтов. на 10,000 100,000 лучших страниц, а второй график показывает использование шрифтов на XNUMX XNUMX лучших сайтах.. Давайте сначала рассмотрим эти графики:
Разница в использовании Google Font и Font Awesome между 5 10,000 и 100,000 XNUMX лучшими сайтами составляет XNUMX %.. Это говорит нам о том, что 10,000 XNUMX лучших сайтов оптимизировали использование шрифтов. Рекомендуем рассмотреть эту тему как заслуживающую внимания. Подумайте, как вы можете реализовать веб-шрифты с помощью собственных решений.
БОНУС 2: Статистика использования Google Font и Font Awesome
Что касается первого бонуса, мы предлагаем изучить два графика, показывающие численный размер наиболее используемых библиотек шрифтов. Количество уникальных доменов здесь превышает миллионы, и эти миллионы представляют ваших SEO-конкурентов. Использование этих библиотек лучше и оптимальнее, чем другие, может помочь вам выделиться.
Следуя этим советам и оптимизируя использование шрифтов, вы сможете значительно улучшить производительность сети и удобство работы с пользователем.
