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

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

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

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

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

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

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

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

Что такое мигание невидимого текста (МНТ)?

Чаще всего кастомные шрифты подключаются через CSS-конструкцию @font-face, после чего браузер сам решает, как их загружать. Решение не идеальное. Так как информация о шрифтах лежит в CSS, браузер по умолчанию откладывает загрузку шрифтов до парсинга CSS. Это еще не все. Zach Leatherman ясно показал, что для активации загрузки шрифта помимо правильного объявления @font-face необходимо соблюсти ряд условий:

HTML-узел, использующий то же свойство font-family, задается в @font-face;

в браузерах Webkit и Blink узел не должен быть пустым;

в браузерах с поддержкой дескриптора unicode range внутри @font-face контент должен совпадать с заданным диапазоном символов Юникода.

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

Объединение шрифтов

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

Объединение шрифтов

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

Другими словами, как только браузер начинает загружать шрифт, весь текст становится невидимым. На некоторое время перед пользователями открывается страница без текста, что на слабых соединениях может показаться вечностью. Более того, разные браузеры по-разному обрабатывают МНТ:

Blink браузеры и Firefox вводят трехсекундный таймаут: текст исчезает на три секунды на время загрузки шрифта. Если шрифт не успел загрузиться в отведенное время, сайт показывает фолбек шрифт, который потом заменяется на кастомный по окончании загрузки. Такое поведение порождает новое сокращение МНСТ или мигание нестилизованного текста.

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

IE/Edge не скрывают текст, а сразу отображают фолбек шрифт, что является лучшим дизайнерским решением Майкрософт.

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

Решение проблем, связанных с загрузкой шрифтов, включает в себя работу как по оптимизации размера файлов, так и по управлению стандартным поведением браузера для устранения МНТ и минимизации влияния МНСТ. Давайте подробно разберем каждую задачу.

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

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

№1 минимизируйте количество шрифтов в проекте

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

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

№2 загружайте форматы веб-шрифтов, основываясь на поддержке браузера

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

True Type Font (TTF), распространенный формат шрифтов, который появился в конце 80-х;

Web Open Font Format (WOFF), Open Type или True Type формат, разработанный в 2009, но только со сжатием и метаданными;

Web Open Font Format (WOFF2), в этом формате сжатие лучше, чем в WOFF;

Embedded Open Type (EOT), формат, разработанный Майкрософт для вставки на страницы.

Можно указать все форматы в @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 загружайте только необходимые стили

Обычно у шрифтов есть разные стили, например, italic, bold и т.д. Каждая вариация добавляет вес файлу, поэтому старайтесь избегать тех вариаций, которые вы не будете использовать на сайте. Не забывайте, что даже если вы вставляете иконку с помощью тега <i>, что довольно распространенно, этого достаточно, чтобы браузер загрузил italic версию шрифта (слайд 77 в выступлении Santa Clara Velocity от Zack Leatherman за 2015). Если это единственное применение <i> на вашем сайте, используйте для иконок тег span или задавайте свойство font-style для тега <i> в значение normal, чтобы не напрягать браузер загрузкой ненужных ресурсов.

№4 Загружайте только используемые наборы символов

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

Более подробно о подстановке шрифтов читайте в «снизьте время загрузки страницы с помощью подстановки CSS-шрифтов» от Dudley Storey.

Обработка МНТ

Ниже описано несколько альтернативных способов современной обработки МНТ. Среди эффективных и рекомендуемых практик я выделила простейшие к выполнению. Можете изучить более изощренные подходы в статье «полное руководство по стратегиям загрузки шрифтов» от Zach Leatherman.

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

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

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

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

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

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

Прочитать о современном стеке шрифтов можно в статье «новый системный стек шрифтов?» от Aderinokun.

Web Font Loader

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

Web Font Loader загружает шрифты в фоновом режиме, отображая пользователям фолбек шрифты, тем самым избегая МНТ. Можно задать лимит на загрузку шрифта. Если запрос не уложился в отведенное время, пользователи увидят только фолбек шрифт. После загрузки скрипт переключает фолбек на кастомный шрифт.

CSS Font Loading API

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

Рекомендуется все также избегать МНТ и максимально управлять МНСТ. API умеет отслеживать каждый этап загрузки шрифта. Эту информацию можно использовать для стилизации текста с помощью web safe шрифтов, пока кастомные шрифты не скачались, а также стилизовать текст кастомными шрифтами после их загрузки.

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

Посмотрите короткий урок по работе с CSS Font Loading API «начинаем работать с CSS Font Loading» от Manuel Matuzovic, а также посмотрите демо.

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

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

Тем не менее, долго так продолжаться не будет. На подходе умное свойство font-display из спецификации CSS Font Rendering Controls Module Level 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;
  
  /* Это значение заменяет фолбек после загрузки шрифта */
  font-display: swap;
}
	
body {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-style: normal;
}

Принимаемые свойством значения:

auto: браузер ведет себя по умолчанию.

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

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

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

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

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

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

А что с МНСТ?

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

При МНСТ пользователи видят текст, но сам эффект может сильно раздражать, особенно когда фолбек шире и/или выше кастомного шрифта, что часто вызывает сдвиги контента на странице.

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

Сделать это можно по-разному, но мне очень понравился инструмент Font Style Matcher от Monica Dinculescu.

Заключение

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

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

А какую технику для загрузки шрифтов в своих проектах используете вы? Пишите в комментариях.

Автор: Maria Antonietta Perna

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree