Предзагрузка ресурсов в HTML: prefetch, preload, dns-prefetch

Иногда браузеру можно подсказать заранее, какие ресурсы скоро пригодятся. Это ускоряет загрузку и повышает отзывчивость сайта.

rel="prefetch"

Используется для подгрузки ресурсов, которые, скорее всего, понадобятся в будущем.

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

Браузер загрузит страницу в фоне, чтобы при переходе по ссылке она открылась быстрее.

Идеально для следующих страниц (например, шаг 2 в форме или статья после текущей).

rel="preload"

Позволяет загрузить ресурс как можно раньше, даже если он нужен не сразу.

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

👉 Это полезно для шрифтов, картинок или CSS, которые критичны для первого экрана.

rel="dns-prefetch"

Подсказывает браузеру заранее "разрешить" DNS-домен.

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

👉 Экономит время при первом запросе к стороннему ресурсу (например, Google Fonts).

rel="preconnect"

Ещё круче: не только DNS, но и устанавливает соединение (TCP + TLS).

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

👉 Особенно полезно для шрифтов, CDN, аналитики.

rel="prerender"

Браузер полностью загружает и рендерит страницу заранее.

<link rel="prerender" href="/next-page.html">

⚠️ Использовать осторожно — это может тратить трафик и ресурсы пользователя.

Итог:

dns-prefetch → только DNS
preconnect → DNS + соединение
preload → критичные ресурсы
prefetch → ресурсы на будущее
prerender → целая страница наперёд