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

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

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

Пришло время прервать этот цикл и начать делать правильные вещи в 2020 году. При загрузке пользовательского веб-шрифта необходимо учитывать всего четыре шага:

• Используйте правильный формат шрифта
• Предварительная загрузка шрифтов
• Используйте правильное объявление font-face
• Избегайте невидимого текста во время загрузки шрифта.

Давайте разберем эти пункты по одному.

Используйте правильный формат шрифта

Существует множество форматов шрифтов, которые можно использовать в Интернете, но на самом деле необходимы только два формата, если вам не требуется поддержка Internet Explorer (IE) 8 или ниже: woff и woff2 . Это только два типа файлов, которые вы должны использовать, потому что они по умолчанию сжимаются в формате gzip (поэтому они очень малы), оптимизированы для Интернета и полностью поддерживаются IE 9+ и всеми другими вечнозелеными браузерами.

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

При использовании пользовательских шрифтов вы должны указать браузеру предварительно загружать их, используя соответствующий rel=""тег и атрибуты:

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

В приведенном выше примере rel="preload" as="font"атрибуты попросят браузер начать загрузку необходимого ресурса как можно скорее. Они также сообщают браузеру, что это шрифт, поэтому он может соответствующим образом расставить приоритеты в своей очереди ресурсов. Использование подсказок предварительной загрузки окажет значительное влияние на производительность веб-шрифтов и начальную загрузку страницы. Браузеры, поддерживающие подсказки предварительной загрузки и предварительной выборки, начнут загружать веб-шрифты, как только они увидят подсказку в файле HTML и больше не будут ждать CSS.

Вместо этого вы можете использовать rel="prefetch"атрибут, чтобы указать браузеру подготовить загрузку ресурсов, которая может потребоваться позже во время загрузки страницы или действий пользователя, чтобы он назначил низкий приоритет этим ресурсам.

ПРЕДУПРЕЖДЕНИЕ.
Если вы используете CDN, такой как Google Fonts, убедитесь, что файлы шрифтов, которые вы загружаете, совпадают с файлами в CSS. Шрифты также могут регулярно обновляться, и если вы предварительно загружаете старую версию, используя CSS для более новой, вы можете в конечном итоге загрузить две версии одного и того же шрифта и тратить трафик своих пользователей. Попробуйте вместо этого использовать 

<link rel="preconnect ">

Правильная декларация шрифта

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

@font-face {  <br>	font-family: 'Custom Font';  <br>	font-weight: 400;  <br>	font-style: normal;  <br>	font-display: swap; /* Read next point */  <br>	unicode-range: U+000-5FF; /* Download only latin glyphs */  <br>	src: local('Custom Font'),url('/fonts/custom-font.woff2') format('woff2'),url('/fonts/custom-font.woff') format('woff');<br>}

Вот диапазон Unicode от Google Web Fundamentals.

Как видите, мы используем только оптимизированные шрифты ( woff и woff2 ) и говорим браузеру загружать только необходимый диапазон глифов (от U+000до U+5FF), но это свойство не мешает браузерам загружать весь шрифт. Следует также отметить еще две вещи: local()функцию и порядок объявления шрифта.

local()Функция позволяет пользователям использовать их локальную копию шрифта, если присутствует (например, думать о шрифтах Roboto, которые предварительно установлены на Android), а не загружая его.

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

Если вы действительно хотите использовать eotи ttfшрифты не забудьте добавить их в конце srcзаявлений.

Ресурсы

• Генератор диапазонов глифов от Eli Fitch
• Современный генератор Font Face

Избегайте невидимого текста во время загрузки шрифта

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

В предыдущем @font-faceпримере вы заметите font-display объявление. Это swapзначение сообщает браузеру, что текст, использующий этот шрифт, должен отображаться немедленно с использованием системного шрифта. Как только пользовательский шрифт готов, системный шрифт заменяется.

Если браузер не поддерживает, font-display он продолжает следовать стандартному поведению при загрузке шрифтов.

Поведение браузера по умолчанию, если шрифт не готов:

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

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

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

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

Тестирование

Следующие ссылки проверяют «стандартную версию» на соответствие оптимизированной:

• стандарт
• оптимизированный

Результаты

По умолчанию

Оптимизированное поведение

Вывод

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

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