Предварительно загружайте веб-шрифты для повышения скорости загрузки
Этот codelab демонстрирует, как предварительно загрузить веб-шрифты с помощью rel="preload", чтобы удалить любые мигания нестилизованного текста (FOUT).
Измерение #
Прежде чем добавлять какие-либо оптимизации, сначала измерьте, как работает веб-сайт. 1. To preview the site, press View App. Then press Fullscreen 
. 1. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).
- Click the Lighthouse tab.
- Make sure the Performance checkbox is selected in the Categories list.
- 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.woff2 удаляется из цепочки критических запросов. Он загружается ранее в приложении.
При предварительной загрузке браузер знает, что ему нужно загрузить этот файл раньше. Важно отметить, что при неправильном использовании предварительная загрузка может нанести вред производительности, делая ненужные запросы к ресурсам, которые не используются.