Что такое preload, prefetch и preconnect в браузере и за что они отвечают
Что проверяют
Различаете ли вы три разные вещи: приоритет для того, что нужно прямо сейчас, ставку на следующую навигацию и подготовку сетевого соединения. За этим стоит понимание порядка загрузки страницы и того, чем вы двигаете метрику отрисовки главного элемента.
Как отвечать
Preload сообщает браузеру, что ресурс точно нужен текущей странице, и поднимает ему приоритет:
<link rel="preload" href="/f/inter.woff2" as="font" type="font/woff2" crossorigin>Атрибут as обязателен: от него зависят приоритет и заголовки запроса. Шрифты запрашиваются в анонимном режиме, поэтому crossorigin нужен даже для своего домена. Основной случай применения это ресурсы, которых не видит предварительный разбор разметки: шрифт из CSS, картинка из фонового свойства, чанк, который подключит скрипт.
Prefetch качает с низким приоритетом в простое браузера и кладёт в кэш то, что вероятно понадобится на следующем шаге навигации. Угадали, переход мгновенный; не угадали, потратили чужой трафик. Более управляемый современный вариант это правила спекулятивной загрузки, где следующую страницу можно не только скачать, но и отрисовать заранее.
Preconnect заранее выполняет разрешение имени, установку соединения и рукопожатие с чужим источником, экономя время до первого байта. Его младший родственник dns-prefetch делает только первый шаг.
Где спотыкаются
Меняют местами preload и prefetch. Preload про текущую страницу: если ресурс не понадобился сразу, браузер предупреждает в консоли, а трафик уже потрачен.
Предзагружают всё подряд. Приоритет величина относительная: когда важно всё, важно ничего, и предзагруженный баннер честно отодвигает шрифт и главную картинку. Забытый атрибут as или crossorigin у шрифта даёт вторую загрузку того же файла вместо экономии.
Расставляют preconnect на десяток источников. Каждое соединение это память и рукопожатие, неиспользованное закрывается через несколько секунд, а к собственному источнику соединение уже установлено к моменту разбора разметки.