Статьи

Оптимизация веб-шрифтов для производительности: современное состояние

Ноябрь 10, 2018

Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

67% веб-страниц теперь используют пользовательские шрифты . Однако популярность и широкое распространение не обошлись без проблем с производительностью и пользовательским опытом.

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

Почему пользовательские веб-шрифты?

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

Лучший способ создать красивую типографику — загрузить пользовательские веб-шрифты, то есть файлы шрифтов, которые еще не установлены на устройствах пользователей.

Поскольку поддержка браузером правила CSS @font-face стала широко распространенной, использование пользовательских веб-шрифтов на веб-сайтах значительно возросло. Однако шрифты могут иметь большой размер файла, и загрузка дополнительных ресурсов на ваш веб-сайт не оказывает негативного влияния на производительность.

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

Что такое вспышка невидимого текста (FOIT)?

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

Если все вышеперечисленные пункты выполнены, браузер начинает загрузку шрифта. Это означает, что браузер должен проанализировать не только код CSS, но и текстовое содержимое веб-сайта, прежде чем он сможет запустить загрузку шрифта. Тем не менее, только когда шрифт начинает загружаться, пользователи сети могут испытывать ужасную Flash Of Invisible Text или FOIT для краткости.

FOIT: страница на http://blog.instagram.com/, когда шрифты загружаются в Firefox v.52. Текст невидим.

FOIT: страница на http://blog.instagram.com/, когда шрифты загружаются в Firefox v.52. Текст невидим.

FOIT: Страница на http://blog.instagram.com/ после загрузки шрифтов в Firefox v.52. Текст стал видимым

FOIT: Страница на http://blog.instagram.com/ после загрузки шрифтов в Firefox v.52. Текст стал видимым.

Другими словами, как только браузеры начинают загружать шрифт, весь текст становится невидимым. Таким образом, пользователи смотрят на экран без текста в течение некоторого времени, который в условиях сети ниже среднего может ощущаться вечно. Кроме того, способ, которым разные браузеры обрабатывают FOIT, также различен:

  • Браузеры Blink и Firefox решают проблему FOIT, вводя трехсекундный таймаут: во время загрузки шрифта текст исчезает на срок до трех секунд. Если шрифт не загружен в течение этого периода времени, веб-сайт отображает запасной шрифт, который впоследствии заменяется пользовательским шрифтом после его полной загрузки. Такое поведение вызывает то, что известно как FOUT (еще одно сокращение): Flash Of Unstyled Text .
  • Safari, браузер Android по умолчанию и Blackberry не используют тайм-аут, но не отображают текст, пока не будет загружен пользовательский шрифт. Если что-то идет не так и шрифт не загружается, пользователи остаются с невидимым текстом на экране.
  • Браузеры IE / Edge не скрывают текст, а сразу отображают запасной шрифт, что, по-видимому, является лучшим дизайнерским решением Microsoft.

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

Решение проблем, связанных с загрузкой шрифтов, включает в себя как оптимизацию размера файла, так и контроль над поведением браузера по умолчанию, чтобы устранить FOIT и минимизировать резкое влияние FOUT.

Давайте посмотрим ближе на каждую задачу по одному.

Советы по оптимизации файлов пользовательских шрифтов

Есть несколько шагов, которые вы можете предпринять, чтобы убедиться, что ваши файлы шрифтов не слишком тяжелые.

# 1 Минимизируйте количество гарнитур в вашем проекте

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

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

# 2 Обеспечить форматы веб-шрифтов на основе поддержки браузера

Существует четыре основных формата шрифтов:

  • True Type Font (TTF) , распространенный формат шрифтов, который существует с конца 80-х годов.
  • Web Open Font Format (WOFF) , формат, разработанный в 2009 году, который является Open Type или True Type, только со сжатием и дополнительными метаданными.
  • Web Open Font Format (WOFF2) , лучший сжатый формат, чем WOFF
  • Встроенный открытый тип (EOT) , формат, разработанный Microsoft для использования в Интернете для встроенных шрифтов.

Хотя вы можете указать все из них в объявлении @font-face , вы можете обойтись только двумя из них. Вот как: 

 @font-face { font-family: 'Open Sans'; src: local('Open Sans'), local('OpenSans'), url('fonts/open-sans.woff2') format('woff2'), url('fonts/open-sans.woff') format('woff'); }

Первый формат, который вы предлагаете браузеру, это woff2, который дает вам преимущество дополнительной компрессии. Если ваш браузер не поддерживает woff2, он просто выбирает woff, который имеет хорошее сжатие и поддерживается последними версиями всех основных браузеров . Только Opera Mini не поддерживает его, а также браузеры IE8 и более ранние версии Android Mobile. Если вы используете прогрессивный подход к веб-разработке, вы можете просто позволить этим старым браузерам использовать системный шрифт, например, Arial, Verdana и т. Д.

# 3 Загрузите только те стили, которые вам нужны

Шрифты обычно имеют разные варианты — курсив, полужирный и т. Д. Каждый вариант шрифта увеличивает вес файла, поэтому старайтесь избегать добавления варианта шрифта в свой код @font-face если вы не собираетесь использовать его на своем веб-сайте. Имейте в виду, что если вы используете <i> для добавления значка, что является довольно распространенным, этого достаточно, чтобы браузер загрузил вариант шрифта курсивом ( слайд 77 в выступлении Зака ​​Кожаного о Санта-Клара о скорости 2015 года ). Если это единственный экземпляр <i> на вашей странице, использование <span> для значка или установка вместо этого font-style для элемента <i> как normal избавит браузер от необходимости загружать ненужные ресурсы.

# 4 Держите свои наборы символов вниз

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

Вы можете узнать все о поднаборах шрифтов в Slash Page Times с помощью CSS Font Subsetting от Dudley Storey.

Решая ФОИТ

Давайте рассмотрим некоторые альтернативы, доступные сегодня для работы с FOIT. Я выделил самые простые подходы для реализации среди эффективных и рекомендуемых практик. Тем не менее, вы можете узнать о гораздо более сложных из них в всеобъемлющем руководстве Zach Leatherman по стратегии загрузки шрифтов .

Не используйте пользовательские шрифты

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

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

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

Выбор этого подхода не требует использования @font-face . Вы просто добавляете свой стек font-family свойство CSS font-family . Вот как вы могли бы сделать это сегодня: 

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }

Новый системный стек шрифтов? ‘, Aderinokun, предоставляет больше информации о современном стеке шрифтов.

Загрузчик веб-шрифтов

Одним из давних решений является Web Font Loader , библиотека JavaScript, разработанная Google и Typekit , которая работает со шрифтами, поступающими из разных источников, таких как Google Fonts, Typekit, ваши собственные файлы шрифтов и т. Д.

Web Font Loader загружает пользовательские шрифты в качестве фонового процесса, отображая резервные шрифты для пользователей, тем самым избегая использования FOIT. Вы можете установить ограничение по вашему выбору, в течение которого шрифт должен загружаться. Если запрос превышает этот предел, пользователи увидят только текст, стилизованный под резервный шрифт. Как только пользовательский шрифт загружен, сценарий заменяет запасной шрифт на странице пользовательским шрифтом.

Вот два удивительных урока, чтобы узнать, как использовать Web Font Loader:

API загрузки шрифтов CSS

API загрузки шрифтов CSS — это стандартный способ загрузки и контроля веб-шрифтов.

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

На момент написания этой статьи поддерживали последние версии Chrome, Firefox, Safari и Opera , а IE / Edge пока не поддерживает. Однако вы можете использовать небольшую библиотеку JavaScript, Font Face Observer , чтобы заполнить собственный API загрузки шрифтов CSS или просто позволить не поддерживающим браузерам изящно перейти на веб-безопасные шрифты.

Краткое руководство по использованию API загрузки шрифтов CSS см. В разделе « Начало работы с загрузкой шрифтов CSS » Мануэля Матузовича и ознакомьтесь с его демонстрацией CodePen .

Будущее: CSS font-display свойство font-display

С момента их первого появления вы обрабатывали пользовательские шрифты с помощью CSS @font-face и font-family . Справедливо ожидать, что CSS решит любую проблему, связанную с загрузкой пользовательских шрифтов. Но в настоящее время используются только решения на основе JavaScript.

Однако это не будет так бесконечно. Умное свойство CSS находится за углом, font-display , который является частью модуля управления визуализацией шрифтов CSS уровня 1 .

font-display позволяет вам:

  • Решите, хотите ли вы показывать текст, используя запасной шрифт, или спрячьте его во время загрузки шрифта.
  • Управляйте тем, что вы хотите сделать после загрузки шрифта, т. Е. Продолжайте показывать запасной шрифт или заменяйте его собственным шрифтом. Вы также можете сделать это для каждого элемента.
  • Укажите свои собственные значения времени ожидания для каждого шрифта и даже для конкретного элемента.

Вот как это свойство выглядит в коде: 

 @font-face { font-family: Lato; src: url('/web/css/fonts/lato/lato-regular-webfont.woff2') format('woff2'), url('/web/css/fonts/lato/lato-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; /* This value replaces fallback when font has loaded */ font-display: swap; } body { font-family: Lato, sans-serif; font-weight: 400; font-style: normal; }

Допустимые значения для этого свойства:

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

Из этих коротких описаний вы уже можете увидеть, как swap и optional могут быть очень полезны.

В настоящее время в браузере не поддерживается font-display , но его можно включить в Chrome (с помощью флага «Функции Experimental Web Platform») и Firefox (с помощью layout.css.font-display.enabled ).

А как насчет FOUT?

Хотя все описанные выше подходы делают возможным исключение FOIT, либо путем замены пользовательского шрифта позднее, либо путем отображения только запасного шрифта, они мало что могут сделать против FOUT.

Хотя FOUT делает текст по-прежнему доступным для пользователей, он вполне может раздражать, особенно когда резервный шрифт шире и / или превышает настраиваемый шрифт, который он временно заменяет, что часто вызывает сдвиг в содержании страницы.

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

Вы можете сделать это несколькими способами, но я нахожу этот небольшой инструмент Font Style Matcher от Monica Dinculescu действительно полезным.

Вывод

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

Я представил последние подходы и указал вам на дополнительные ресурсы, где вы можете прочитать больше и узнать, как реализовать эти методы в ваших проектах.

40
Share: