Как подсказать браузеру что какие-либо ресурсы будут загружены?

Браузеру подсказывают о будущей загрузке ресурсов через resource hints: `<link rel="preload">` (критичные), `prefetch` (для будущей навигации), `preconnect`/`dns-prefetch` (соединение), `prerender`.

Resource Hints

preload — критичные ресурсы текущей страницы

Загрузить с высоким приоритетом то, что скоро понадобится:

<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="app.js" as="script">

Браузер грузит заранее, до обнаружения в коде.

prefetch — ресурсы для будущей навигации

Загрузить с низким приоритетом то, что понадобится на следующей странице:

<link rel="prefetch" href="next-page.js">

preconnect — заранее установить соединение

Заранее выполнить DNS + TCP + TLS к домену (для сторонних ресурсов):

<link rel="preconnect" href="https://api.example.com">

dns-prefetch — только DNS

Более лёгкий вариант — заранее разрешить DNS:

<link rel="dns-prefetch" href="https://cdn.example.com">

prerender — предзагрузить всю страницу

<link rel="prerender"> устарел: Chrome вместо рендера делает только NoState Prefetch, Firefox и Safari его игнорируют. Полный пререндер следующей страницы сейчас делают через Speculation Rules API (<script type="speculationrules">, поддержка в Chromium).

fetchpriority

Управление приоритетом загрузки:

<img src="hero.jpg" fetchpriority="high">

Как выбирать

• Критичный ресурс текущей страницы → preload.
• Ресурс следующей страницы → prefetch.
• Сторонний домен → preconnect/dns-prefetch.

Коротко для собеседования

Браузеру подсказывают о загрузке через resource hints: preload (критичные ресурсы текущей страницы — шрифты, hero-картинка, высокий приоритет), prefetch (ресурсы следующей навигации, низкий приоритет), preconnect (заранее DNS+TCP+TLS к домену), dns-prefetch (только DNS), prerender (вся страница). Плюс fetchpriority для приоритета.