В предыдущих модулях вы научились оптимизировать HTML, CSS, JavaScript и медиаресурсы. В этом модуле вы познакомитесь с некоторыми методами оптимизации веб-шрифтов.
Веб-шрифты могут влиять на производительность страницы как во время загрузки, так и во время рендеринга. Загрузка больших файлов шрифтов может занять некоторое время и негативно повлиять на First Contentful Paint (FCP) , а некорректное значение font-display может вызвать нежелательные визуальные искажения при рендеринге.
Прежде чем обсуждать оптимизацию веб-шрифтов, полезно знать, как браузер их обнаруживает, чтобы понимать, как CSS предотвращает загрузку ненужных веб-шрифтов в определенных ситуациях.
Открытие
Шрифты веб-страницы определяются в таблице стилей с помощью объявления @font-face :
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Приведенный выше фрагмент кода определяет font-family с именем "Open Sans" и указывает браузеру, где найти соответствующий веб-шрифт. Для экономии трафика браузер не загружает веб-шрифт до тех пор, пока не определит, что он необходим для макета текущей страницы.
h1 {
font-family: "Open Sans";
}
В приведенном выше фрагменте CSS браузер загружает файл шрифта "Open Sans" при обработке элемента <h1> в HTML-коде страницы.
preload
Если ваши объявления @font-face определены во внешней таблице стилей, браузер сможет начать их загрузку только после того, как загрузит эту таблицу стилей. Это делает веб-шрифты поздно обнаруживаемыми ресурсами, но есть способы помочь браузеру обнаружить веб-шрифты раньше.
Вы можете инициировать предварительный запрос ресурсов веб-шрифтов, используя директиву preload . Директива preload делает веб-шрифты доступными на ранней стадии загрузки страницы, и браузер немедленно начинает их загрузку, не дожидаясь завершения загрузки и анализа таблицы стилей. Директива preload не ждет, пока шрифт понадобится на странице.
<!-- The `crossorigin` attribute is required for fonts-even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Встроенные объявления @font-face
Вы можете сделать шрифты доступными для просмотра на более раннем этапе загрузки страницы, встроив блокирующие рендеринг CSS-стили, включая объявления @font-face , в раздел <head> вашего HTML-кода с помощью элемента <style> . В этом случае браузер обнаружит веб-шрифты раньше при загрузке страницы, поскольку ему не нужно ждать загрузки внешней таблицы стилей.
Встраивание объявлений @font-face имеет преимущество перед использованием подсказки preload , поскольку браузер загружает только те шрифты, которые необходимы для отображения текущей страницы. Это исключает риск загрузки неиспользуемых шрифтов.
Скачать
После обнаружения веб-шрифтов и проверки их необходимости для текущей структуры страницы браузер может их загрузить. Количество веб-шрифтов, их кодировка и размер файла могут существенно влиять на скорость загрузки и отображения веб-шрифта браузером.
Разместите свои веб-шрифты на собственном сервере.
Веб-шрифты могут предоставляться через сторонние сервисы, такие как Google Fonts , или размещаться на вашем собственном сервере. При использовании стороннего сервиса вашей веб-странице необходимо установить соединение с доменом поставщика, прежде чем она сможет начать загрузку необходимых веб-шрифтов. Это может замедлить обнаружение и последующую загрузку веб-шрифтов.
Эти накладные расходы можно уменьшить, используя подсказку ресурса preconnect . Используя preconnect , вы можете указать браузеру открыть соединение с другим источником раньше, чем это обычно происходит:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Приведённый выше HTML-фрагмент указывает браузеру на необходимость установить соединение с fonts.googleapis.com и CORS- соединение с fonts.gstatic.com . Некоторые поставщики шрифтов, такие как Google Fonts, предоставляют ресурсы CSS и шрифтов из разных источников.
Вы можете избежать необходимости в подключении к сторонним сервисам, разместив веб-шрифты на собственном сервере. В большинстве случаев размещение веб-шрифтов на собственном сервере быстрее, чем их загрузка с другого источника. Если вы планируете размещать веб-шрифты на собственном сервере, убедитесь, что ваш сайт использует сеть доставки контента (CDN) , протокол HTTP/2 или HTTP/3 и правильно настроил заголовки кэширования для необходимых вам веб-шрифтов.
Используйте WOFF2 — и только WOFF2.
Формат WOFF2 обладает широкой поддержкой браузеров и наилучшим сжатием — до 30% лучше, чем WOFF. Уменьшенный размер файла приводит к более быстрой загрузке. Часто для полной совместимости со всеми современными браузерами достаточно только формата WOFF2.
Выберите подмножество веб-шрифтов
Веб-шрифты обычно включают в себя широкий спектр различных глифов , необходимых для представления множества символов, используемых в разных языках. Если ваша страница отображает контент только на одном языке или использует один алфавит, вы можете уменьшить размер веб-шрифтов с помощью подмножества. Часто это делается путем указания количества или диапазона кодовых точек Юникода .
Подмножество — это уменьшенный набор глифов, которые были включены в исходный файл веб-шрифта. Например, вместо отображения всех глифов, ваша страница может отображать определенное подмножество латинских символов. В зависимости от необходимого подмножества, удаление глифов может значительно уменьшить размер файла шрифта.
Некоторые поставщики веб-шрифтов, такие как Google Fonts, автоматически предлагают подмножества с помощью параметра строки запроса. Например, URL-адрес https://fonts.googleapis.com/css?family=Roboto&subset=latin предоставляет таблицу стилей с веб-шрифтом Roboto, использующим только латинский алфавит.
Если вы решили размещать свои веб-шрифты самостоятельно, следующим шагом будет создание и размещение этих подмножеств шрифтов с помощью таких инструментов, как glyphanger или subfont .
Однако, если у вас нет возможности самостоятельно размещать веб-шрифты, вы можете использовать набор веб-шрифтов, предоставляемых Google Fonts, указав дополнительный text параметр запроса, содержащий только необходимые для вашего сайта кодовые точки Unicode. Например, если на вашем сайте есть декоративный веб-шрифт, которому требуется лишь небольшое количество символов для фразы «Добро пожаловать», вы можете запросить этот набор через Google Fonts по следующему URL: https://fonts.googleapis.com/css?family=Monoton&text=Welcome . Это может значительно уменьшить объем данных веб-шрифта, необходимых для одного шрифта на вашем сайте, если такое масштабное выделение подмножества может быть полезным для вашего сайта.
Отображение шрифта
После того как браузер обнаружит и загрузит веб-шрифт, его можно будет отобразить. По умолчанию браузер блокирует отображение любого текста, использующего веб-шрифт, до тех пор, пока он не будет загружен. Вы можете настроить поведение браузера при отображении текста и указать, какой текст должен отображаться, а какой нет, до полной загрузки веб-шрифта, используя свойство CSS ` font-display .
block
Значение по умолчанию для font-display — block . При использовании block браузер блокирует отображение любого текста, использующего указанный веб-шрифт. Разные браузеры ведут себя немного по-разному. Chromium и Firefox блокируют отображение максимум на 3 секунды, после чего используют резервный вариант. Safari блокирует отображение на неопределенный срок, пока не загрузится веб-шрифт.
swap
swap — наиболее часто используемое значение font-display . swap не блокирует отрисовку и отображает текст немедленно в качестве резервного варианта, прежде чем заменить его на указанный веб-шрифт. Это позволяет отображать контент сразу, не дожидаясь загрузки веб-шрифта.
Однако недостаток swap заключается в том, что она вызывает видимое смещение контента, если резервный веб-шрифт и веб-шрифт, указанный в вашем CSS, сильно различаются по высоте строки, кернингу и другим параметрам шрифта.
Это обычно не приводит к ухудшению кумулятивного смещения макета (CLS) по сравнению с block (поскольку block требует компоновки страницы с учетом резервных шрифтов, даже если сам текст не отображается, поэтому оба режима подвержены смещению содержимого), но может выглядеть более неестественно.
fallback
Значение параметра fallback для font-display представляет собой некий компромисс между block и swap . В отличие от swap , браузер блокирует отображение шрифта, а `swap` заменяет его на резервный текст лишь на очень короткий промежуток времени. Однако, в отличие от block , период блокировки чрезвычайно короткий.
Использование fallback значения может хорошо работать в сетях с высокой скоростью загрузки, где, если веб-шрифт загружается быстро, он используется сразу же при первоначальной отрисовке страницы. Однако, если сети медленные, резервный текст отображается первым после истечения периода блокировки, а затем заменяется, когда загружается веб-шрифт.
optional
optional является наиболее строгим значением font-display и использует веб-шрифт только в том случае, если он загружается в течение 100 миллисекунд. Если загрузка веб-шрифта занимает больше времени, он не используется на странице, и браузер использует резервный шрифт для текущей навигации, пока веб-шрифт загружается в фоновом режиме и помещается в кэш браузера.
В результате, при последующих переходах по страницам веб-шрифт может использоваться сразу, поскольку он уже загружен. font-display: optional предотвращает визуальное изменение, наблюдаемое при использовании swap , но некоторые пользователи не видят веб-шрифт, если он появляется слишком поздно при первоначальном переходе по странице.
Демонстрации шрифтов
Проверьте свои знания
Когда браузер загружает ресурс веб-шрифта (при условии, что он не загружается с помощью директивы preload )?
Какой единственный (и наиболее эффективный) формат необходим для предоставления веб-шрифтов всем современным браузерам?
Далее: JavaScript с разделением кода
Освоив основы оптимизации шрифтов, вы можете перейти к следующему модулю, посвященному теме, которая имеет большой потенциал для улучшения скорости первоначальной загрузки страницы для ваших пользователей, а именно — отсрочке загрузки JavaScript за счет разделения кода . Таким образом, вы можете свести к минимуму нагрузку на пропускную способность и процессор во время запуска страницы, периода времени, когда пользователи, скорее всего, будут с ней взаимодействовать.