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

1. Почему пользовательские веб-шрифты?
2. Что такое вспышка невидимого текста (FOIT)?
3. Советы по оптимизации файлов пользовательских шрифтов
4. # 1 Минимизируйте количество гарнитур в вашем проекте
5. # 3 Загрузите только те стили, которые вам нужны
6. # 4 Держите свои наборы символов вниз
7. Решая ФОИТ
8. Не используйте пользовательские шрифты
9. Загрузчик веб-шрифтов
10. API загрузки шрифтов CSS
11. Будущее: Свойство CSS font-display
12. А как насчет FOUT?
13. Заключение

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

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

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

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

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

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

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

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

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

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

• HTML-узел, который использует то же семейство шрифтов, указанное в @ font-face
• в браузерах Webkit и Blink этот узел не должен быть пустым
• в браузеры, которые поддерживают дескриптор диапазона Юникода внутри @ 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, также различен:

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

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

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

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

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

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

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

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

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

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

• True Type Font (TTF) , распространенный формат шрифтов, который существует с конца 80-х годов.
• Web Open Font Format (WOFF) , формат, разработанный в 2009 году, который является открытым типом или истинным типом, только со сжатием и дополнительными метаданными
• 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') ('woff2'), формат url ('fonts / open-sans.woff') ( 'Уофф'); }

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

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

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

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

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

Вы можете узнать все о настройке шрифтов в Время загрузки косой черты с поднабором шрифтов CSS Дадли Стори.

Решая ФОИТ

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

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

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

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

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

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

body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", без засечек; }

Новый системный стек шрифтов? ', 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 поддерживают этот API в то время как IE / Edge пока не предлагает поддержку. Тем не менее, вы можете использовать небольшую библиотеку JavaScript, Font Face Observer , чтобы заполнить собственный API загрузки шрифтов CSS или просто позволить не поддерживающим браузерам изящно перейти на веб-безопасные шрифты.

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

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

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

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

шрифт-дисплей позволяет:

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

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

@ font-face {font-family: Lato; Формат src: url ('/ web / css / fonts / lato / lato-регулярно-webfont.woff2') ('woff2'), URL ('/ web / css / fonts / lato / lato-регулярно-webfont.woff') ) формат ('woff'); вес шрифта: 400; стиль шрифта: нормальный; / * Это значение заменяет запасной вариант при загрузке шрифта * / font-display: swap; } body {font-family: lato, sans-serif; вес шрифта: 400; стиль шрифта: нормальный; }

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

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

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

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

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

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

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

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

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

Заключение

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

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

Похожие

Комментарии