Resource hints jsou <link> tagy, které říkají prohlížeči, aby načetl nebo se připojil k prostředkům brzy, čímž optimalizuje výkon načítání. Každý slouží jiné časovému/prioritnímu potřebě.
html
Resource hints jsou <link> tagy, které říkají prohlížeči, aby načetl nebo se připojil k prostředkům brzy, čímž optimalizuje výkon načítání. Každý slouží jiné časovému/prioritnímu potřebě.
preload — "Potřebuji toto pro aktuální stránku, načti to teď s vysokou prioritou." Pro kritické zdroje, které parser objeví pozdě: fonty, hero obrázky, prostředky odkazované CSS. Vyžaduje as, aby prohlížeč nastavil správnou prioritu/hlavičky.
preconnect — "Připojím se k tomuto původu brzy; udělej nyní DNS lookup + TCP + TLS handshake." Ušetří round-tripy před prvním požadavkem na třetí stranu (API, hostitele fontů, CDN). Použij pro pár kritických původů.
dns-prefetch — lehčí verze preconnect: jen DNS rozlišení. Dobrá fallback / pro mnoho původů.
prefetch — "Pravděpodobně budu potřebovat toto pro další navigaci; načti to s nízkou prioritou, když je browser nečinný." Pro pravděpodobně-další stránky/prostředky. Uloženo v cache pro budoucnost, ne pro aktuální stránku.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Fonty jsou objeveny pozdě (prohlížeč musí nejdřív parsovat CSS), takže jejich preloadování zabraňuje zpoždění neviditelného textu.
Preloadování všeho podrývá účel — konkuruje skutečně kritickým zdrojům o šířku pásma. Nasis jen ty pár, které opravdu záleží.
Resource hints krátí latenci kritické cesty: preconnect odstraňuje zpoždění handshakeu pro třetí strany, preload prioritizuje pozdě objevené kritické prostředky (fonty, LCP obrázek), a prefetch činí další navigaci okamžitou.
Pokud je používáš cíleně, výrazně zlepšují Core Web Vitals.