Brzina web stranice i optimizacija fontova

Kako smanjiti broj rezova, koristiti WOFF2, preload, subset i font-display bez layout shifta i nečitljivog prvog prikaza.

Oriphiel stručni tim Ažurirano 23. 7. 2026. 3 min čitanja

Odgovor ukratko

Fontovi trebaju podržati hrvatske znakove uz što manje datoteka, a sustav mora imati stabilan fallback koji ne mijenja layout.

Ključne odluke

Treba li vanjski ili self-hosted font
Koji rezovi su stvarno korišteni
Treba li subset latin-ext
Koji font je kritičan za prvi ekran

Provedba korak po korak

Cilj ove lekcije je Kako smanjiti broj rezova, koristiti WOFF2, preload, subset i font-display bez layout shifta i nečitljivog prvog prikaza. Korake treba provoditi redom i svaki potvrditi prije širenja opsega.

Preporučeni redoslijed

Popisati stvarno korištene rezove
Koristiti WOFF2 i latin-ext skup
Preloadati samo kritičnu datoteku
Postaviti font-display i metrički sličan fallback

Praktičan primjer

Primjer primjene: tim najprije provodi „Popisati stvarno korištene rezove”, zatim potvrđuje „Nema neiskorištenih rezova” i rezultat procjenjuje kroz „Bajtovi fontova”. Tek nakon te provjere širi opseg.

Kontrolna lista prije nastavka

Ova provjera odvaja završenu implementaciju od postavke koja samo izgleda dovršeno.

Provjerite

Nema neiskorištenih rezova
Č, ć, ž, š i đ rade
Preload URL odgovara korištenom fontu
CLS ostaje stabilan

Najčešće pogreške i rizici

Rizike treba provjeriti prije povećanja prometa, automatizacije ili ovlasti sustava.

Na što treba paziti

Učitava se cijela variable obitelj bez potrebe
Svaki heading koristi drugi font
Preload se radi za šest datoteka
Fallback znatno mijenja širinu teksta

Mjerenje rezultata

Učinak se procjenjuje kroz mali skup metrika koje su povezane s ciljem lekcije i stvarnim poslovnim ishodom.

Metrike koje imaju smisla

Bajtovi fontova
Font load time
CLS
LCP

Česta pitanja

Koji je prvi korak za temu „Brzina web stranice i optimizacija fontova”?

Popisati stvarno korištene rezove Prije nastavka potvrdite odluku: Treba li vanjski ili self-hosted font

Kako provjeriti da je provedba uspješna?

Nema neiskorištenih rezova Nakon toga pratite metriku: Bajtovi fontova.

Koju pogrešku treba prvo spriječiti?

Učitava se cijela variable obitelj bez potrebe Problem ispravite prije automatizacije ili povećanja budžeta.

Službeni i stručni izvori

Sučelja, pravila i preporuke mogu se mijenjati. Prije produkcijske izmjene provjerite aktualnu dokumentaciju.

Povezani vodiči za poslovni web

Brzina poslovne web straniceKako slike, fontovi, JavaScript, hosting, cache i treće strane utječu na stvarno mobilno iskustvo i konverzije. Tipografija i čitljivost web straniceKako odabrati fontove, veličinu, prored, širinu retka i kontrast za čitljiv poslovni sadržaj na svim ekranima. Core Web Vitals za poslovni webKako razumjeti LCP, INP i CLS, razlikovati field i lab podatke te prioritetizirati popravke po predlošku. Optimizacija slika za webKako odabrati format, dimenzije, srcset, lazy loading, prioritet hero slike i kvalitetu bez vidljivog gubitka.

Povežite ovu temu s ostatkom sustava

SEO za izradu web stranicaPovežite prodajnu ponudu, vodiče, interne linkove i organske upite bez kanibalizacije. Google alati i mjerenjePostavite Search Console, GA4, Tag Manager i konverzije nakon tehnički spremnog weba. Kontakt forma i CRMNastavite proces od slanja obrasca prema leadu, statusu i sljedećoj aktivnosti.

Primijenite lekciju na stvarni projekt

Pošaljite postojeću konfiguraciju, cilj i problem koji želite riješiti. Dobit ćete prijedlog sljedećeg tehničkog ili operativnog koraka.

Pošaljite upit Pregledajte sve vodiče