Предварительная загрузка шрифтов: когда это имеет смысл

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

Да, этот резкий переход был неизбежен. Вспышка невидимого текста (FOIT) немного улучшала ситуацию, но поскольку она скрывает текст сайта до загрузки шрифта, это создает проблемы с доступностью.

Я только что запустил сайт для UX Buddy — нового проекта, над которым я недавно начал работать. Я прошел долгий процесс выбора правильного шрифта для него, который задокументировал в своей статье Как выбрать шрифт для проекта. Теперь я хотел убедиться, что посетители сайта не испытывают неудобств от резкого перехода между резервным и пользовательским шрифтом во время загрузки. Может ли в этом помочь предварительная загрузка пользовательского шрифта?

Загрузка веб-шрифтов по умолчанию

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

font-family: "Gilroy", Futura, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Это означает, что по умолчанию браузер сначала покажет все заголовки, установленные в первом шрифте, доступном на компьютере пользователя. Мой первый запасной шрифт — Futura, но, поскольку он не является обычным шрифтом в Mac OS или Windows, браузер, скорее всего, будет использовать Roboto, Helvetica или Arial. Ни один из них не является хорошим вариантом, потому что все они сильно отличаются от Gilroy. Я оптимистично установил первый резервный шрифт как Futura, потому что, по крайней мере, это геометрический шрифт без засечек — вроде как. Тем не менее, при загрузке сайта возникает резкий переход.

Браузер сначала показывает текст в Futura (первый запасной шрифт из доступного стека), и переключается на Gilroy только после его загрузки.

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

Предварительная загрузка шрифтов

Поэтому первое, что я хотел проверить, это предварительная загрузка шрифтов. Когда шрифты загружаются по умолчанию? Изменяет ли это предварительная загрузка шрифтов? Согласно документации MDN, предварительная загрузка контента означает:

Значение preload атрибута rel элемента link в head позволяет вам объявлять запросы на выборку, указывая ресурсы, которые понадобятся вашей странице очень скоро, и которые вы хотите начать загружать на ранних этапах жизненного цикла страницы, прежде чем включится основной механизм рендеринга в браузерах. Это гарантирует, что они будут доступны ранее и с меньшей вероятностью блокируют визуализацию страницы, улучшая производительность.

Итак, вот как сайт загружается по умолчанию:

Шрифт является одной из последних вещей, которые загружаются браузером. Симулированная для 3G загрузка заняла 7,04 секунды.

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

Поэтому я добавил в HTML head следующее:

<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

Я добавил эту строку кода еще до той, которая загружает CSS. Давайте посмотрим, как это повлияет на загрузку веб-сайта и шрифтов.

Шрифт теперь является одной из первых вещей, которые браузер начинает загружать. Загрузка с имитацией 3G заняла 7,05 секунды, поэтому это не сильно повлияло на производительность.

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

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

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

Браузер начинает загружать шрифт сразу же и начинает отображать веб-сайт только после загрузки шрифта.

Вы заметили разницу? Текст появляется немного позже, чем в процессе загрузки по умолчанию, но он сразу же устанавливается шрифтом Gilroy. Никакого неприятного FOUT, это именно то, что мне нужно! Но как это соотносится с контролем, когда и как пользовательский шрифт отображается, через font-display? Давайте выясним.

Что насчет font-display

Джефф Грэм написал отличную статью о приемах CSS, в которой объясняется, как работает font-display, поэтому я не буду вдаваться в подробности. Два основных параметра, которые я хочу рассмотреть, это font-display: swap и font-display: block. Как они влияют на загрузку шрифтов и когда / как на сайте отображается пользовательский шрифт. Они должны быть добавлены в @font-face, что-то вроде этого:

@font-face { font-family: 'Gilroy'; src: url('/assets/fonts/3A1C32_0_0.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap;
}

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

Font-display: swap с другой стороны, указывает браузеру менять шрифт на запасной вариант во время загрузки, что приводит к FOUT.

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

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

Заключение

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

Вы даже можете использовать комбинацию из двух вариантов: заголовки, как правило, больше, и FOUT там более очевиден. Основной текст меньше, и если вы используете для него другой шрифт, вы можете предварительно загрузить пользовательский шрифт для заголовков и использовать вариант swap для основного текста. Я не могу понять, когда будет иметь смысл вариант block. Может быть, если по какой-то причине предварительная загрузка шрифта невозможна? Давайте кратко рассмотрим плюсы и минусы каждого из вариантов.

font-display: swap

За

Против

font-display: block

За

Против

Предварительная загрузка шрифта

За

Против

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

Автор: Matej Latin

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

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