В этой лаборатории кода показано, как предварительно загрузить веб-шрифты с помощью rel="preload" чтобы удалить любые вспышки нестилизованного текста (FOUT).
Мера
Прежде чем добавлять какие-либо оптимизации, сначала измерьте производительность веб-сайта.
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим
. - Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Маяк» .
- Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
- Нажмите кнопку Создать отчет .
Созданный отчет 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.woff2 удаляется из цепочки критических запросов. Он извлекается ранее в приложении.
При предварительной загрузке браузер знает, что ему необходимо загрузить этот файл раньше. Важно отметить, что при неправильном использовании предварительная загрузка может снизить производительность, создавая ненужные запросы к ресурсам, которые не используются.