Resource hints su <link> oznake koje govore pregledniku da ranije dohvati ili poveže resurse, optimizirajući performanse učitavanja. Svaka služi drugačijoj potrebi vremenske slijeda/prioriteta.
Resource hints su <link> oznake koje govore pregledniku da ranije dohvati ili poveže resurse, optimizirajući performanse učitavanja. Svaka služi drugačijoj potrebi vremenske slijeda/prioriteta.
preload — "Trebam ovo za trenutnu stranicu, dohvati ga sada s visokim prioritetom." Za kritične resurse koje parser otkrije kasno: fontove, hero slike, CSS-referentirane resurse. Zahtijeva as kako bi preglednik postavio ispravan prioritet/zaglavlja.
preconnect — "Povezat ću se na ovo podrijetlo ubrzo; sada učini DNS pretragu + TCP + TLS rukovanje." Štedi round-trip-ove prije prvog zahtjeva trećoj strani (API, host fontova, CDN). Koristi za nekoliko kritičnih podrijetla.
dns-prefetch — lakša verzija preconnect-a: samo DNS rezolucija. Dobar fallback / za mnoga podrijetla.
prefetch — "Vjerojatno ću trebati ovo za sljedeću navigaciju; dohvati ga s niskim prioritetom kada je neaktivan." Za vjerojatno sljedeće stranice/resurse. Cachiniran za budućnost, ne za trenutnu stranicu.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Fontovi se otkrivaju kasno (preglednik prvo mora parsirati CSS), pa preload fontova izbjegava kašnjenja nevidljivog teksta.
Predući sve poništava svrhu — natječe se s stvarno kritičnim resursima za propusnost. Naznači samo nekoliko koji su najvažniji.
Resource hints smanjuju latenciju na kritičnoj putanji: preconnect uklanja kašnjenje rukovanja za treće strane, preload daje prioritet kasno otkrivenim kritičnim resursima (fontovi, LCP slika), a prefetch čini sljedeću navigaciju trenutnom.
Korišteni selektivno, oni značajno poboljšavaju Core Web Vitals.