8 стратегий загрузки шрифтов для улучшения ваших основных веб-жизненных показателей (2022 г.)

Первоначально было опубликовано в октябре 2021 г. и обновлено для полноты в октябре 2022 г.

Когда мы говорим о веб-производительности и особенно о Core Web Vitals (CWV), кажется, что в центре внимания находятся методы оптимизации изображений и JavaScript.

Однако есть еще один игрок, который нельзя упускать из виду — веб-шрифты.

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

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

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

Давайте начнем!

Что нужно знать о загрузке шрифтов (в двух словах)

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

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

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

• Flash of Invisible Text (FOIT) , где текст скрыт до загрузки шрифта.

Или же

• Flash of Unstyled Text (FOUT) изначально использует резервный системный шрифт, а затем обновляет его до веб-шрифта при загрузке.

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

Оба решения неприемлемы в современном мире Core Web Vitals.

По сути, ситуация с загрузкой шрифта была следующей:

Затем было объявлено свойство font-display .

font-display сообщает браузеру, как он должен обрабатывать текст, если соответствующий веб-шрифт не загружен. Он определяется для font-face .

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

Источник: web.dev

Процесс загрузки шрифта делится на три основных периода:

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

Понимание этих периодов позволит вам более эффективно использовать значения font-display :

• font-display: auto использует любую стратегию отображения шрифта, которую использует пользовательский агент;
• font-display: block дает шрифту 3-секундный (в большинстве случаев) короткий период блокировки и бесконечный период подкачки. Другими словами, он всегда заменяет веб-шрифт при загрузке. Используйте это значение, когда шрифт важен для страницы;
• font-display: swap показывает шрифт, как только он загружается. Подобно блоку, это значение следует использовать только в том случае, если для страницы важно отрисовывать текст с использованием определенного шрифта;
• font-display: резервный вариант скрывает текст на срок до 100 мс, а затем заменяет веб-шрифт только в том случае, если он загружается в течение трех секунд. Если шрифт не загружается в течение трехсекундного периода подкачки, резервный вариант будет использоваться до конца жизни страницы;
• font-display: optional дает шрифту минимальный период блокировки 100 мс. Затем, если шрифт по-прежнему недоступен, он остается с запасным вариантом и никогда не заменяется. По сути, необязательное значение оставляет за браузером право решать, инициировать загрузку шрифта или нет.

Источник: Как избежать смещения макета, вызванного веб-шрифтами

При принятии решения о том, какое значение font-display использовать для вашего сайта, воспользуйтесь следующей рекомендацией Google:

• Если производительность является главным приоритетом : используйте font-display: необязательно. Это самый «эффективный» подход: рендеринг текста задерживается не более чем на 100 мс, и есть гарантия, что не будет никаких сдвигов макета, связанных с заменой шрифтов.
• Если отображение текста в веб-шрифте является главным приоритетом : используйте font-display: swap, но не забудьте доставить шрифт достаточно рано, чтобы он не вызвал сдвиг макета».

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

На самом деле, некоторые значения font-display могут ухудшить ваши показатели Core Web Vitals.

Как шрифты влияют на ваши основные веб-жизненные показатели (CLS и LCP)

Если вы знакомы с Core Web Vitals, вы, вероятно, знаете, что некоторые методы загрузки шрифтов могут им навредить.

Например, если шрифт не был загружен (FOIT), браузеры обычно задерживают рендеринг текста ( font-display: block ). В некоторых случаях это задерживает первую отрисовку по содержанию (FCP) и самую большую отрисовку по содержанию (LCP).

С другой стороны, практика замены шрифтов хорошо известна тем, что вызывает неожиданные сдвиги макета, которые напрямую связаны с метрикой Cumulative Layout Shift (CLS).

Теперь давайте рассмотрим рекомендации по загрузке шрифтов, чтобы контролировать ваши показатели CWV.

Избегайте смещения макета при загрузке шрифтов (CLS)

Совокупный сдвиг макета измеряет значимость неожиданных сдвигов макета на странице. Неожиданные изменения макета происходят, когда содержимое на странице перемещается без участия пользователя или предварительного уведомления:

Две вещи могут вызвать сдвиг макета в процессе выборки и рендеринга:

• Резервный шрифт заменяется новым шрифтом (FOUT);
• «Невидимый» текст отображается до тех пор, пока не будет отрендерен шрифт (FOIT).

Чтобы решить эти проблемы, вы можете реализовать некоторые из следующих передовых практик:

1) Объедините ссылку rel=preload и font-display: необязательно

Возможность сочетать ссылку rel=preload с font-display: optional доступна начиная с Chrome 83, и считается, что это верный способ избежать смещения макета.

Как упоминалось ранее, когда шрифт использует необязательное значение font-display:, у него есть 100 мс на загрузку и выполнение, прежде чем браузер вернется к резервному варианту.

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

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

В Chrome 83 первый цикл рендеринга удален для необязательных шрифтов, использующих ссылку rel=preload , и заменен периодом блокировки (100 мс) до загрузки пользовательского шрифта или завершения периода.

Теперь процесс загрузки шрифта выглядит следующим образом, когда шрифт предварительно загружается и загружается после периода блокировки 100 мс:

И вот так, когда шрифт предварительно загружен и загружен до отметки 100 мс:

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

2) Используйте регулировку размера

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

Включение дескриптора size-adjust в правило font-face приведет к минимальным визуальным изменениям и почти бесшовному обмену.

Ознакомьтесь с руководством Google по настройке размера CSS для @font-face, чтобы узнать, как это реализовать.

3) Сделайте ваш запасной шрифт соответствующим вашему веб-шрифту

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

Приложение Font Style Matcher от Моники Динкулеску — это хорошо известный инструмент для сопоставления шрифтов.

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

К сожалению, как и любой другой метод оптимизации загрузки шрифтов, он имеет свои риски и препятствия.

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

В своей лекции 2018 года Зак Лезерман более подробно объясняет эту технику:

Убедитесь, что ваши шрифты загружаются как можно быстрее (LCP и FCP)

Когда дело доходит до загрузки шрифтов и улучшения метрики Largest Contentful Paint, методы, которые мы рассмотрим, немного более общие.

LCP измеряет время, необходимое для загрузки самого большого элемента содержимого в верхней части страницы (например, текста или изображения). Все, что меньше 2,5 с, считается хорошим временем LCP:

Еще одна метрика, которая не является частью CWV, но на которую все же может повлиять загрузка тяжелых файлов шрифтов, — это First Contentful Paint (FCP).

FCP измеряет время, в течение которого браузер визуализирует первую часть содержимого DOM (например, текстовый блок, изображение, SVG, непустой элемент холста) на странице.

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

Если они какое-то время смотрят на пустой экран (FCP), это не будет хорошим пользовательским опытом. То же самое касается слишком долгого ожидания рендеринга вашего самого большого/героического элемента (LCP).

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

Вот несколько техник, которые вы, возможно, захотите попробовать:

1) Сжать ваши шрифты

Чтобы понять, как работает сжатие шрифтов, вам нужно знать анатомию веб-шрифта.

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

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

• Embedded OpenType (EOT) — может использоваться в старых браузерах IE (ниже I9). По умолчанию не сжат. К этому шрифту можно применить сжатие GZIP.
• TrueType (TTF) — может использоваться в старых браузерах Android (ниже 4.4). По умолчанию не сжат. К этому шрифту можно применить сжатие GZIP.
• Web Open Font Format (WOFF) — может использоваться в большинстве браузеров. Имеет встроенную компрессию.
• Web Open Font Format 2 (WOFF 2) — может использоваться в браузерах, которые его поддерживают. Он использует специальные алгоритмы сжатия для уменьшения размера файла примерно на 30% по сравнению с другими форматами.

Затем вы можете применить сжатие GZIP (при необходимости) с помощью онлайн-инструмента или выполнить некоторые настройки сервера.

2) встроенные шрифты

Как правило, шрифты хранятся во внешней таблице стилей CSS. Чтобы использовать таблицу стилей, в теге head HTML-разметки помещается ссылка, например:

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

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

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

3) Убедитесь, что ваши шрифты загружаются быстро

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

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

Фактически, веб-альманах обнаружил, что некоторые сайты, использующие сторонние шрифты, имеют более быструю визуализацию, чем сайты, использующие сторонние шрифты:

Источник: HTTP-архив

В конце концов, самое главное — как быстро загружаются и отображаются ваши шрифты? И в большинстве случаев ответы зависят не от вашего подхода к хостингу, а от того, есть ли у вас эти три вещи или нет:

• Сеть доставки контента (CDN)
• HTTP/2
• Политика веб-кеширования

Поэтому вместо того, чтобы тратить время на такие вопросы, как «Должен ли я самостоятельно размещать свои веб-шрифты?», убедитесь, что у вас настроены более важные элементы.

4) Предварительное подключение к сторонним ресурсам

Другой метод, позволяющий быстро загружать шрифты, — это использование ссылки rel=preconnect .

Используйте подсказку ресурса link rel=preconnect , чтобы установить раннее соединение(я) со сторонним источником.

Добавление ссылки rel=preconnect информирует браузер о намерении вашей страницы установить соединение с другим доменом и о том, что вы хотите, чтобы процесс начался как можно скорее. Ресурсы будут загружаться быстрее, потому что процесс установки уже завершен к тому моменту, когда браузер их запрашивает.

Подсказки ресурсов должны быть размещены в теге заголовка документа.

5) Подмножить ваши шрифты

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

Но…

Браузеру все еще нужно их загрузить, что может привести к замедлению времени загрузки!

Введите поднабор шрифта.

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

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

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

Как NitroPack может оптимизировать загрузку шрифтов и основные веб-жизненные показатели

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

Например, NitroPack включает в себя множество различных функций, которые сэкономят вам много времени при оптимизации шрифтов:

• Глобальная CDN
• GZIP и сжатие Brotli
• HTTP/2-совместимость
• Отложенная загрузка шрифтов
• Критический CSS

Кроме того, NitroPack позволяет настроить поведение рендеринга шрифтов по умолчанию.

Для пользователей ручного режима есть возможность переопределить это поведение в «Дополнительных настройках»:

Кроме того, в «Дополнительных настройках» вы также найдете возможность оптимизировать доставку CSS:

Мы также постоянно тестируем различные конфигурации шрифтов, чтобы увидеть их влияние на Core Web Vitals и в конечном итоге найти лучшее решение. Фактически, этот процесс непрерывных экспериментов, наряду с помощью наших участников Speed ​​Insiders, позволяет нам предлагать оптимальные результаты CWV для наших клиентов:

И если вы решили стать частью сообщества NitroPack, знайте, что его настройка занимает не более 5 минут, и вы можете попробовать наш сервис на бесплатном тарифе (без CC).