Продолжение предыдущего поста с обзором ошибок производительности из доклада Пола Кальвано.
6. Предварительная загрузка видео
<link rel="preload" href="video.mp4" as="video">
Видео, как правило, очень тяжёлые. Предварительная загрузка видео займёт соединение и отложит более важные ресурсы. Видео лучше загружать по мере необходимости.
Как исправить: удалить
<link rel="preload" href="..." as="video">.7. Предварительная загрузка неиспользуемых ресурсов
Предварительная загрузка предназначена для важных ресурсов, которые понадобятся на странице в течении первых нескольких секунд. При предварительной загрузке неиспользуемых ресурсов браузер просто так скачает их с высоким приоритетом.
Как исправить: проверить страницы с
<link rel="preload"> на предмет ошибки в консоли, которая сообщает о предварительной загрузке неиспользуемых ресурсов, удалить указанные там <link rel="preload">.8. Предварительная загрузка без as
<link rel="preload" href="font.woff2">
Атрибут
as сообщает браузеру тип ресурса, чтобы он понимал, что дальше с ним делать. Без атрибута as предварительная загрузка ресурса не инициируется.Как исправить: добавить атрибут
as к <link rel="preload"> с соответствующим типом ресурса.9. Предварительная загрузка разных форматов шрифтов
<link rel="preload" href="font.ttf" as="font">
<link rel="preload" href="font.eot" as="font">
<link rel="preload" href="font.svg" as="font">
<link rel="preload" href="font.woff" as="font">
<link rel="preload" href="font.woff2" as="font">
Браузер использует наиболее подходящий формат шрифта, который он умеет обрабатывать. Все современные браузеры понимают
woff2. Остальные шрифты загрузятся просто так и не будут использованы.Как исправить: удалить
<link rel="preload"> для всех форматов шрифтов, кроме woff2.10. font-display: swap для предварительно загруженных шрифтов
<link rel="preload" href="font.woff2" as="font">
<style>
@font-face {
/* ... */
src: url("font.woff2") format("woff2");
font-display: swap;
}
</style>
font-display: swap говорит браузеру, что можно сразу отображать текст системным шрифтом, пока пользовательский не загрузился. Когда загрузка шрифта завершится, нужно заменить системный шрифт на пользовательский. Это что-то вроде ленивой загрузки. <link rel="preload"> загружает шрифт заранее с высоким приоритетом. Возникает конфликт приоритетов.Как исправить: использовать или
<link rel="preload">, или font-display: swap.#html #performance