Оптимизируйте веб-шрифты для Core Web Vitals.
В этом документе обсуждаются лучшие практики повышения производительности шрифтов. Веб-шрифты влияют на производительность различными способами:
- Задержка отрисовки текста: Если веб-шрифт еще не загружен, браузеры обычно задерживают отрисовку текста. Во многих случаях это задерживает первую отрисовку контента (First Contentful Paint, FCP) . В некоторых случаях это задерживает и самую крупную отрисовку контента (Largest Contentful Paint, LCP) .
- Сдвиги в расположении элементов: практика замены шрифтов может вызывать сдвиги в расположении элементов и влиять на совокупный сдвиг в расположении элементов (CLS) . Эти сдвиги происходят, когда веб-шрифт и его резервный шрифт занимают разное количество места на странице.
Данный документ состоит из трех разделов: загрузка шрифта , доставка шрифта и рендеринг шрифта . В каждом разделе объясняется, как работает тот или иной аспект жизненного цикла шрифта, и приводятся соответствующие рекомендации по его использованию.
Загрузка шрифта
Шрифты — важный ресурс. Без них пользователь может не видеть содержимое страницы. Поэтому лучшие практики загрузки шрифтов, как правило, направлены на обеспечение их загрузки как можно раньше. Особое внимание следует уделять шрифтам, загружаемым со сторонних сайтов, поскольку для скачивания таких файлов шрифтов требуется отдельная настройка подключения.
Если вы не уверены, запрашиваются ли шрифты вашей страницы вовремя, проверьте вкладку «Время» в панели «Сеть» в инструментах разработчика Chrome для получения дополнительной информации.
Поймите @font-face
Прежде чем перейти к лучшим практикам загрузки шрифтов, важно понять, как работает @font-face и как он влияет на загрузку шрифтов.
Объявление @font-face является неотъемлемой частью работы с любым веб-шрифтом. Как минимум, оно объявляет имя, используемое для ссылки на шрифт, и указывает местоположение соответствующего файла шрифта.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Распространенное заблуждение заключается в том, что шрифт запрашивается при обнаружении объявления @font-face . Это неверно. Само по себе объявление @font-face не запускает загрузку шрифта. Скорее, шрифт загружается только в том случае, если на него ссылается стиль, используемый на странице. Например:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
В этом примере шрифт Open Sans будет загружен только в том случае, если страница содержит элемент <h1> .
Таким образом, при оптимизации шрифтов важно уделять таблицам стилей столько же внимания, сколько и самим файлам шрифтов. Изменение содержимого или способа доставки таблиц стилей может существенно повлиять на время загрузки шрифтов. Аналогично, удаление неиспользуемого CSS и разделение таблиц стилей может уменьшить количество шрифтов, загружаемых страницей.
Встроенные объявления шрифтов
Большинству сайтов было бы гораздо полезнее встраивать объявления шрифтов и другие важные стили в <head> основного документа, а не включать их во внешнюю таблицу стилей. Это позволяет браузеру быстрее обнаруживать объявления шрифтов, поскольку ему не нужно ждать загрузки внешней таблицы стилей.
<head>
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
body {
font-family: "Open Sans";
}
...etc.
</style>
</head>
Встраивание критически важных CSS-стилей может быть более сложной техникой, доступной не на всех сайтах. Преимущества в производительности очевидны, но требуют дополнительных процессов и инструментов сборки, чтобы гарантировать правильное встраивание необходимых CSS-стилей, и в идеале только критически важных, а также чтобы любые дополнительные CSS-стили доставлялись без блокировки рендеринга.
Предварительное подключение к важным сторонним источникам
Если ваш сайт загружает шрифты со стороннего ресурса, настоятельно рекомендуется использовать подсказку ресурса preconnect для установления раннего соединения с источником стороннего ресурса. Подсказки ресурсов следует размещать в разделе <head> документа. Следующая подсказка ресурса устанавливает соединение для загрузки таблицы стилей шрифта.
<head>
<link rel="preconnect" href="https://fonts.com">
</head>
Для предварительного подключения к источнику, используемому для загрузки файла шрифта, добавьте отдельную подсказку ресурса preconnect , использующую атрибут crossorigin . В отличие от таблиц стилей, файлы шрифтов должны передаваться через CORS-соединение .
<head>
<link rel="preconnect" href="https://fonts.com">
<link rel="preconnect" href="https://fonts.com" crossorigin>
</head>
При использовании подсказки ресурса preconnect следует помнить, что поставщик шрифтов может предоставлять таблицы стилей и шрифты из разных источников. Например, так подсказка ресурса preconnect будет использоваться для Google Fonts.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
Будьте осторожны при использовании preload загрузки шрифтов.
Хотя preload очень эффективна для того, чтобы шрифты были доступны на ранних этапах загрузки страницы, это происходит за счет отвлечения ресурсов браузера от загрузки других ресурсов.
Встраивание объявлений шрифтов и корректировка таблиц стилей могут оказаться более эффективным подходом. Эти корректировки ближе к решению первопричины появления шрифтов, обнаруженных в последнее время, чем просто предоставление обходного пути.
Кроме того, использование preload в качестве стратегии загрузки шрифтов также следует применять с осторожностью, поскольку она обходит некоторые встроенные в браузер стратегии согласования содержимого. Например, preload игнорирует объявления unicode-range , и при разумном использовании ее следует применять только для загрузки одного формата шрифта.
Однако при использовании внешних таблиц стилей предварительная загрузка наиболее важных шрифтов может быть очень эффективной, поскольку в противном случае браузер не узнает, нужен ли ему шрифт, до гораздо более позднего времени.
Доставка шрифтов
Более быстрая доставка шрифта приводит к более быстрой отрисовке текста. Кроме того, если шрифт доставляется достаточно рано, это может помочь избежать смещений макета, возникающих из-за замены шрифтов.
Используйте шрифты, размещенные на собственном сервере.
Теоретически, использование шрифтов, размещенных на собственном сервере, должно обеспечивать лучшую производительность, поскольку исключает необходимость подключения к сторонним сервисам. На практике же разница в производительности между этими двумя вариантами менее очевидна. Например, исследование Web Almanac показало, что сайты, использующие шрифты сторонних разработчиков, отображались быстрее, чем сайты, использующие собственные шрифты.
Если вы рассматриваете возможность использования шрифтов, размещенных на собственном сервере, убедитесь, что ваш сайт использует сеть доставки контента (CDN) и протокол HTTP/2 . Без использования этих технологий вероятность того, что шрифты, размещенные на собственном сервере, обеспечат лучшую производительность, значительно снижается.
Если вы используете шрифт, размещенный на собственном сервере, рекомендуется также применить некоторые оптимизации файлов шрифтов, которые обычно автоматически предоставляют сторонние поставщики шрифтов. Например, подмножество шрифтов и сжатие WOFF2. Объем работы, необходимый для применения этих оптимизаций, в некоторой степени зависит от языков, поддерживаемых вашим сайтом. В частности, следует учитывать, что оптимизация шрифтов для языков китайского, японского и корейского языков может быть особенно сложной задачей.
Используйте WOFF2
Среди современных шрифтов WOFF2 — самый новый, он имеет самую широкую поддержку браузеров и обеспечивает наилучшее сжатие. Благодаря использованию Brotli, WOFF2 сжимает данные на 30% лучше, чем WOFF, что приводит к меньшему объему загружаемых данных и, следовательно, к более высокой скорости работы.
Учитывая поддержку браузерами, эксперты теперь рекомендуют использовать только WOFF2:
Более того, мы считаем, что пришло время заявить: используйте только WOFF2 и забудьте обо всем остальном.
Брэм Стайн, из «Веб-альманаха» 2022 года.
Это значительно упростит ваш CSS и рабочий процесс, а также предотвратит случайную двойную или некорректную загрузку шрифтов. WOFF2 теперь поддерживается везде. Поэтому, если вам не нужна поддержка действительно устаревших браузеров, просто используйте WOFF2. Если это невозможно, рассмотрите возможность вообще не предоставлять веб-шрифты этим старым браузерам. Это не будет проблемой, если у вас есть надежная стратегия резервного копирования. Посетители, использующие старые браузеры, увидят ваши резервные шрифты.
Подмножество шрифтов
Файлы шрифтов обычно содержат большое количество глифов для всех поддерживаемых ими символов. Но вам могут не понадобиться все символы на странице, и вы можете уменьшить размер файлов шрифтов, выбрав подмножества шрифтов.
Дескриптор unicode-range в объявлении @font-face сообщает браузеру, для каких символов можно использовать шрифт.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}
Файл шрифта загружается, если страница содержит один или несколько символов, соответствующих диапазону юникода. unicode-range обычно используется для предоставления разных файлов шрифтов в зависимости от языка, используемого в содержимом страницы.
unicode-range часто используется в сочетании с методом создания подмножеств. Подмножество шрифта включает меньшую часть глифов, содержащихся в исходном файле шрифта. Например, вместо того, чтобы предоставлять все символы всем пользователям, сайт может создавать отдельные подмножества шрифтов для латинских и кириллических символов.
Количество глифов в каждом шрифте сильно варьируется:
- Латинские шрифты обычно содержат от 100 до 1000 символов на шрифт.
- Шрифты CJK могут содержать более 10 000 символов.
Удаление неиспользуемых глифов может значительно уменьшить размер файла шрифта.
Некоторые поставщики шрифтов могут автоматически предоставлять разные версии файлов шрифтов с различными подмножествами. Например, Google Fonts делает это по умолчанию:
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
При переходе на самостоятельное размещение сайта эта оптимизация может быть упущена, что приведет к увеличению размера локальных файлов шрифтов.
Вы можете вручную создавать подмножества шрифтов, если ваш поставщик шрифтов это позволяет, либо с помощью API ( Google Fonts поддерживает это, предоставляя text параметр ), либо путем ручного редактирования файлов шрифтов и последующего их самостоятельного размещения. Инструменты для создания подмножеств шрифтов включают subfont и glyphanger .
Всегда проверяйте лицензии на шрифты, чтобы убедиться, что они разрешают создание подмножеств и самостоятельное размещение.
Используйте меньше веб-шрифтов.
Самый быстрый способ получить шрифт — это тот, который изначально не запрашивался. Системные шрифты и вариативные шрифты — это два способа потенциально сократить количество веб-шрифтов, используемых на вашем сайте.
Системный шрифт — это шрифт по умолчанию, используемый пользовательским интерфейсом устройства пользователя. Системные шрифты обычно различаются в зависимости от операционной системы и её версии. Поскольку шрифт уже установлен, его не нужно скачивать. Системные шрифты особенно хорошо подходят для основного текста.
Чтобы использовать системный шрифт в CSS, укажите system-ui в качестве семейства шрифтов:
font-family: system-ui
Идея вариативных шрифтов заключается в том, что один вариативный шрифт может использоваться в качестве замены нескольких файлов шрифтов. Вариативные шрифты работают путем определения «стиля шрифта по умолчанию» и предоставления «осей» для управления шрифтом. Например, вариативный шрифт с осью « Weight » может использоваться для реализации надписей, для которых ранее требовались отдельные шрифты для светлого, обычного, жирного и сверхжирного шрифта.
Не всем выгодно переходить на вариативные шрифты. Вариативные шрифты содержат множество стилей, поэтому обычно имеют больший размер файла, чем отдельные невариативные шрифты, содержащие только один стиль. Наибольшее улучшение от использования вариативных шрифтов получат сайты, которые используют (и нуждаются в использовании) различные стили и толщины шрифтов.
Отображение шрифта
При обнаружении веб-шрифта, который еще не загрузился, браузер сталкивается с дилеммой: следует ли ему отложить отображение текста до тех пор, пока веб-шрифт не будет загружен? Или же следует отображать текст резервным шрифтом до тех пор, пока веб-шрифт не будет загружен?
Разные браузеры обрабатывают эту ситуацию по-разному. По умолчанию браузеры на основе Chromium и Firefox блокируют отрисовку текста на срок до 3 секунд, если соответствующий веб-шрифт не загрузился. Safari блокирует отрисовку текста на неопределенный срок.
Это поведение можно настроить с помощью атрибута font-display . Такой выбор может иметь существенные последствия: font-display потенциально может повлиять на LCP, FCP и стабильность макета.
Выберите подходящую стратегию font-display
font-display сообщает браузеру, как ему следует поступать с отображением текста, если соответствующий веб-шрифт еще не загружен. Он определяется для каждого параметра `font-face`.
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
Для font-display возможны пять значений:
| Ценить | Блоковый период | Период обмена |
|---|---|---|
| Авто | Зависит от браузера | Зависит от браузера |
| Блокировать | 2-3 секунды | Бесконечность |
| Менять | 0 мс | Бесконечность |
| Отступать | 100 мс | 3 секунды |
| Необязательный | 100 мс | Никто |
- Период блокировки : Период блокировки начинается, когда браузер запрашивает веб-шрифт. В течение периода блокировки, если веб-шрифт недоступен, отображается невидимый резервный шрифт, и, таким образом, текст невидим для пользователя. Если шрифт недоступен по истечении периода блокировки, отображается резервный шрифт.
- Период замены : Период замены наступает после периода блокировки. Если веб-шрифт становится доступен в течение периода замены, он "заменяется".
Стратегии font-display отражают различные точки зрения на компромисс между производительностью и эстетикой. Поэтому сложно рекомендовать какой-либо конкретный подход, поскольку он зависит от индивидуальных предпочтений, от того, насколько важен веб-шрифт для страницы и бренда, и от того, насколько неестественно может выглядеть замена на новый шрифт, появившийся с опозданием.
Для большинства сайтов наиболее подходящими являются три стратегии, в зависимости от ваших главных приоритетов:
Производительность : используйте
font-display: optional. Это наиболее «производительный» подход: задержка отрисовки текста составляет не более 100 мс, и гарантируется отсутствие сдвигов в макете, связанных с заменой шрифтов. Недостаток заключается в том, что веб-шрифт не будет использоваться, если он поступит с задержкой.Быстро отображайте текст, используя при этом веб-шрифт : используйте
font-display: swap, но убедитесь, что шрифт доставляется достаточно рано, чтобы это не вызвало смещения макета. Недостаток этого варианта — резкое смещение при задержке доставки шрифта.Текст отображается веб-шрифтом : используйте
font-display: block, но убедитесь, что шрифт загружается достаточно рано, чтобы минимизировать задержку отображения текста. Первоначальное отображение текста задерживается. Несмотря на эту задержку, это все равно может вызвать смещение макета, поскольку текст фактически отображается невидимым, и резервное пространство шрифта используется для резервирования места. После загрузки веб-шрифта может потребоваться другое пространство, что приведет к смещению. Это может быть менее резким смещением, чем приfont-display: swap, поскольку сам текст не будет заметно смещаться.
Также имейте в виду, что эти два подхода можно комбинировать: например, используйте font-display: swap на элементы фирменного стиля и другие визуально отличительные элементы страницы. Используйте font-display: optional для шрифтов, используемых в основном тексте.
Иконочные шрифты
Стратегии font-display , хорошо работающие для обычных веб-шрифтов, не так эффективны для иконочных шрифтов. Запасной шрифт для иконочного шрифта обычно значительно отличается от самого иконочного шрифта, и его символы могут передавать совершенно другое значение. В результате иконочные шрифты с большей вероятностью вызывают значительные изменения в макете.
Кроме того, использование резервного шрифта может быть нецелесообразным. По возможности замените шрифты с иконками на SVG, что также лучше с точки зрения доступности. Более новые версии популярных шрифтов с иконками обычно поддерживают SVG. Для получения дополнительной информации о переходе на SVG см. страницу Font Awesome о SVG-спрайтах и наше руководство по Material Icons .
Уменьшите разрыв между резервным шрифтом и веб-шрифтом.
Для уменьшения влияния CLS можно использовать атрибуты size-adjust .
Заключение
Веб-шрифты по-прежнему являются узким местом в плане производительности, но у нас есть постоянно расширяющийся набор вариантов, позволяющих оптимизировать их для максимально возможного снижения этого ограничения.