Что такое хинты ресурсов — preload, prefetch и preconnect?

Question

Accepted Answer

**Хинты ресурсов** — это теги ``, которые указывают браузеру загружать или подключаться к ресурсам заранее, оптимизируя производительность загрузки. Каждый из них решает разные задачи с точки зрения времени и приоритета. ```html ``` ## Что делает каждый из них - **`preload`** — «Этот ресурс нужен **для текущей страницы**, загрузи его прямо сейчас с высоким приоритетом». Для критических ресурсов, которые парсер обнаруживает поздно: шрифты, основные изображения, ассеты, на которые ссылается CSS. Требует атрибут `as`, чтобы браузер установил правильный приоритет и заголовки. - **`preconnect`** — «Я скоро буду подключаться к этому **источнику**; выполни сейчас DNS lookup + TCP + TLS handshake». Экономит раунды в пути до первого запроса к сторонему сервису (API, хосту шрифтов, CDN). Используй для нескольких критических источников. - **`dns-prefetch`** — облегчённая версия preconnect: только DNS-разрешение. Хороший fallback или для множества источников. - **`prefetch`** — «Этот ресурс мне **возможно** понадобится при **следующей** навигации; загрузи его с низким приоритетом в момент простоя браузера». Для ресурсов вероятно-следующих страниц. Кэшируется для будущего, не для текущей страницы. ## Практический пример: шрифты ```html ``` Шрифты обнаруживаются поздно (браузер должен сначала спарсить CSS), поэтому предварительная загрузка избегает задержек с невидимым текстом. ## Осторожно: не переусложняй Предварительная загрузка всего подряд противоречит смыслу — она конкурирует за полосу пропускания с действительно критическими ресурсами. Указывай хинты только для нескольких самых важных ресурсов. ## Почему это важно Хинты ресурсов срезают задержку на критическом пути: `preconnect` убирает delay handshake для сторонних сервисов, `preload` расставляет приоритеты для поздно обнаруженных критических ассетов (шрифты, LCP-изображение), а `prefetch` делает *следующую* навигацию мгновенной. При грамотном использовании они значимо улучшают Core Web Vitals.