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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

1 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, предварительная загрузка контента означает:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

1234567 @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

За

Сайт сразу становится читаемым

Улучшенная воспринимаемая производительность

Против

Резкий переход от резервного к пользовательскому шрифту (неприятный FOUT)

Загрузка пользовательского шрифта может занять некоторое время

font-display: block

За

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

Против

Сайт не читается в течение длительного времени (особенно на мобильных устройствах)

Это в значительной степени приводит к FOIT (вспышка невидимого текста)

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

Возможное негативное влияние на воспринимаемую производительности

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

За

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

Более короткое время для загрузки пользовательского шрифта

Сайт становится читаемым раньше (чем при варианте block)

Против

Может влиять на воспринимаемую производительность

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

Автор: Matej Latin

Источник webformyself.com