В предыдущих модулях вы узнали, как оптимизировать 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="/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 запроса, содержащий только кодовые точки Юникода, необходимые для вашего веб-сайта. Например, если на вашем сайте есть отображаемый веб-шрифт, которому требуется лишь небольшое количество символов, необходимых для фразы «Добро пожаловать», вы можете запросить это подмножество через 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 посредством разделения кода. . Поступая таким образом, вы можете минимизировать конфликты между полосой пропускания и процессором на этапе запуска страницы — периоде времени, в течение которого пользователи с большой вероятностью будут с ней взаимодействовать.