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 в сети.