Настройте файлы шрифтов и оптимизируйте стратегию загрузки для максимальной скорости + минимум FOUT
В предыдущем посте я писал о системных шрифтах и их преимуществах перед веб-шрифтами. Я поддерживал подход «сначала системные шрифты», утверждая, что по сравнению с системными шрифтами веб-шрифты (а) могут отрицательно повлиять на производительность, (б) использовать больше данных и (в) увеличить энергопотребление вашего сайта. Но сеть без веб-шрифтов была бы гораздо менее интересной — возможно, используя веб-шрифты более ответственно, мы сможем получить все их преимущества, сведя к минимуму недостатки.
В первой части этого руководства я расскажу о пяти методах улучшения производительности веб-шрифтов, которые, на мой взгляд, дают наибольший эффект при минимальных усилиях.
Благодарим Зака Лезермана, который подробно писал о веб-шрифтах на своем сайте. Стоит прочитать все его статьи, особенно The Font Loading Checklist и A Comprehensive Guide to Font Loading Strategies (которое действительно очень исчерпывающее), обе из которых оказались очень полезными, пока я писал этот пост.
Web Open Font Format 2.0 (woff2) на момент написания является самым маленьким и наиболее эффективным форматом файлов для веб-шрифтов. При использовании @ font-face at-rules в CSS убедитесь, что шрифт woff2 отображается раньше старых, менее эффективных форматов файлов, таких как ttf. Браузер будет использовать первый шрифт в списке, который он понимает, даже если это файл большего размера.
Если вам не нужна поддержка IE8, вам не понадобится ничего, кроме woff2 и woff. Если вам не нужна поддержка IE11, вам понадобится только woff2.
Если у вас есть только файл ttf (например, если вы загрузили шрифт из Google Fonts), вам нужно будет преобразовать его с помощью такого инструмента, как Online Font Converter. Если вы не используете шрифт с полностью открытой лицензией, сначала проверьте, разрешает ли это лицензия.
Есть два акронима, которые вы часто увидите, когда начнете разбираться в стратегиях загрузки шрифтов:
Ничто из перечисленного не идеаленьно, но если вы используете веб-шрифты, что-то из этого, вероятно, произойдет при первом посещении вашего веб-сайта пользователем (надеюсь, при загрузке второй страницы браузер сможет обслуживать шрифты из своего кэша). Если мы возьмем наше at-rule font-face из предыдущего и добавим дескриптор font-display, мы сможем указать браузеру, какой из них мы предпочитаем.
Существует пять возможных значений font-display: первое, auto — поведение браузера по умолчанию (большинство браузеров предпочитают foit). Вот еще четыре:
swap сообщает браузеру, что мы хотим, чтобы текст отображался с использованием резервного шрифта до тех пор, пока веб-шрифт не будет загружен (т.е. мы предпочли бы использовать fout). Независимо от того, займет ли это 5 секунд или 5 минут, как только шрифт будет загружен, он будет заменен. Это хорошая основа, потому что она позволяет посетителям веб-сайта сразу же начать читать ваш контент, но обязательно выберите аналогичный вариант (мы: Во второй части этой серии статей мы рассмотрим резервные варианты), чтобы предотвратить сильное смещение макета при смене шрифтов.
Если мы предпочитаем, чтобы браузер скрыл текст до тех пор, пока не загрузится веб-шрифт (т.е. мы предпочли бы foit), мы можем использовать font-display: block. Однако текст не останется невидимым навсегда: если шрифт не загружается в течение определенного периода (обычно трех секунд), браузер все равно будет использовать резервный шрифт, заменяя его веб-шрифтом после его загрузки.
Если вам кажется, что это лучший вариант, потому что вы считаете, что изображение выглядит плохо, помните, что когда текст невидим, ваша страница не может использоваться, а ваш контент читься.
fallback аналогичен swap с двумя отличиями:
Если вас не беспокоит, видит ли пользователь ваш веб-шрифт при первом посещении вашего сайта (скорее всего, они не так уж сильно переживают из-за этого), fallback — хороший выбор.
optional похож на fallback, но дает шрифту очень короткий период времени (~ 100 мс) для загрузки, после чего он не будет заменен. Однако у него есть дополнительная функция, позволяющая браузеру решить прервать запрос шрифта, если соединение слишком медленное для загрузки шрифта.
Чтобы свести к минимуму период foit/fout, мы хотим загружать наши файлы веб-шрифтов как можно быстрее. Используя
Добавляя этот тег, мы говорим браузеру начать загрузку нашего файла шрифта прямо сейчас, тогда как обычно это не начнется, пока он не найдет ссылку на конкретный шрифт в вашем CSS и не найдет элемент dom, который его использует.
Браузеры обычно достаточно умны, чтобы загружать шрифты только в том случае, если они необходимы на текущей странице. Использование предварительной загрузки отменяет это поведение, заставляя браузер загружать шрифт, даже если он не используется. По этой причине всегда предварительно загружайте только один формат каждого шрифта (woff2, если он у вас есть).
Чем больше шрифтов вы предварительно загрузите, тем меньше пользы вы получите от этого метода, поэтому отдавайте предпочтение тем шрифтам, которые отображаются «над сгибом» (первые 100vh, которые пользователь видит без прокрутки).
Вы можете узнать больше о предварительной загрузке в этой статье Йоава Вайсса: Preload: What Is It Good For?
Создав поднабор шрифта, мы можем сгенерировать новый меньший файл шрифта, который включает только глифы (глиф — это отдельный знак или символ), которые нам нужны. Я использовал инструмент Font Subsetter в Everything Fonts, чтобы подобрать шрифт Space Grotesk Bold, используемый для заголовков на этом сайте для включения только символов из диапазона «Basic Latin». Это уменьшило размер файла версии woff2 с 30 КБ до 7 КБ.
Подмножество — мощный инструмент, но он имеет некоторые потенциальные недостатки. Если вы создаете веб-сайт, на котором отображается пользовательский контент, имена людей или названия мест, вам следует использовать символы, отличные от 26 стандартных букв, 10 цифр и нескольких символов, распространенных в английском письме.
Как минимум, вам следует подумать о диакритических знаках: глифах, которые появляются над или под символом, которые изменяют его произношение. Они распространены на языках, включая французский, испанский, вьетнамский, а также в транслитерированном (или «романизированном») тексте из таких алфавитов, как греческий или иврит; они также появляются в заимствованных словах (словах, взятых из другого языка).
Если вы слишком активно подбираете подмножества, вы можете даже получить сочетание шрифтов в одном слове.
Если бы я хотел написать о поделаках, мне, возможно, пришлось бы настроить файл подмножества шрифтов, который я использую для заголовков. Обратите внимание, как формы «â» и «é» (с диакритическими знаками) не соответствуют версиям этих букв без диакритических знаков.
К счастью, вам не нужно вручную проверять каждую страницу вашего сайта на наличие разных символов. Glyphhanger — это инструмент командной строки, который выполняет две функции: во-первых, он просматривает ваши веб-страницы и определяет используемые диапазоны символов Юникода (эти диапазоны соответствуют скрипту или языку, например, «Базовая латынь», «Кириллица», «Тайский»); во-вторых, он представляет собой подмножество файла шрифта, выводя новую версию, содержащую только символы из указанных диапазонов.
Начать работу с Glyphhanger может быть немного сложно (вам понадобятся python и pip) — Сара Суейдан объясняет, как ей удалось это сделать в этой статье: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web.
Как и при изменении форматов файлов, убедитесь, что лицензия на ваш шрифт допускает подмножество.
Это не универсальное правило, как большинство других. Есть две веские причины, по которым вы можете захотеть использовать размещенный сервис, такой как Google Fonts или Adobe Fonts:
Часто это самый дешевый или единственный законный способ использования определенных гарнитур в Интернете. Если у вас нет другого выбора, кроме как использовать одну из этих служб, узнайте, поддерживает ли она подмножество или добавление дескрипторов отображения шрифтов.
Они удобны: копирование и вставка строки html в вашего сайта будет быстрее, чем альтернатива: загрузка файлов шрифтов, преобразование и подмножество файлов шрифтов, затем написание @ font-face at-rules для каждого веса и стиля.
Если вы все еще используете Google Fonts исключительно из-за удобства, обратите внимание на google-webfonts-helper. Этот инструмент позволяет вам создать собственный пакет веб-шрифтов из полного набора шрифтов Google, определить нужные вес и наборы символов, а затем предоставить вам одну загрузку, содержащую все файлы css и шрифтов (в новейших форматах), которые вам нужны.
Вот список веских причин не использовать размещенную службу и вместо этого размещать шрифты самостоятельно:
Поиск домена требует времени, вы можете использовать предварительные подсказки ресурсов для облегчения ситуации, но всегда производительность всегда снижаться из-за открытия TCP-соединения с новым доменом. Возможно, поэтому на некоторых собственных сайтах Google (включая web.dev) теперь используются собственные шрифты вместо шрифтов Google.
Платные службы веб-шрифтов, такие как Adobe Fonts, должны определять просмотры страниц для рассчетов, но они могут собирать больше данных, чем это строго необходимо. Если у вас есть выбор, загрузите шрифты с помощью css (
Похоже, что Google Fonts собирает не так много посетителей веб-сайтов, как IP-адреса и строки User agent, но Google не действует полностью самоотверженно, предоставляя услугу бесплатно. Каждый из пятидесяти триллионов просмотров страниц с использованием шрифтов Google — это точка данных, которой у Google не было бы, если бы вместо этого веб-сайты использовали собственные шрифты.
С автономными шрифтами вы полностью контролируете то, как именно вы загружаете шрифты, что позволяет вам обслуживать пользовательские подмножества, определять параметры отображения шрифтов и указывать, как долго браузер должен кэшировать файлы шрифтов.
Сторонние сервисы могут замедляться, отключаться или вообще переставать работать. При самостоятельном размещении шрифтов, пока ваш веб-сайт работает, ваши шрифты будут доступны.
Каждый из этих шагов может иметь преимущества сам по себе, но их совместное использование может привести к большим улучшениям. Если вы решите реализовать некоторые из шагов, описанных в этой статье, попробуйте использовать такой инструмент, как Lighthouse или Web Page Test до и после внесения изменений, чтобы увидеть эффект каждого отдельного изменения.
Во второй части мы рассмотрим некоторые более сложные техники, включая стратегии загрузки шрифтов JavaScript и вариативные шрифты. Мы также увидим важность выбора правильных резервных шрифтов и введем новый акроним — FOFT, Flash Of Faux Text.
Чтобы не терять свои находки по дизайну в тоннах закладок на компе, я создала телеграм-канал Дрын Дезигн. Все клевые и полезные материалы (туториалы, статьи, ссылки на аккаунты клевых чуваков), которые нахожу для себя, я буду постить туда. Угощайтесь.
В предыдущем посте я писал о системных шрифтах и их преимуществах перед веб-шрифтами. Я поддерживал подход «сначала системные шрифты», утверждая, что по сравнению с системными шрифтами веб-шрифты (а) могут отрицательно повлиять на производительность, (б) использовать больше данных и (в) увеличить энергопотребление вашего сайта. Но сеть без веб-шрифтов была бы гораздо менее интересной — возможно, используя веб-шрифты более ответственно, мы сможем получить все их преимущества, сведя к минимуму недостатки.
В первой части этого руководства я расскажу о пяти методах улучшения производительности веб-шрифтов, которые, на мой взгляд, дают наибольший эффект при минимальных усилиях.
Благодарим Зака Лезермана, который подробно писал о веб-шрифтах на своем сайте. Стоит прочитать все его статьи, особенно The Font Loading Checklist и A Comprehensive Guide to Font Loading Strategies (которое действительно очень исчерпывающее), обе из которых оказались очень полезными, пока я писал этот пост.
В этом посте я буду использовать два термина, которые часто используются как синонимы, но которые традиционно относятся к разным вещам:
Гарнитура (typeface) — это полное семейство шрифтов, имеющих общий дизайн. Шрифт может включать любое количество начертаний или стилей (а в те времена, когда использовался металл или дерево, размеры тоже). Helvetica — это пример шрифта. Вы можете думать о гарнитуре как о семействе шрифтов.
Шрифт (font) — это единое начертание и стиль гарнитуры. В случае физического типа каждый шрифт будет помещен в свое собственное поле, содержащее глифы определенного размера, веса и стиля, например, «Helvetica Bold Italic на 10 типографском пункте». Векторный дизайн современных цифровых шрифтов позволяет бесконечно масштабировать один шрифт вверх и вниз, но вам все равно понадобится отдельный файл для каждого веса и стиля (если вы не используете вариативные шрифты, но это тема для второй части).
1. Используйте самые современные форматы файлов
Web Open Font Format 2.0 (woff2) на момент написания является самым маленьким и наиболее эффективным форматом файлов для веб-шрифтов. При использовании @ font-face at-rules в CSS убедитесь, что шрифт woff2 отображается раньше старых, менее эффективных форматов файлов, таких как ttf. Браузер будет использовать первый шрифт в списке, который он понимает, даже если это файл большего размера.
@font-face {
font-family: 'Typefesse';
src: url('typefesse.woff2') format('woff2'),
url('typefesse.woff') format('woff');
}Если вам не нужна поддержка IE8, вам не понадобится ничего, кроме woff2 и woff. Если вам не нужна поддержка IE11, вам понадобится только woff2.
Если у вас есть только файл ttf (например, если вы загрузили шрифт из Google Fonts), вам нужно будет преобразовать его с помощью такого инструмента, как Online Font Converter. Если вы не используете шрифт с полностью открытой лицензией, сначала проверьте, разрешает ли это лицензия.
2. Используйте дескриптор font-display
Есть два акронима, которые вы часто увидите, когда начнете разбираться в стратегиях загрузки шрифтов:
- Flash of Invisible Text (foit) — это период времени, в течение которого текст невидим до того, как браузер загрузит веб-шрифт.
- Flash of Unstyled Text (fout) — это период времени, в течение которого текст отображается с использованием резервного шрифта до того, как браузер загрузит веб-шрифт.
Ничто из перечисленного не идеаленьно, но если вы используете веб-шрифты, что-то из этого, вероятно, произойдет при первом посещении вашего веб-сайта пользователем (надеюсь, при загрузке второй страницы браузер сможет обслуживать шрифты из своего кэша). Если мы возьмем наше at-rule font-face из предыдущего и добавим дескриптор font-display, мы сможем указать браузеру, какой из них мы предпочитаем.
@font-face {
font-family: 'Typefesse';
src: url('typefesse.woff2') format('woff2'),
url('typefesse.woff') format('woff');
font-display: swap;
}Существует пять возможных значений font-display: первое, auto — поведение браузера по умолчанию (большинство браузеров предпочитают foit). Вот еще четыре:
swap
swap сообщает браузеру, что мы хотим, чтобы текст отображался с использованием резервного шрифта до тех пор, пока веб-шрифт не будет загружен (т.е. мы предпочли бы использовать fout). Независимо от того, займет ли это 5 секунд или 5 минут, как только шрифт будет загружен, он будет заменен. Это хорошая основа, потому что она позволяет посетителям веб-сайта сразу же начать читать ваш контент, но обязательно выберите аналогичный вариант (мы: Во второй части этой серии статей мы рассмотрим резервные варианты), чтобы предотвратить сильное смещение макета при смене шрифтов.
block
Если мы предпочитаем, чтобы браузер скрыл текст до тех пор, пока не загрузится веб-шрифт (т.е. мы предпочли бы foit), мы можем использовать font-display: block. Однако текст не останется невидимым навсегда: если шрифт не загружается в течение определенного периода (обычно трех секунд), браузер все равно будет использовать резервный шрифт, заменяя его веб-шрифтом после его загрузки.
Если вам кажется, что это лучший вариант, потому что вы считаете, что изображение выглядит плохо, помните, что когда текст невидим, ваша страница не может использоваться, а ваш контент читься.
fallback
fallback аналогичен swap с двумя отличиями:
- Он начинается с невероятно маленького (~ 100 мс) периода «блока», когда текст скрывается, после чего отображается резервный шрифт.
- Если веб-шрифт не загружается в течение короткого периода времени (~ 3 с), резервный шрифт будет использоваться до конца действия страницы.
Если вас не беспокоит, видит ли пользователь ваш веб-шрифт при первом посещении вашего сайта (скорее всего, они не так уж сильно переживают из-за этого), fallback — хороший выбор.
optional
optional похож на fallback, но дает шрифту очень короткий период времени (~ 100 мс) для загрузки, после чего он не будет заменен. Однако у него есть дополнительная функция, позволяющая браузеру решить прервать запрос шрифта, если соединение слишком медленное для загрузки шрифта.
Каждый шрифт на вашей странице будет иметь свой период foit/fout — шрифты меняются местами по отдельности при загрузке, а не когда они все загружены. Это может привести к нежелательному поведению (см. Проблему веб-шрифтов Mitt Romney). Для полного контроля над загрузкой шрифтов вам нужно изучить решения JavaScript (о которых мы поговорим во второй части).
3. Предварительно загрузите файлы шрифтов
Чтобы свести к минимуму период foit/fout, мы хотим загружать наши файлы веб-шрифтов как можно быстрее. Используя
link rel = "preload" в нашем html head, мы можем указать браузеру начать выборку наших шрифтов раньше. Добавьте следующий тег в верхнюю часть вашего head (перед любым css), установив атрибут href для URL-адреса вашего файла шрифта:link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossoriginДобавляя этот тег, мы говорим браузеру начать загрузку нашего файла шрифта прямо сейчас, тогда как обычно это не начнется, пока он не найдет ссылку на конкретный шрифт в вашем CSS и не найдет элемент dom, который его использует.
Браузеры обычно достаточно умны, чтобы загружать шрифты только в том случае, если они необходимы на текущей странице. Использование предварительной загрузки отменяет это поведение, заставляя браузер загружать шрифт, даже если он не используется. По этой причине всегда предварительно загружайте только один формат каждого шрифта (woff2, если он у вас есть).
Чем больше шрифтов вы предварительно загрузите, тем меньше пользы вы получите от этого метода, поэтому отдавайте предпочтение тем шрифтам, которые отображаются «над сгибом» (первые 100vh, которые пользователь видит без прокрутки).
Вы можете узнать больше о предварительной загрузке в этой статье Йоава Вайсса: Preload: What Is It Good For?
4. Подберите файлы шрифтов
Создав поднабор шрифта, мы можем сгенерировать новый меньший файл шрифта, который включает только глифы (глиф — это отдельный знак или символ), которые нам нужны. Я использовал инструмент Font Subsetter в Everything Fonts, чтобы подобрать шрифт Space Grotesk Bold, используемый для заголовков на этом сайте для включения только символов из диапазона «Basic Latin». Это уменьшило размер файла версии woff2 с 30 КБ до 7 КБ.
Подмножество — мощный инструмент, но он имеет некоторые потенциальные недостатки. Если вы создаете веб-сайт, на котором отображается пользовательский контент, имена людей или названия мест, вам следует использовать символы, отличные от 26 стандартных букв, 10 цифр и нескольких символов, распространенных в английском письме.
Как минимум, вам следует подумать о диакритических знаках: глифах, которые появляются над или под символом, которые изменяют его произношение. Они распространены на языках, включая французский, испанский, вьетнамский, а также в транслитерированном (или «романизированном») тексте из таких алфавитов, как греческий или иврит; они также появляются в заимствованных словах (словах, взятых из другого языка).
Если вы слишком активно подбираете подмножества, вы можете даже получить сочетание шрифтов в одном слове.
Если бы я хотел написать о поделаках, мне, возможно, пришлось бы настроить файл подмножества шрифтов, который я использую для заголовков. Обратите внимание, как формы «â» и «é» (с диакритическими знаками) не соответствуют версиям этих букв без диакритических знаков.
К счастью, вам не нужно вручную проверять каждую страницу вашего сайта на наличие разных символов. Glyphhanger — это инструмент командной строки, который выполняет две функции: во-первых, он просматривает ваши веб-страницы и определяет используемые диапазоны символов Юникода (эти диапазоны соответствуют скрипту или языку, например, «Базовая латынь», «Кириллица», «Тайский»); во-вторых, он представляет собой подмножество файла шрифта, выводя новую версию, содержащую только символы из указанных диапазонов.
Начать работу с Glyphhanger может быть немного сложно (вам понадобятся python и pip) — Сара Суейдан объясняет, как ей удалось это сделать в этой статье: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web.
Как и при изменении форматов файлов, убедитесь, что лицензия на ваш шрифт допускает подмножество.
5. Разместите шрифты самостоятельно
Это не универсальное правило, как большинство других. Есть две веские причины, по которым вы можете захотеть использовать размещенный сервис, такой как Google Fonts или Adobe Fonts:
Часто это самый дешевый или единственный законный способ использования определенных гарнитур в Интернете. Если у вас нет другого выбора, кроме как использовать одну из этих служб, узнайте, поддерживает ли она подмножество или добавление дескрипторов отображения шрифтов.
Они удобны: копирование и вставка строки html в вашего сайта будет быстрее, чем альтернатива: загрузка файлов шрифтов, преобразование и подмножество файлов шрифтов, затем написание @ font-face at-rules для каждого веса и стиля.
Если вы все еще используете Google Fonts исключительно из-за удобства, обратите внимание на google-webfonts-helper. Этот инструмент позволяет вам создать собственный пакет веб-шрифтов из полного набора шрифтов Google, определить нужные вес и наборы символов, а затем предоставить вам одну загрузку, содержащую все файлы css и шрифтов (в новейших форматах), которые вам нужны.
Миф №1 о веб-шрифтах
Возможно, вы слышали утверждение (которое повторяется в Google Fonts) о том, что если пользователь ранее посещал сайт, который загружает те же шрифты из того же источника, браузеру не нужно загружать их снова, потому что они кэшированы.
Когда-то это могло быть правдой, но я не могу найти доказательств того, что это достаточно обыденное явление, которое влияло бы на что-то. Фактически, и Google Chrome, и Safari явно запрещают совместное использование кэшированных сторонних ресурсов в разных доменах из-за проблем с отслеживанием.
Вот список веских причин не использовать размещенную службу и вместо этого размещать шрифты самостоятельно:
Производительность
Поиск домена требует времени, вы можете использовать предварительные подсказки ресурсов для облегчения ситуации, но всегда производительность всегда снижаться из-за открытия TCP-соединения с новым доменом. Возможно, поэтому на некоторых собственных сайтах Google (включая web.dev) теперь используются собственные шрифты вместо шрифтов Google.
Конфиденциальность
Платные службы веб-шрифтов, такие как Adobe Fonts, должны определять просмотры страниц для рассчетов, но они могут собирать больше данных, чем это строго необходимо. Если у вас есть выбор, загрузите шрифты с помощью css (
link rel = "stylesheet") вместо JavaScript (script), чтобы минимизировать объем данных, которые сторонняя организация может собирать о ваших пользователях.Похоже, что Google Fonts собирает не так много посетителей веб-сайтов, как IP-адреса и строки User agent, но Google не действует полностью самоотверженно, предоставляя услугу бесплатно. Каждый из пятидесяти триллионов просмотров страниц с использованием шрифтов Google — это точка данных, которой у Google не было бы, если бы вместо этого веб-сайты использовали собственные шрифты.
Контроль
С автономными шрифтами вы полностью контролируете то, как именно вы загружаете шрифты, что позволяет вам обслуживать пользовательские подмножества, определять параметры отображения шрифтов и указывать, как долго браузер должен кэшировать файлы шрифтов.
Надежность
Сторонние сервисы могут замедляться, отключаться или вообще переставать работать. При самостоятельном размещении шрифтов, пока ваш веб-сайт работает, ваши шрифты будут доступны.
Заключение
Каждый из этих шагов может иметь преимущества сам по себе, но их совместное использование может привести к большим улучшениям. Если вы решите реализовать некоторые из шагов, описанных в этой статье, попробуйте использовать такой инструмент, как Lighthouse или Web Page Test до и после внесения изменений, чтобы увидеть эффект каждого отдельного изменения.
Во второй части мы рассмотрим некоторые более сложные техники, включая стратегии загрузки шрифтов JavaScript и вариативные шрифты. Мы также увидим важность выбора правильных резервных шрифтов и введем новый акроним — FOFT, Flash Of Faux Text.
Чтобы не терять свои находки по дизайну в тоннах закладок на компе, я создала телеграм-канал Дрын Дезигн. Все клевые и полезные материалы (туториалы, статьи, ссылки на аккаунты клевых чуваков), которые нахожу для себя, я буду постить туда. Угощайтесь.