Preload, preconnect i prefetch: resource hints objašnjeni

Q: Da li resource hints zamenjuju brz hosting?

Ne. Oni pametnije raspoređuju resurse koje ionako morate preuzeti, ali ako server sporo šalje HTML, problem je dublje. Najbolji rezultat je brz server plus dobro postavljeni hints.

Q: Koliko preconnect-a je previše?

Preko 4-6 počinje da šteti jer svaka topla veza troši memoriju i bateriju na mobilnom. Držite se najvažnijih domena.

26. 7. 2026.

Pregledač po pravilu otkriva resurse tek dok čita HTML red po red. Font primeti kad naiđe na CSS koji ga poziva, sliku kad stigne do njenog <img> taga. To „kasno otkrivanje" košta vremena. Resource hints — preload, preconnect, dns-prefetch i prefetch — su način da pregledaču kažete: pripremi ovo unapred, trebaće mi. Pravilno postavljeni, skraćuju kritični put učitavanja za 100–400 ms.

preconnect: pripremi vezu unapred

Svaka veza ka nekom domenu (Google Fonts, CDN, analitika) zahteva tri koraka: DNS upit, TCP rukovanje i TLS pregovaranje. To lako traje 100–300 ms pre nego što se preuzme i jedan bajt. Sa <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> pregledač obavi te korake odmah, dok još parsira HTML, pa kada resurs zaista zatreba, veza je već topla. Koristite ga za 2–4 najvažnija spoljna domena — više od toga troši resurse bez koristi.

dns-prefetch: jeftinija, slabija varijanta

<link rel="dns-prefetch"> radi samo DNS deo, ne i TCP/TLS. Manje pomaže od preconnect-a, ali je jeftin i ima širu podršku u starijim pregledačima. Uobičajena praksa je da za ključne domene navedete oba: prvo preconnect, pa dns-prefetch kao rezervu.

preload: učitaj kritičan resurs ranije

<link rel="preload"> govori pregledaču da odmah preuzme konkretan fajl visokog prioriteta, iako ga još nije „video" u HTML-u. Najčešća upotreba je za:

Font koji koristi glavni naslov — as="font" uz crossorigin, da se izbegne FOIT (nevidljiv tekst dok se font učitava).
LCP sliku (hero baner) — as="image", često uz imagesrcset za responsivne verzije.
Kritičnu CSS ili JS datoteku bez koje se stranica ne prikazuje kako treba.

Oprez: preload je „naredba", ne „predlog". Ako preload-ujete resurs koji se ne koristi u prvih par sekundi, oduzimate propusni opseg pravim kritičnim resursima. Konzola upozorava porukom „was preloaded but not used".

prefetch: pripremi sledeću stranicu

<link rel="prefetch"> je za budućnost, ne za trenutnu stranicu. Njime govorite pregledaču da u pozadini, kad je mreža slobodna, preuzme resurs koji će verovatno trebati na sledećoj stranici — na primer JS bundle stranice proizvoda kada je korisnik na kategoriji. Kada korisnik klikne, stranica je gotovo trenutna. Prioritet je nizak, pa ne ometa učitavanje trenutne stranice.

Kako ih rasporediti

Praktičan redosled u <head>: prvo preconnect ka domenima fontova i CDN-a, zatim preload za font i LCP sliku, pa tek onda ostali resursi. Na WordPress-u većinu ovoga podešavaju plugini za performanse (WP Rocket, Perfmatters) ili tema, ali vredi proveriti šta se zaista dešava u DevTools → Network kolonom „Priority".

Najčešće greške

Prva: preload-ovanje previše stvari — tada ništa nije prioritet. Druga: zaboravljen crossorigin na fontovima, zbog čega se resurs preuzme dvaput. Treća: preconnect ka domenu sa kog se ništa ne učitava. Četvrta: korišćenje prefetch za resurse trenutne stranice, gde on ne pomaže. Uvek izmerite pre i posle — hints su korisni samo ako gađaju prave, spore resurse.

Česta pitanja

Da li resource hints zamenjuju brz hosting? Ne. Oni pametnije raspoređuju ono što ionako morate da preuzmete, ali ako server sporo šalje HTML (visok TTFB), problem je dublje. Najbolji rezultat je brz server plus dobro postavljeni hints.

Koliko preconnect-a je previše? Preko 4–6 počinje da šteti, jer svaka topla veza troši memoriju i baterije na mobilnom. Držite se najvažnijih domena.

Naši paketi dolaze sa besplatnim globalnim CDN-om i NVMe diskovima, pa preconnect i preload imaju brz izvor sa kog povlače. Pogledajte pakete i cene ili detalje o SEO hostingu.