Što su resource hints poput preload, prefetch i preconnect?

Question

Accepted Answer

**Resource hints** su `` 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. ```html ``` ## Što svaka radi - **`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. ## Čest pravi primjer: fontovi ```html ``` Fontovi se otkrivaju kasno (preglednik prvo mora parsirati CSS), pa preload fontova izbjegava kašnjenja nevidljivog teksta. ## Oprez: nemoj prestjerati s naznakama Predući sve poništava svrhu — natječe se s stvarno kritičnim resursima za propusnost. Naznači samo nekoliko koji su najvažniji. ## Zašto je to važno 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.