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