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

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

Системные шрифты или «веб-безопасные шрифты» — это шрифты, которые чаще всего предварительно устанавливаются в операционных системах. Например, Arial и Georgia входят в состав дистрибутивов Windows, macOS и Linux.

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

Шрифты Google уже оптимизированы

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

Посмотрим на Roboto, GitHub нам говорит, что обычный вариант весит 168кб.

Однако, если я запрошу тот же вариант шрифта из API, мне будет предоставлен этот файл. Который всего 11кб. Как это может быть?

Когда браузер делает запрос к API, Google сначала проверяет, какие типы файлов поддерживает браузер. Я использую последнюю версию Chrome, которая, как и большинство браузеров, поддерживает WOFF2, поэтому шрифт предоставляется мне в этом сильно сжатом формате.

Если я изменю свой пользовательский агент на Internet Explorer 11, вместо этого мне будет предоставлен шрифт в формате WOFF.

Наконец, если я изменю свой пользовательский агент на IE8, я получу шрифт в формате EOT (Embedded OpenType).

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

— Илья Григорик, Оптимизация веб-шрифтов

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

Кэширование браузера

Еще одна встроенная оптимизация Google Fonts — кэширование браузера.

Из-за вездесущего характера Google Fonts браузеру не всегда нужно загружать полные файлы шрифтов. SmashingMagazine, например, использует шрифт под названием «Mija». Если ваш браузер впервые видит этот шрифт, ему нужно будет загрузить его полностью перед отображением текста, но при следующем посещении веб-сайта с использованием этого шрифта , браузер будет использовать кешированную версию.

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

— Часто задаваемые вопросы, Google Шрифты

Срок действия кеша браузера Google Fonts истекает через год, если кеш не будет очищен раньше.

Примечание. Mija не является шрифтом Google, но принципы кэширования не зависят от поставщика.

Возможна дальнейшая оптимизация

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

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

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

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

2. Исключить варианты

Благодаря высокому стандарту качества Google Fonts, многие семейства шрифтов содержат полный спектр доступных начертаний:

• Тонкий (100)
• Тонкий курсив (100i)
• Свет (300)
• Светлый курсив (300i)
• Обычный (400)
• Обычный курсив (400i)
• Средний (600)
• Средний курсив (600i)
• Жирный (700)
• Жирный курсив (700i)
• Черный (800)
• Черный курсив (800i)

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

Например, семейство шрифтов Roboto весит ~144 КБ. Однако, если вы используете только варианты Regular, Regular Italic и Bold, это число сократится до ~ 36 КБ. Экономия 75%!

Код по умолчанию для реализации Google Fonts выглядит следующим образом:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Если вы это сделаете, он загрузит только «обычный вариант 400». Это означает, что весь светлый, полужирный и курсивный текст не будет отображаться правильно.

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

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Веб-сайт редко будет использовать все варианты шрифта от тонкого (100) до черного (900), оптимальная стратегия — указать только те веса, которые вы планируете использовать:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

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

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Комбинируйте запросы

Фрагмент кода, с которым мы работали выше, обращается к серверам Google ( fonts.googleapis.com ), что называется HTTP-запросом. Вообще говоря, чем больше HTTP-запросов нужно сделать вашей веб-странице, тем дольше она будет загружаться.

Если вы хотите загрузить два шрифта, вы можете сделать что-то вроде этого:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Это сработает, но браузер сделает два запроса. Мы можем оптимизировать это, объединив их в один запрос следующим образом:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

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

4. Подсказки по ресурсам

Подсказки ресурсов — это функция, поддерживаемая современными браузерами, которая может повысить производительность веб-сайта. Мы рассмотрим два типа подсказок ресурсов: «Предварительная выборка DNS» и «Предварительное подключение».

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

Предварительная выборка DNS

Предварительная выборка DNS позволяет браузеру начать подключение к Google Fonts API ( fonts.googleapis.com ), как только страница начнет загружаться. Это означает, что к тому моменту, когда браузер готов сделать запрос, часть работы уже сделана.

Чтобы реализовать предварительную выборку DNS для Google Fonts, вы просто добавляете эту строку на свои веб-страницы <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Предварительное подключение

Если вы посмотрите на код встраивания Google Fonts, то увидите, что это один HTTP-запрос:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Однако, если мы посетим этот URL-адрес, мы увидим еще три запроса на другой URL-адрес, https://fonts.gstatic.com. Один дополнительный запрос для каждого варианта шрифта.

Проблема с этими дополнительными запросами заключается в том, что браузер не начнет процессы для их выполнения, пока не будет выполнен первый запрос к https://fonts.googleapis.com/css . Здесь на помощь приходит Preconnect.

Preconnect можно описать как расширенную версию предварительной выборки. Он устанавливается на конкретный URL-адрес, который браузер собирается загрузить. Вместо того, чтобы просто выполнять поиск DNS, он также завершает согласование TLS и рукопожатие TCP.

Как и предварительная выборка DNS, ее можно реализовать с помощью одной строки кода:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

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

5. Размещайте шрифты локально

Шрифты Google находятся под лицензией «Свободное» или «Свободное программное обеспечение», что дает вам право использовать, изменять и распространять шрифты без запроса разрешения. Это означает, что вам не нужно использовать хостинг Google, если вы этого не хотите — вы можете самостоятельно разместить шрифты!

Все файлы шрифтов доступны на Github. Также доступен zip-файл, содержащий все шрифты (387 МБ).

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

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

Обратите внимание на параметр lastModified в API. Шрифты регулярно модифицируются и улучшаются.

6. Отображение шрифта

Мы знаем, что браузеру требуется время для загрузки Google Fonts, но что происходит с текстом до того, как он будет готов? Долгое время браузер показывал пустое место там, где должен быть текст, также известный как «FOIT» (Flash of Invisible Text).

Рекомендуемое чтение : «FOUT, FOIT, FOFT» Криса Койера.

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

Добавив font-display: swap; к объявлению @font-face, мы говорим браузеру показывать запасной шрифт до тех пор, пока шрифт Google не будет доступен.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

В 2019 году Google объявил, что добавит поддержку font-display: swap. Вы можете приступить к реализации этого прямо сейчас, добавив дополнительный параметр к URL-адресу шрифтов:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Используйте Text параметр

Малоизвестная функция Google Fonts API — text параметр. Этот редко используемый параметр позволяет загружать только те символы, которые вам нужны.

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

Это работает следующим образом:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Очевидно, что этот метод очень специфичен и имеет лишь несколько реальных применений. Однако, если вы можете его использовать, он может сократить вес шрифта до 90%.

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

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Подведение итогов

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

Сколько из вышеперечисленного вы пробовали? Дайте мне знать в разделе комментариев.