В этой практической работе вы узнаете, как предварительно загружать веб-шрифты с помощью rel="preload", чтобы избежать появления неформатированного текста.
Измерить
Сначала оцените эффективность сайта, прежде чем вносить какие-либо изменения.
- Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим)
. - Нажмите Ctrl + Shift + J (или Cmd + Option + J на Mac), чтобы открыть Инструменты разработчика.
- Перейдите на вкладку Lighthouse.
- Убедитесь, что в списке Категории установлен флажок Производительность.
- Нажмите кнопку Сгенерировать отчет.
В созданном отчете 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 не нужно, поскольку он используется для оформления текста в нижней части страницы.
Перезагрузите приложение и запустите Lighthouse снова. Проверьте раздел Максимальная задержка критического пути.
Обратите внимание, что Pacifico-Bold.woff2 удален из цепочки критических запросов. Оно извлекается в приложении раньше.
Благодаря предварительной загрузке браузер знает, что этот файл нужно скачать раньше. Важно отметить, что при неправильном использовании предварительная загрузка может снизить производительность, отправляя ненужные запросы на ресурсы, которые не используются.