Уменьшить размер веб-шрифта

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Ilya Grigorik

Jeremy Wagner

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

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

Анатомия веб-шрифта

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

При выборе шрифта важно учитывать, какие наборы символов поддерживаются. Если вам нужно локализовать содержимое вашей страницы на несколько языков, вам следует использовать шрифт, который может обеспечить единообразный вид и опыт для ваших пользователей. Например, семейство шрифтов Noto от Google нацелено на поддержку всех языков мира. Однако обратите внимание, что общий размер Noto со всеми включенными языками составляет 1,1 ГБ+ ZIP-загрузки.

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

Форматы веб-шрифтов

Сегодня в Интернете используются два рекомендуемых формата контейнеров шрифтов:

• ЭОТ
• ТТФ
• УОФФ
• WOFF2 .

WOFF и WOFF 2.0 пользуются широкой поддержкой и поддерживаются всеми современными браузерами.

• Предоставлять версию WOFF 2.0 для современных браузеров.
• Если это абсолютно необходимо (например, если вам по-прежнему нужна поддержка Internet Explorer 11), используйте WOFF в качестве запасного варианта.
• В качестве альтернативы рассмотрите возможность не использовать веб-шрифты для устаревших браузеров и вернуться к системным шрифтам. Это может быть более производительным и для старых, более ограниченных устройств.
• Поскольку WOFF и WOFF 2.0 охватывают все современные и устаревшие браузеры, которые все еще используются, использование EOT и TTF больше не требуется и может привести к увеличению времени загрузки веб-шрифтов.

Веб-шрифты и сжатие

WOFF и WOFF 2.0 имеют встроенное сжатие. Внутреннее сжатие WOFF 2.0 использует Brotli и обеспечивает сжатие до 30% лучше, чем WOFF. Для получения дополнительной информации см. отчет об оценке WOFF 2.0 .

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

Определите семейство шрифтов с помощью @font-face

@font-face CSS AT-RULE позволяет вам определить местоположение конкретного ресурса FONT, его стиль и кодепоян Unicode, для которых он должен использоваться. Комбинация таких объявлений @font-face может использоваться для построения «семейства шрифтов», которую браузер будет использовать для оценки того, какие ресурсы шрифтов необходимо загрузить и применять на текущей странице.

Рассмотрите вариант с переменным шрифтом

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

Вариативные шрифты теперь поддерживаются всеми современными браузерами. Подробнее см. Введение в вариативные шрифты в Интернете .

Выберите правильный формат

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Во-первых, обратите внимание, что приведенные выше примеры определяют одно семейство Awesome Font с двумя стилями (normal и italic ), каждый из которых указывает на другой набор ресурсов шрифта. В свою очередь, каждый дескриптор src содержит приоритетный, разделенный запятыми список вариантов ресурсов:

• Директива local() позволяет ссылаться, загружать и использовать локально установленные шрифты. Если у пользователя уже установлен шрифт в системе, это полностью обходит сеть и является самым быстрым.
• Директива url() позволяет загружать внешние шрифты и может содержать необязательную подсказку format() указывающую формат шрифта, на который ссылается предоставленный URL.

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

1. Браузер выполняет макет страницы и определяет, какие варианты шрифтов требуются для отображения указанного текста на странице. Шрифты, которые не являются частью CSS Object Model (CSSOM) страницы, не загружаются браузером, поскольку они не требуются.
2. Для каждого требуемого шрифта браузер проверяет, доступен ли шрифт локально.
3. Если шрифт недоступен локально, браузер перебирает внешние определения:
   • Если подсказка о формате присутствует, браузер проверяет, поддерживает ли он подсказку, прежде чем начать загрузку. Если браузер не поддерживает подсказку, браузер переходит к следующей.
   • Если подсказка о формате отсутствует, браузер загружает ресурс.

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

Подмножество диапазона Unicode

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

Дескриптор unicode-range позволяет указать список значений диапазона, разделенных запятыми, каждое из которых может быть в одной из трех различных форм:

• Один код (например, U+416 )
• Диапазон интервалов (например, U+400-4ff ): указывает начальную и конечную кодовые точки диапазона.
• Диапазон подстановочных знаков (например, U+4?? ): символы ? обозначают любую шестнадцатеричную цифру

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

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

1. Определите, какие подмножества необходимы:
   • Если браузер поддерживает поднабор unicode-range, то он автоматически выберет правильный поднабор. Страница должна просто предоставить файлы поднаборов и указать соответствующие unicode-range в правилах @font-face .
   • Если браузер не поддерживает подмножества диапазона Unicode, то на странице необходимо скрыть все ненужные подмножества; то есть разработчик должен указать требуемые подмножества.
2. Генерация подмножеств шрифтов:
   • Используйте инструмент с открытым исходным кодом pyftsubset для подмножества и оптимизации шрифтов.
   • Некоторые серверы шрифтов, такие как Google Font, по умолчанию автоматически создают поднаборы.
   • Некоторые службы шрифтов позволяют вручную поднабор с помощью пользовательских параметров запроса, которые вы можете использовать для ручного указания требуемого поднабора для вашей страницы. Ознакомьтесь с документацией вашего поставщика шрифтов.

Выбор и синтез шрифтов

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

На приведенной выше диаграмме показано семейство шрифтов, предлагающее три различных варианта жирного начертания:

• 400 (обычный).
• 700 (жирный).
• 900 (особо жирный).

Все остальные промежуточные варианты (обозначенные серым цветом) автоматически сопоставляются браузером с наиболее близким вариантом.

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

Алгоритм сопоставления шрифтов CSS

Аналогичная логика применима к курсивным вариантам. Дизайнер шрифта контролирует, какие варианты он будет создавать, а вы контролируете, какие варианты будете использовать на странице. Поскольку каждый вариант — это отдельная загрузка, хорошей идеей будет сохранить небольшое количество вариантов. Например, вы можете определить два жирных варианта для семейства шрифтов Awesome Font :

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

В приведенном выше примере объявляется семейство шрифтов Awesome Font , состоящее из двух ресурсов, которые охватывают один и тот же набор латинских глифов ( U+000-5FF ), но предлагают два разных «начертания»: обычное (400) и полужирное (700). Однако что произойдет, если одно из ваших правил CSS задаст другой начертание шрифта или установит свойство font-style на italic ?

• Если точное совпадение шрифта недоступно, браузер подставляет наиболее близкое совпадение.
• Если стилистического соответствия не найдено (например, в приведенном выше примере не было объявлено ни одного курсивного варианта), то браузер синтезирует свой собственный вариант шрифта.

Пример выше иллюстрирует разницу между фактическими и синтезированными результатами шрифта Open Sans. Все синтезированные варианты генерируются из одного шрифта с весом 400. Как вы можете видеть, в результатах есть заметная разница. Подробности того, как генерировать жирные и наклонные варианты, не указаны. Поэтому результаты различаются от браузера к браузеру и сильно зависят от шрифта.

Контрольный список оптимизации размера веб-шрифта

• Аудит и мониторинг использования шрифтов: не используйте слишком много шрифтов на своих страницах и для каждого шрифта минимизируйте количество используемых вариантов. Это помогает создать более последовательный и быстрый опыт для ваших пользователей.
• По возможности избегайте устаревших форматов: форматы EOT, TTF и WOFF больше, чем WOFF 2.0. EOT и TTF — совершенно ненужные форматы, тогда как WOFF может быть приемлемым, если вам нужна поддержка Internet Explorer 11. Если вы нацелены только на современные браузеры, использование только WOFF 2.0 — самый простой и производительный вариант.
• Подмножество ресурсов шрифтов: многие шрифты можно подмножествовать или разбить на несколько диапазонов Unicode, чтобы предоставить только те глифы, которые требуются для конкретной страницы. Это уменьшает размер файла и повышает скорость загрузки ресурса. Однако при определении подмножеств будьте осторожны, чтобы оптимизировать повторное использование шрифтов. Например, не загружайте разные, но перекрывающиеся наборы символов на каждой странице. Хорошей практикой является подмножество на основе скрипта: например, латиницы и кириллицы.
• Отдайте приоритет local() в списке src : указание local('Font Name') первым в списке src гарантирует, что HTTP-запросы не будут выполняться для шрифтов, которые уже установлены.
• Используйте Lighthouse для проверки сжатия текста .

Влияние на отрисовку наибольшего содержимого (LCP) и кумулятивный сдвиг макета (CLS)

В зависимости от содержимого вашей страницы текстовые узлы могут считаться кандидатами на Largest Contentful Paint (LCP) . Поэтому крайне важно убедиться, что ваши веб-шрифты как можно меньше, следуя советам в этой статье, чтобы ваши пользователи увидели текст на вашей странице как можно скорее .

Если вы обеспокоены тем, что, несмотря на ваши усилия по оптимизации, текст страницы может отображаться слишком долго из-за большого ресурса веб-шрифта, свойство font-display имеет ряд настроек, которые помогут вам избежать невидимого текста во время загрузки шрифта. Однако использование значения swap может привести к значительным сдвигам макета, которые повлияют на кумулятивный сдвиг макета (CLS) вашего сайта. Рассмотрите возможность использования optional или fallback значений, если это возможно.

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