intermediate

Resource hints

Используйте preload, prefetch, preconnect, dns-prefetch и priority hints только под реальные сценарии навигации.

Resource hints влияют на решения браузера о загрузке до обычного обнаружения. preload запрашивает важные ресурсы текущей страницы, prefetch прогревает вероятные ресурсы следующей, preconnect открывает соединения заранее, dns-prefetch резолвит имена. Полезны только при точном прогнозе и без конкуренции с более важными ресурсами.

					<link rel="preconnect" href="https://api.example.com" crossorigin>
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page.js" as="script">
				

preload — высокий приоритет для этой навигации; prefetch — низкий для следующей. Неверные hints отнимают bandwidth у LCP.

На интервью: preload vs prefetch и почему лишние hints замедляют страницу.

Типовые ошибки: preload не того ресурса; preconnect ко многим origins съедает сокеты.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

  • preload только критичных ресурсов страницы.
  • prefetch вероятной следующей навигации.
  • Ограничьте preconnect.
  • Проверяйте waterfall в сети.