Выбор ответа Middle Производительность и Web Vitals обновлено
preload, prefetch, preconnect
Вопрос
Шрифт нужен на текущей странице, но браузер узнаёт о нём поздно, только из CSS. Что подходит лучше всего?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: <link rel="preload" href="/font.woff2" as="font" crossorigin. preload говорит браузеру скачать критичный ресурс текущей страницы с высоким приоритетом.
Варианты ответа
<link rel="prefetch" href="/font.woff2" as="font" crossorigin><link rel="dns-prefetch" href="/font.woff2" crossorigin><link rel="preconnect" href="/font.woff2" crossorigin><link rel="preload" href="/font.woff2" as="font" crossorigin>правильный ответ
Разбор
preload говорит браузеру скачать критичный ресурс текущей страницы с высоким приоритетом. Для шрифтов нужен crossorigin, иначе загрузка пойдёт дважды. prefetch для ресурсов будущей навигации с низким приоритетом. dns-prefetch и preconnect работают с доменом, а не с файлом: только разрешают имя или открывают соединение.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Производительность и Web Vitals»
- CLS
- INP
- LCP
- Длинная задача
- Главная причина CLS у картинок
- Состав Core Web Vitals в 2026
- async и defer у скриптов
- Чем INP лучше FID