Чек-лист по загрузке шрифтов

Чек-лист по загрузке шрифтов

От автора: когда я вспоминаю последние четыре года, которые я потратил, изучая все, что мог, о веб-шрифтах и о том, как производится загрузка шрифта на сайт, я могу свести все к небольшому контрольному списку советов, которым я следую. Наша цель в качестве веб-разработчиков заключается в том, чтобы максимизировать опыт и повышать ожидания пользователей до уровня того, что может обеспечить сеть, а также управлять бюджетами производительности, чтобы гарантировать, что мы соответствуем одному из основных принципов Интернета — повсеместная доступность. Этот чек-лист должен помочь вам выполнить эти два часто конкурирующих идеала.

Чек-лист по загрузке шрифтов

Начинайте загружать важные шрифты раньше

(Запускайте загрузку веб-шрифта)

Веб-шрифты не загружаются до тех пор, пока они не будут найдены в контенте, поэтому их загрузка часто запаздывает. Нам нужно указать браузеру начать загрузку наших высокоприоритетных веб-шрифтов раньше.

Стратегия: используйте preload

Приоретизируйте читаемый текст

(Поведение пока веб-шрифт загружается)

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Это означает — абсолютно никакого невидимого текста. Это называется вспышкой невидимого текста или FOIT. Мы можем использовать стратегии вспышки нестилизованного текста (FOUT) для приоретизации системных шрифтов во время загрузки веб-шрифтов.

Стратегия: используйте font-display

Стратегия: используйте API загрузки шрифтов CSS

Сделайте шрифты меньше

(Сократите время загрузки веб-шрифта)

Предположите, что: Загрузка меньших файлов заканчивается раньше.

Стратегия: Использовать форматы WOFF2 (встроенное сжатие)

Стратегия: Создайте поднаборы шрифтов, если язык и лицензионные требования позволяют это.

Сократите движения во время загрузки

(Поведение после загрузки веб-шрифта)

Каждый независимый блок @font-face имеет свой собственный жизненный цикл загрузки. Его собственный FOIT, собственный FOUT, его собственную повторную отрисовку и перезагрузку. При использовании двух или более веб-шрифтов для одного семейства важно объединить их вместе, чтобы уменьшить перезагрузку текста на странице.

Стратегия. Используйте CSS Font Loading API.

Стратегия: используйте Переменные шрифтов (поддержка браузерами на Can I Use: Variable Fonts)

Автор: Zach Leatherman

Источник: https://www.zachleat.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree