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

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

Измерение #

Прежде чем добавлять какие-либо оптимизации, сначала измерьте, как работает веб-сайт. 1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).

  1. Click the Lighthouse tab.
  2. Make sure the Performance checkbox is selected in the Categories list.
  3. Click the Generate report button.

В сгенерированном отчете Lighthouse последовательность выборки ресурсов показана в разделе Maximum critical path latency (Максимальная задержка критического пути).

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

В приведенной выше проверке веб-шрифты являются частью цепочки критических запросов и загружаются последними. Цепочка критических запросов представляет собой порядок выборки ресурсов браузером. В данном приложении веб-шрифты (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 не важна, поскольку он стилизует текст, расположенный ниже области просмотра.

Перезагрузите приложение и снова запустите Lighthouse. Проверьте раздел Maximum critical path latency (Максимальная задержка критического пути).

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

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

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

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

Последнее обновление: Улучшить статью