Kako fontovi utječu na brzinu web stranice?

Fontovi su važan dio vizualnog identiteta web stranice.

Utječu na:

• dojam brenda
• čitljivost
• hijerarhiju sadržaja
• izgled naslova
• osjećaj kvalitete dizajna

Ali svaki dodatni web font koji učitamo ima i tehničku cijenu.

Browser ga mora:

• pronaći
• preuzeti
• obraditi
• primijeniti na tekst

Ako web koristi previše fontova, previše debljina ili loš način učitavanja, posljedice mogu biti:

• sporiji prvi prikaz
• kašnjenje teksta
• promjena layouta
• veći CLS
• veći broj requestova

Zato optimizacija fontova nije samo estetsko pitanje.

Dio je ukupnih performansi web stranice.

Što je web font?

Ako koristimo standardni sistemski font, velika je šansa da ga uređaj već ima instaliranog.

Primjeri su fontovi poput:

• Arial
• Georgia
• Times New Roman

Kod custom web fonta browser mora dodatno preuzeti datoteku.

To može biti font poput:

• Inter
• Roboto
• Poppins
• Montserrat
• Open Sans

ili neki potpuno custom font brenda.

Ta datoteka postaje još jedan resurs koji korisnik mora preuzeti.

Jedan font nije problem

Jedan kvalitetno implementiran font najčešće neće napraviti veliki problem.

Problem nastaje kada web učitava:

• tri font familyja
• šest debljina
• italic verzije
• dodatne varijante koje se gotovo ne koriste

Primjer:

Font A:
300
400
500
600
700
800

Font B:
400
500
600
700

Font C:
400
700

Odjednom imamo velik broj font datoteka.

A možda dizajn stvarno koristi samo:

• 400
• 600
• 700

Zato je prvi korak vrlo jednostavan:

učitavajte samo ono što stvarno koristite.

Font family

Web koji koristi jednu glavnu font obitelj i eventualno jednu dodatnu za naslove najčešće je puno jednostavniji za održavanje.

Primjer:

Naslovi: Krona One

Tekst: Inter

To je puno čišće nego:

• jedan font za H1
• drugi za H2
• treći za kartice
• četvrti za button
• peti za body

Previše različitih fontova često šteti i dizajnu i performansama.

Weight

Svaka debljina fonta može biti zasebna datoteka.

Primjer:

• 300 Light
• 400 Regular
• 500 Medium
• 600 SemiBold
• 700 Bold
• 800 ExtraBold

Ako dizajn koristi samo:

• 400
• 600
• 700

nema potrebe automatski učitati sve ostale.

To može biti vrlo jednostavna optimizacija.

Italic

Italic verzije se također često učitavaju bez stvarne potrebe.

Ako se italic pojavljuje samo u jednom citatu na cijeloj stranici, vrijedi razmisliti treba li za to učitavati posebnu datoteku.

Kod većih webova treba gledati cijeli design system.

Ako se italic redovito koristi, naravno da ima smisla.

Poanta je izbjeći automatsko učitavanje svake moguće varijante.

WOFF i WOFF2

Moderni web fontovi najčešće se koriste kroz formate poput:

• WOFF
• WOFF2

WOFF2 je optimiziran za web i obično je manji od starijih formata.

Za moderne projekte često je prvi izbor.

Nema smisla korisniku slati nepotrebno velike font datoteke ako postoji učinkovitija web verzija.

Font nije slika

Kod slika često možemo vrlo agresivno smanjiti dimenzije i kompresiju.

Kod fontova je pristup drugačiji.

Font datoteka sadrži skup znakova i njihove varijante.

Ako font uključuje velik broj jezika i znakova koje web nikada neće koristiti, datoteka može biti veća nego što je potrebno.

Tu dolazi subset.

Font subset

Subset znači da koristimo samo dio znakova koji nam stvarno trebaju.

Primjerice, web na hrvatskom jeziku možda treba:

• latinicu
• hrvatske dijakritičke znakove

ali ne nužno:

• ćirilicu
• grčki alfabet
• tisuće drugih znakova

Ako font podržava ogroman broj znakova, pravilno napravljen subset može značajno smanjiti datoteku.

Ali treba paziti da ne izbacite znakove koji se stvarno koriste.

Kod hrvatskog jezika posebno treba provjeriti:

• č
• ć
• ž
• š
• đ

Lokalno ili preko servisa?

Fontove možemo učitavati na nekoliko načina.

Primjerice:

• lokalno s vlastitog servera
• preko vanjskog servisa
• preko CDN-a

Svaka opcija ima prednosti i nedostatke.

Vanjski servis može biti praktičan.

Lokalni hosting fontova daje veću kontrolu nad:

• cacheom
• verzijom fonta
• requestovima
• privatnošću

Nema jednog univerzalnog pravila.

Važno je razumjeti kako se font stvarno učitava.

Dodatni request

Ako se font učitava s druge domene, browser može morati napraviti dodatne korake prije nego što dobije datoteku.

To može uključivati:

• DNS lookup
• connection
• TLS
• request

Pojedinačno možda nije velik problem.

Ali ponovno vrijedi isto pravilo kao i kod third-party skripti:

svaki dodatni vanjski resurs ima svoju cijenu.

Fallback font

Dok custom font još nije dostupan, browser mora odlučiti što će prikazati.

Jedna opcija je privremeno koristiti fallback font.

Primjer:

font-family: "Inter", Arial, sans-serif;

Ako Inter još nije učitan, korisnik može vidjeti Arial ili drugi sistemski font.

To je često bolje nego prikazivati prazan prostor.

FOIT

FOIT znači Flash of Invisible Text.

To se događa kada browser neko vrijeme ne prikazuje tekst dok čeka custom font.

Korisnik može vidjeti:

• prazne naslove
• prazan body tekst
• sadržaj koji se odjednom pojavi kasnije

To je vrlo loše iskustvo.

Tekst je glavni sadržaj velikog broja poslovnih web stranica.

Ne treba ga skrivati samo zato što custom font još nije stigao.

FOUT

FOUT znači Flash of Unstyled Text.

Browser prvo prikaže fallback font.

Nakon što se custom font učita, tekst promijeni izgled.

To je obično manje problematično od potpunog skrivanja teksta.

Ali može uzrokovati vizualni pomak.

Ako fallback i custom font imaju jako različite dimenzije, tekst može:

• promijeniti širinu
• prijeći u novi red
• povećati visinu

To može utjecati na CLS.

Font i CLS

Fontovi mogu biti jedan od uzroka layout shifta.

Primjer:

Naslov se prvo prikazuje u sistemskom fontu.

Stane u dvije linije.

Nakon toga se učita custom font.

Novi font je širi.

Naslov sada zauzima tri linije.

Sve ispod njega se pomakne.

To je stvaran UX problem.

Više o tome kako se takva pomicanja mjere možete pročitati u vodiču što su Core Web Vitals.

Sličan fallback

Jedan od načina smanjivanja problema je koristiti fallback font sličnih proporcija.

Ako custom font ima određenu:

• širinu znakova
• visinu
• line-height

fallback bi trebao biti što bliži.

Razlika između prvog i konačnog prikaza tada je manja.

font-display

CSS svojstvo font-display može kontrolirati kako browser prikazuje tekst dok custom font još nije dostupan.

Čest izbor je:

font-display: swap;

To najčešće znači:

1. odmah koristi fallback font
2. učitaj custom font
3. zamijeni ga kada bude spreman

Prednost je da tekst ostaje vidljiv.

Ali treba paziti na vizualni pomak.

Swap nije magično rješenje

font-display: swap je dobra polazna točka.

Ali ako fallback i custom font imaju potpuno različite metrike, i dalje možete dobiti veliki layout shift.

Zato optimizacija fontova često uključuje kombinaciju:

• pravilnog načina učitavanja
• dobrog fallbacka
• kontroliranih font metrika

Ne samo jednu CSS vrijednost.

Preload fonta

Ako je određeni font vrlo važan za početni prikaz, može imati smisla koristiti preload.

Time browseru možemo ranije signalizirati:

ovaj resurs će nam uskoro trebati.

To može pomoći kod fonta koji se koristi u:

• H1
• glavnom tekstu
• hero sekciji

Ali preload treba koristiti pažljivo.

Ne preloadati sve

Ako imate šest font datoteka i preloadate svih šest, browser više ne zna što je stvarno prioritet.

Preload ima smisla za ključne resurse.

Ne za sve.

Primjerice:

• Regular body font
• glavni heading font

mogu biti kandidati.

Italic 700 koji se koristi samo u footeru vjerojatno nije.

Critical font

Kod optimizacije je korisno pitati:

Koji font korisnik mora imati odmah?

Ako hero koristi jedan font, a footer drugi, nije potrebno oba tretirati jednako.

Prioritet treba pratiti važnost sadržaja.

To je isti princip koji koristimo kod optimizacije slika za web.

Hero slika i slika na dnu stranice nemaju isti prioritet.

Isto vrijedi i za fontove.

Variable font

Variable font može sadržavati više stilskih varijacija unutar jedne datoteke.

Umjesto zasebnih fileova za:

• 400
• 500
• 600
• 700

jedan variable font može pokrivati cijeli raspon.

To može biti vrlo praktično.

Ali nije automatski uvijek manje.

Ako koristite samo dvije debljine, dvije dobro optimizirane statične datoteke ponekad mogu biti sasvim dovoljne.

Treba usporediti stvarnu veličinu.

Kada variable font ima smisla?

Posebno je koristan kada design system koristi mnogo težina ili fleksibilnu tipografiju.

Primjer:

• 400 body
• 450 label
• 500 nav
• 600 H3
• 700 H2

Umjesto velikog broja pojedinačnih fileova, jedan variable font može pojednostaviti sustav.

Uz to omogućuje precizniju kontrolu dizajna.

Kad nema smisla?

Ako web koristi samo:

• Regular
• Bold

nije nužno da variable font bude bolji izbor.

Optimizaciju treba temeljiti na stvarnoj implementaciji, ne na trendu.

Fontovi i PageSpeed

Alati poput Lighthousea mogu pokazati da fontovi utječu na:

• renderiranje
• layout
• količinu prenesenih podataka

Ali treba čitati problem u kontekstu.

Ako je font ukupno 40 KB, a hero video 8 MB, font nije prvi prioritet.

Ako web učitava 14 font datoteka ukupne veličine preko 1 MB, tada ima smisla detaljno analizirati.

Uvijek prvo rješavajte najveće probleme.

Fontovi i LCP

Font može utjecati i na Largest Contentful Paint.

Ako je glavni LCP element veliki tekstualni blok, način učitavanja fonta može utjecati na vrijeme kada se sadržaj smatra prikazanim.

Posebno ako browser čeka custom font prije prikaza.

Zato fontovi mogu biti dio LCP problema, iako je češće fokus na hero slikama.

Fontovi i brzina

Fontovi sami po sebi rijetko su jedini razlog za vrlo spor web.

Ali lako postanu jedan od mnogo manjih problema.

Primjer:

• 500 KB fontova
• 2 MB slika
• 1 MB JavaScripta
• nekoliko third-party servisa

Svaki sloj malo uspori stranicu.

Na kraju korisnik osjeti njihov zbroj.

Zato performanse treba promatrati kao sustav.

Širu sliku obradili smo u članku kako brzina weba utječe na korisnike i SEO.

Fontovi i mobilni uređaji

Na brzom desktop računalu nekoliko dodatnih fontova možda gotovo ne primijetite.

Na mobilnom uređaju s lošijom vezom situacija može biti drugačija.

Browser mora:

• preuzeti resurse
• dekodirati ih
• renderirati tekst

Zato optimizacija fontova također podržava kvalitetno mobilno iskustvo.

Fontovi i branding

Performanse ne znače da svaki web mora koristiti Arial.

Custom font može biti vrlo važan dio brenda.

Posebno ako se koristi dosljedno kroz:

• logo
• marketing
• web
• tiskane materijale

Cilj nije ukloniti identitet.

Cilj je implementirati ga kvalitetno.

System font stack

Za određene projekte sistemski font stack može biti sasvim dobar izbor.

Prednosti uključuju:

• nema dodatnog font downloada
• vrlo brzo prikazivanje
• dobra čitljivost
• prirodan izgled na uređaju

To može biti odličan izbor za:

• aplikacije
• administrativna sučelja
• vrlo performance-oriented projekte

Ali nije automatski najbolji izbor za svaki brend.

Font za body tekst

Body font treba prije svega biti čitljiv.

Treba paziti na:

• veličinu
• line-height
• weight
• kontrast
• širinu tekstualnog stupca

Performance optimizacija nema puno smisla ako nakon nje odaberemo font koji je neugodan za duže čitanje.

UX i performanse trebaju raditi zajedno.

Font za naslove

Heading font može biti izraženiji.

Ali treba provjeriti kako izgleda kod:

• dugih naslova
• hrvatskih znakova
• malih ekrana

Font koji izgleda odlično na jednom kratkom H1 može postati problem kada H2 ima deset riječi.

Posebno na mobitelu.

Dijakritički znakovi

Kod fontova za hrvatski web treba obavezno provjeriti podršku za:

• č
• ć
• ž
• š
• đ

Neki dekorativni ili manje kvalitetni fontovi imaju loše nacrtane ili potpuno nedostajuće znakove.

To nije samo tehnički problem.

Direktno utječe na profesionalni izgled stranice.

Fontovi i design system

Najbolje je definirati tipografiju kao dio design systema.

Primjer:

Heading font

Krona One

Body font

Inter

Body weights

400, 600

Heading weight

400

Button

600

Tako odmah znate što treba učitati.

Nema potrebe da svaka komponenta sama bira font i weight.

Nemojte koristiti weight koji ne postoji

Ako font nema stvarni weight 600, browser može pokušati umjetno generirati izgled.

Rezultat može biti vizualno lošiji.

Bolje je koristiti težine koje font stvarno podržava.

To također pomaže održati dizajn dosljednim.

Google Fonts

Google Fonts je vrlo praktičan način korištenja web fontova.

Ali nije jedini.

Možete ih:

• učitavati preko Google servisa
• preuzeti i hostati lokalno
• koristiti kroz framework optimizaciju

Odabir ovisi o:

• projektu
• privatnosti
• performansama
• načinu održavanja

Najvažnije je izbjeći lošu implementaciju u kojoj se isti font slučajno učitava nekoliko puta iz različitih izvora.

Dupli fontovi

Ovo se može dogoditi kod WordPressa.

Primjer:

• tema učitava Roboto
• builder učitava Roboto
• plugin učitava još jednu verziju Robota

Vizualno sve izgleda normalno.

Ali u pozadini browser možda radi nepotrebne requestove.

Zato Network panel može biti vrlo koristan.

Page builderi

Builderi često nude veliki izbor Google fontova.

To je praktično, ali lako dovede do nekontrolirane tipografije.

Jedna sekcija koristi Poppins.

Druga Montserrat.

Treća Open Sans.

Na kraju web izgleda manje konzistentno i učitava više resursa.

Globalne font postavke zato imaju veliku vrijednost.

WordPress tema

I tema može automatski učitavati vlastite fontove.

Ako zatim kroz custom CSS ili builder koristite potpuno drugi font, originalni se možda i dalje učitava.

Vrijedi provjeriti:

• što tema uključuje
• što builder uključuje
• što se stvarno koristi

Font koji nije vidljiv na stranici ne bi se trebao nepotrebno učitavati.

Ikone kao font

Stariji webovi često koriste icon font.

Primjer:

jedan font file sadrži stotine ikona.

Web možda koristi samo pet.

Danas SVG ikone ili moderne icon biblioteke često mogu biti učinkovitija opcija.

Posebno zato što daju veću kontrolu nad pojedinačnim ikonama.

Ali opet treba gledati stvarni projekt.

Cache fontova

Fontovi se mogu cacheirati u browseru.

To znači da korisnik koji otvara drugu stranicu istog weba možda ne mora ponovno preuzimati isti font.

Zato prvi posjet često nosi najveći trošak.

Pravilni cache headeri mogu pomoći.

Tu dolazi do izražaja i kvalitetna hosting konfiguracija.

Više o infrastrukturnom sloju možete pročitati u članku zašto je dobar hosting važan.

Ne mijenjajte font zbog jednog boda

Ako web ima PageSpeed rezultat 97, nema smisla automatski ukloniti važan brand font samo kako biste dobili 98.

Performance odluke trebaju imati razuman omjer koristi i štete.

Pitajte:

• koliko font stvarno košta
• koliko je važan dizajnu
• postoji li bolja implementacija

Često je rješenje optimizirati font, ne ukloniti ga.

Kada font postaje problem?

Vrijedi detaljnije analizirati ako:

• učitavate puno familyja
• imate puno weightova
• fontovi zajedno imaju veliku veličinu
• tekst dugo nije vidljiv
• layout se pomiče nakon učitavanja
• isti font se učitava više puta

Ako ništa od toga nije slučaj, možda postoje veći performance problemi drugdje.

Kako provjeriti?

U browser DevTools otvorite Network panel.

Filtrirajte:

Font

Možete vidjeti:

• koliko se font datoteka učitava
• njihove veličine
• s kojih domena dolaze
• koliko dugo se učitavaju

To odmah daje puno jasniju sliku.

Provjerite CSS

Zatim provjerite:

• koje font-family vrijednosti koristite
• koje weightove
• postoji li font-display
• učitavaju li se stilovi koje ne koristite

Kod većih design systema korisno je dokumentirati cijelu tipografsku skalu.

Jednostavan primjer

Recimo da web trenutno učitava:

Poppins 300
Poppins 400
Poppins 500
Poppins 600
Poppins 700
Poppins 800
Open Sans 400
Open Sans 600
Open Sans 700

A stvarno koristi:

Poppins 600
Poppins 700
Open Sans 400
Open Sans 600

Već samim uklanjanjem nepotrebnih težina možemo značajno pojednostaviti sustav.

Bez ikakve vidljive promjene dizajna.

Još bolji pristup

Ako je moguće, može se dodatno:

• koristiti WOFF2
• napraviti subset
• optimizirati preload
• odabrati sličan fallback
• pravilno postaviti cache

Tada font zadržava isti vizualni identitet uz puno bolju implementaciju.

Fontovi nakon redizajna

Kod redizajna se često dodaju novi fontovi, ali stari ostanu u kodu.

Tako se s vremenom nakupljaju resursi.

Nakon većeg redizajna treba provjeriti:

• koriste li se stari fontovi
• postoje li stari CSS importi
• učitava li tema nešto nepotrebno

Cleanup je važan dio tehničke kvalitete.

Nemojte dodavati font bez razloga

Ako novi font neće značajno poboljšati identitet ili čitljivost, možda nije potreban.

Web ne postaje automatski kvalitetniji samo zato što koristi egzotičan font.

Ponekad jedan dobro odabran font family može pokriti:

• body
• navigaciju
• button
• naslove

uz različite veličine i weightove.

To daje i bolju konzistentnost.

Performanse i dizajn

Najbolji rezultat nije:

bez custom fontova.

Najbolji rezultat je:

prava količina fontova, pravilno implementirana.

Dizajn i brzina nisu suprotstavljeni ciljevi.

Ako se tipografija planira od početka, možemo imati:

• snažan vizualni identitet
• dobru čitljivost
• malo font datoteka
• stabilan layout

To je puno bolje nego optimizirati tipografiju tek kada Lighthouse počne prijavljivati probleme.

Font checklist

Kod novog projekta provjerite:

Koliko familyja koristimo?

Najčešće jedan ili dva mogu biti sasvim dovoljna.

Koje weightove stvarno koristimo?

Ne učitavajte cijeli raspon bez razloga.

Postoji li WOFF2?

Koristite odgovarajući web format.

Podržava li hrvatske znakove?

Provjerite č, ć, ž, š i đ.

Je li tekst odmah vidljiv?

Izbjegnite nepotrebni FOIT.

Je li fallback sličan?

Smanjite layout shift.

Treba li preload?

Samo za ključne fontove.

Učitava li se nešto dvaput?

Provjerite temu, builder i pluginove.

Fontovi nisu najveći problem

Kod sporog weba fontovi vrlo često nisu glavni krivac.

Najveći problemi mogu biti:

• velike slike
• video
• JavaScript
• loš hosting

Zato ih treba analizirati u kontekstu.

Ali fontovi su odličan primjer kako nekoliko malih tehničkih odluka zajedno može utjecati na kvalitetu weba.

Širu sliku možete pronaći u članku kako brzina weba utječe na korisnike i SEO.

Za metrike poput CLS-a i LCP-a pogledajte što su Core Web Vitals.

Ako planirate novu poslovnu stranicu, pogledajte naše pakete i cijene izrade web stranica.