В предыдущих модулях вы узнали, как оптимизировать HTML, CSS, JavaScript и медиаресурсы. В этом модуле откройте для себя некоторые методы оптимизации веб-шрифтов.
Веб-шрифты могут влиять на производительность страницы как во время загрузки, так и во время рендеринга. Загрузка больших файлов шрифтов может занять некоторое время и негативно повлиять на First Contentful Paint (FCP) , в то время как неправильное значение font-display может вызвать нежелательные сдвиги макета, которые способствуют кумулятивному сдвигу макета страницы (CLS) .
Прежде чем обсуждать оптимизацию веб-шрифтов, полезно знать, как они обнаруживаются браузером, чтобы вы могли понять, как 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="/https/web.dev/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 часто является единственным, который необходим для полной совместимости с современными браузерами.
Подмножество ваших веб-шрифтов
Веб-шрифты обычно включают широкий спектр различных глифов , которые необходимы для представления широкого спектра символов, используемых в разных языках. Если ваша страница обслуживает контент только на одном языке — или использует один алфавит — вы можете уменьшить размер веб-шрифтов с помощью подмножества. Это часто делается путем указания числа — или диапазона — кодовых точек unicode .
Подмножество — это сокращенный набор глифов, которые были включены в исходный файл веб-шрифта. Например, вместо обслуживания всех глифов ваша страница может обслуживать определенное подмножество для латинских символов. В зависимости от необходимого подмножества удаление глифов может значительно уменьшить размер файла шрифта.
Некоторые поставщики веб-шрифтов, такие как Google Fonts, предлагают подмножества автоматически с помощью параметра строки запроса. Например, URL-адрес https://fonts.googleapis.com/css?family=Roboto&subset=latin предоставляет таблицу стилей с веб-шрифтом Roboto, который использует только латинский алфавит.
Если вы решили самостоятельно размещать свои веб-шрифты, следующим шагом будет создание и размещение этих подмножеств самостоятельно с помощью таких инструментов, как glyphanger или subfont .
Однако, если у вас нет возможности самостоятельно размещать собственные веб-шрифты, вы можете подмножество веб-шрифтов, предоставляемых Google Fonts, указав дополнительный параметр строки text запроса, содержащий только необходимые для вашего веб-сайта кодовые точки Unicode. Например, если на вашем сайте есть отображаемый веб-шрифт, которому требуется лишь небольшое количество символов для фразы «Welcome», вы можете запросить это подмножество через 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 вашего веб-сайта, если вы не позаботитесь об использовании подсказки preload для загрузки ресурса веб-шрифта как можно скорее или если вы не учтете другие значения font-display .
fallback
Значение fallback для font-display является чем-то вроде компромисса между block и swap . В отличие от swap браузер блокирует отображение шрифта, но подменяет резервный текст только на очень короткий период времени. Однако в отличие от block период блокировки чрезвычайно короткий.
Использование fallback значения может хорошо работать в быстрых сетях, где, если веб-шрифт загружается быстро, веб-шрифт является гарнитурой, используемой сразу при первоначальном отображении страницы. Однако, если сети медленные, резервный текст отображается первым после истечения периода блокировки, а затем заменяется, когда появляется веб-шрифт.
optional
optional — это наиболее строгое значение font-display , и использует ресурс веб-шрифта, только если он загружается в течение 100 миллисекунд. Если загрузка веб-шрифта занимает больше времени, он не используется на странице, а браузер использует резервную гарнитуру для текущей навигации, в то время как веб-шрифт загружается в фоновом режиме и помещается в кэш браузера.
В результате при последующих переходах по страницам веб-шрифт может использоваться немедленно, поскольку он уже загружен. font-display: optional позволяет избежать сдвига макета, наблюдаемого при использовании swap , но некоторые пользователи не видят веб-шрифт, если он появляется слишком поздно при первом переходе по страницам.
Демонстрации шрифтов
Проверьте свои знания
Когда браузер загружает ресурс веб-шрифта (при условии, что он не загружен с помощью директивы preload )?
Какой единственный (и наиболее эффективный) формат необходим для предоставления веб-шрифтов всем современным браузерам?
Далее: Разделение кода JavaScript
Имея за плечами понимание оптимизации шрифтов, вы можете перейти к следующему модулю, который охватывает тему, которая имеет высокий потенциал для улучшения начальной скорости загрузки страницы для ваших пользователей, а именно отсрочку загрузки JavaScript посредством разделения кода . Поступая так, вы можете поддерживать пропускную способность и нагрузку на процессор на минимально возможном уровне во время фазы запуска страницы, периода времени, в течение которого пользователи, скорее всего, будут взаимодействовать с ней.