Предварительная загрузка веб-шрифтов для повышения скорости загрузки.

В этой лаборатории кода показано, как предварительно загрузить веб-шрифты с помощью rel="preload" чтобы удалить любые вспышки нестилизованного текста (FOUT).

Мера

Прежде чем добавлять какие-либо оптимизации, сначала измерьте производительность веб-сайта.

  1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
  3. Откройте вкладку «Маяк» .
  4. Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
  5. Нажмите кнопку Создать отчет .

Созданный отчет Lighthouse покажет вам последовательность извлечения ресурсов в разделе «Максимальная задержка критического пути» .

Веб-шрифты присутствуют в критической цепочке запросов.

В приведенном выше аудите веб-шрифты являются частью критической цепочки запросов и извлекаются последними. Цепочка критических запросов представляет собой порядок ресурсов, которым присвоен приоритет и которые извлекаются браузером. В этом приложении веб-шрифты (Pacfico и Pacifico-Bold) определяются с использованием правила @font-face и являются последним ресурсом, извлекаемым браузером в критической цепочке запросов. Обычно веб-шрифты загружаются отложенно, что означает, что они не загружаются до тех пор, пока не будут загружены критически важные ресурсы (CSS, JS).

Вот последовательность ресурсов, извлекаемых в приложении:

Веб-шрифты загружаются лениво.

Предварительная загрузка веб-шрифтов

Чтобы избежать FOUT, вы можете предварительно загрузить веб-шрифты, которые необходимы немедленно. Добавьте элемент Link для этого приложения в заголовок документа:

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

Атрибуты as="font" type="font/woff2" сообщают браузеру загрузить этот ресурс как шрифт и помогают определить приоритет очереди ресурсов.

Атрибут crossorigin указывает, следует ли получать ресурс с помощью запроса CORS, поскольку шрифт может происходить из другого домена. Без этого атрибута предварительно загруженный шрифт игнорируется браузером.

Поскольку в заголовке страницы используется шрифт Pacifico-Bold, мы добавили тег предварительной загрузки, чтобы получить его еще быстрее. Предварительно загружать шрифт Pacifico.woff2 необязательно, поскольку он стилизует текст, расположенный ниже сгиба.

Перезагрузите приложение и снова запустите маяк. Проверьте раздел «Максимальная задержка критического пути» .

Веб-шрифт Pacifico-Bold предварительно загружен и удален из цепочки важных запросов.

Обратите внимание, как Pacifico-Bold.woff2 удаляется из цепочки критических запросов. Он извлекается ранее в приложении.

Веб-шрифт Pacifico-Bold предварительно загружен.

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