Антишаблоны веб-шрифтов: встраивание

  1. Base64 кодирование и декодирование
  2. Кэширование
  3. Заключительные мысли

13 октября 2015 г.

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

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

Эти недостатки становятся видимыми, когда вы сравниваете сетевую временную шкалу нормальной загрузки шрифта с сетевой временной шкалой встроенных шрифтов. Ниже приведена сетевая временная шкала поведения загрузки шрифтов по умолчанию. Шрифты загружаются параллельно и отображаются как только они заканчиваются; Сначала отображается шрифт a, затем шрифт b и, наконец, шрифт c. Это прогрессивный рендеринг. Шрифты отображаются, как только они заканчивают загрузку.

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

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

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

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

Base64 кодирование и декодирование

Кодирование и декодирование base64 также имеет свою стоимость. Файл в кодировке base64 примерно на 30% больше, чем его двоичная форма. Вы можете отрицать большую часть этого, используя сжатие GZIP, но полученный размер файла все равно будет немного больше. Расшифровка Base64 тоже не бесплатна. Шрифты, встроенные в таблицу стилей с использованием кодировки base64, должны быть декодированы, прежде чем их можно будет проанализировать. Эта стоимость незначительна на большинстве настольных компьютеров, но может быть проблематичной на устройствах с менее мощными процессорами, таких как планшеты и мобильные телефоны.

Средний размер файла WOFF из 20 000 корпусов файлов шрифтов. Кодировка Base64 файла WOFF увеличивает размер файла примерно на 30%, но сжатие GZIP уменьшает его до размера, близкого к исходному размеру файла.

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

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

Кэширование

Наконец, встраивание также отрицательно влияет на кеширование. Если вы обновите один (или несколько) шрифтов в своей таблице стилей, вам нужно будет сделать недействительной кэш браузера для всей таблицы стилей (например, изменив имя таблицы стилей). Вашим посетителям потребуется повторно загрузить файл CSS, содержащий все шрифты, хотя большинство из них не изменились. Если файлы шрифтов обслуживались (и кэшировались) как отдельные файлы, только обновленный файл шрифтов необходимо было бы снова загрузить, а оставшиеся файлы могли остаться в кэше.

Заключительные мысли

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

С введением HTTP / 2 встраивание стало еще менее привлекательным вариантом. HTTP / 2 обеспечивает параллельную загрузку через одно и то же соединение. Это имеет то же преимущество, что и встраивание (исключая издержки соединения), но не имеет недостатков. Кэширование, согласование формата шрифта, отложенная загрузка и прогрессивный рендеринг будут продолжать работать, как и ожидалось, с HTTP / 2. Многие браузеры, серверы и хостинг-провайдеры уже поддерживают HTTP / 2, поэтому вы можете начать использовать его сегодня, а не встраивать!

Эта статья является первой частью продолжающейся серии анти-шаблонов веб-шрифтов. Прочитайте вступление , часть 1 , часть 2 , часть 3 , а также часть 4 ,