Оптимизация производительности шрифтов Google

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

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

Что такое шрифты Google?

Шрифты Google — это специально подобранная коллекция глифов, из которых создаются шрифты для использования на веб-сайтах. Они специально разработаны для использования в Интернете, отсюда и название веб-шрифты.

Запущенный как Google Web Fonts в 2010 году и содержащий около 30 шрифтов, Google Fonts теперь насчитывает около 17 миллиардов шрифтов и в настоящее время поддерживает около 57% всех веб-сайтов. Google Fonts, которые являются полностью бесплатными, регистрируют около 500 000 просмотров каждую секунду на момент написания этой статьи и накопили более 37 триллионов просмотров с 2010 года.

Использование шрифтов Google на вашем веб-сайте позволяет вам не ограничиваться системными шрифтами или «веб-безопасными шрифтами», такими как Arial и Georgia, которые в основном предустановлены во всех операционных системах.

Как внедрить шрифты Google

Реализация Google Fonts на веб-сайте выполняется с использованием интерфейса прикладного программирования (API) со ссылкой на выбранный пользователем шрифт (шрифты). Этот API, предлагаемый Google, может быть встроен в ваш HTML-документ с использованием стандартного тега ссылки CSS или синтаксиса для импорта. Ниже приведен пример API для реализации Baloo Chettan 2.

Использование стандартного тега ссылки CSS

Использование синтаксиса импорта
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

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

семейство шрифтов : «Baloo Chettan 2», курсив;

Важность оптимизации производительности Google Font

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

Вес шрифта

Каждый шрифт имеет вес, который может негативно повлиять на задержку вашего сайта. Например, шрифт Google Baloo Chettan 2 имеет общий размер 720 КБ. Это означает, что вам нужно учитывать примерно 9 МБ при загрузке вашего веб-сайта, если вы должны использовать все семейство шрифтов Baloo (19) со всеми доступными языками и вариантами на вашем веб-сайте. Конечно, это неидеально и не имеет ничего общего с оптимизацией веб-шрифтов. Однако ошибиться означает заставить посетителей вашего сайта ждать несколько секунд, прежде чем они смогут увидеть какой-либо текст на вашем сайте.

Формат шрифта

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

EOT поддерживается только IE. Chrome и Opera имеют наибольшую поддержку большинства форматов, в то время как около 86 процентов всех браузеров поддерживают формат WOFF. Для этого может потребоваться включить все форматы шрифтов для каждого шрифта, который вы хотите использовать. Идея состоит в том, чтобы обеспечить согласованный опыт, гарантируя, что все браузеры могут отображать каждый шрифт.

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

Оптимизация производительности Google Font

Оптимизация Google Font начинается с размещения вашего Font API и формата запроса, вплоть до рендеринга. Вот простые приемы оптимизации шрифтов Google.

Предварительно загрузить ресурсы Google Font

Настоятельно рекомендуется использовать новую функцию веб-платформы: <link rel="preload"> , которая позволяет загружать веб-шрифты заранее. Эта функция позволяет вам обойти поведение браузера по умолчанию, которое обычно задерживает рендеринг текста, сначала создавая дерево рендеринга, чтобы узнать, какие ресурсы шрифта ему нужны, прежде чем получить доступ к ссылке на ресурс.

<link rel="preload"> обычно включается в <head> вашего HTML, чтобы инициировать запрос на ваши шрифты достаточно рано, не дожидаясь создания CSSOM. Эта функция только дает браузеру предварительную информацию о том, что ваши веб-шрифты скоро потребуются, не предоставляя никакой информации о том, как они будут использоваться.

Кроме того, рекомендуется использовать подходящее определение CSS @font-face вместе с функцией предварительной загрузки, чтобы информировать браузер о том, как использовать URL-адрес ресурса. См. пример в следующем пункте.

Используйте один запрос для нескольких шрифтов

Еще одна хорошая мера для оптимизации шрифтов Google — объединение нескольких запросов шрифтов в один тег. Не включать отдельный тег <link> для каждого шрифта, тем самым отправляя несколько запросов разными пакетами. Чтобы объединить запросы шрифтов, просто разделите шрифты в API с помощью | персонаж. Однако этого также можно добиться, просто выбрав сразу все нужные шрифты на странице шрифтов Google.

Неверный формат запросов шрифта:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Рекомендуемый формат запросов шрифтов:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

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

Оптимизированные форматы шрифтов для всех браузеров

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

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

Используйте оптимальные параметры сжатия для WOFF, который имеет встроенное сжатие, и прибегайте к настраиваемым алгоритмам предварительной обработки и сжатия для доставки WOFF2 с уменьшением размера файла примерно на 30%.

Пример объявления CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Примечание. src: указывает на несколько вариантов ресурсов, в то время как url() позволяет загружать внешние шрифты, а local() позволяет получать шрифты локально. format() указывает формат шрифта в конкретном URL-адресе.

Дайте приоритет local() в вашем списке src

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

Если вы посмотрите на приведенный выше пример объявления CSS @font-face, вы заметите, что local() возглавляет список вариантов ресурсов, разделенных запятыми, в дескрипторе src:. Эта расстановка приоритетов преднамеренна, и идея состоит в том, чтобы отправить браузер пользователя к первому локальному источнику шрифта, прежде чем выбрать их загрузку, если он недоступен локально.

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

Настройка рендеринга шрифта: CSS font-display

Управление производительностью шрифтов с помощью дескриптора font-display для @font-face позволяет вам решать, как должны отображаться ваши шрифты Google, в зависимости от того, сколько времени требуется для загрузки. Изначально веб-браузеры имеют настройки по умолчанию, что делать, когда шрифты загружаются слишком долго. Большинство из них устанавливают тайм-аут, после которого они используют резервный шрифт, но, к сожалению, их период тайм-аута отличается.

Новое свойство font-display в настоящее время поддерживает пять диапазонов значений: auto | блок | обмен | резерв | по желанию

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

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

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

Пример: для свойства font-display установлено значение swap
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Значение подкачки можно увидеть реализованным в самых первых строках кода (Google Font API), используемого для демонстрации того, как связать шрифты Google в вашем HTML-документе.

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

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

Ограничьте семейство шрифтов и варианты

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

Наличие нескольких вариантов, таких как курсив , обычный, полужирный и т. д., не обязательно означает, что у вас есть «выбор» для включения их в загрузку. Сократите загрузку до нужного варианта и не добавляйте слишком много. Было бы расточительно загружать полный вариант, потому что вы хотите использовать только одно слово из него. Вот тут-то и пригодится следующий трюк оптимизации для Google Fonts.

Используйте текстовый параметр

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

Предположим, вы хотите использовать только две буквы шрифта в названии вашей компании, как в примере ниже. Я использовал разные шрифты для букв C и N:

Название компании

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

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

В заключение

Оптимизация шрифтов Google — важная стратегия повышения общей производительности веб-сайта.

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

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