Tipografija je jedan od prvih elemenata koji posjetilac primijeti na stranici, ali način na koji se fontovi učitavaju često je nevidljivi krivac za sporo otvaranje i neugodno treperenje teksta. Web font je dodatni resurs koji pretraživač mora preuzeti prije nego što ga može iscrtati, a ako se taj proces ne kontroliše, korisnik gleda u prazan prostor ili svjedoči naglom skoku rasporeda kada se pravi font konačno pojavi. U ovom tekstu objašnjavamo kako fontovi utiču na performanse i koje tehnike koristimo da tekst bude čitljiv odmah, bez žrtvovanja brzine.
Zašto fontovi usporavaju stranicu
Za razliku od slika koje se učitavaju paralelno i ne blokiraju ostatak prikaza, fontovi imaju poseban životni ciklus. Pretraživač prvo mora učitati i analizirati CSS, zatim otkriti koji su fontovi potrebni, pa tek onda pokrenuti njihovo preuzimanje. To znači da se zahtjev za font dešava relativno kasno u procesu iscrtavanja.
Dok font nije dostupan, pretraživač donosi odluku: ili će sakriti tekst dok font ne stigne, ili će prikazati zamjenski sistemski font pa ga kasnije zamijeniti. Prva opcija stvara takozvani FOIT efekat (nevidljivi tekst), a druga FOUT efekat (treperenje neuobličenog teksta). Oba kvare doživljaj, a posebno utiču na metriku Largest Contentful Paint, koja je dio Google Core Web Vitals procjene.
Pravilo broj jedan: kontrolišite font-display
CSS svojstvo font-display je najjednostavniji alat za upravljanje ponašanjem fonta tokom učitavanja. Definiše se unutar @font-face pravila i govori pretraživaču šta da radi dok font još nije spreman.
- swap – odmah prikazuje zamjenski font, pa ga zamjenjuje kada pravi font stigne. Tekst je uvijek vidljiv, ali može doći do vizuelnog pomaka.
- optional – daje fontu vrlo kratak rok da se učita; ako ne stigne na vrijeme, koristi se sistemski font i pravi font se ne ubacuje naknadno. Idealno za sporije veze.
- fallback – kompromis između swap i optional, s malo dužim periodom čekanja.
Za većinu projekata preporučujemo swap ili optional, jer oba osiguravaju da korisnik nikada ne gleda u prazan ekran. Izbjegavajte podrazumijevano ponašanje pretraživača, koje zna sakriti tekst do tri sekunde.
Hostajte fontove sami
Učitavanje fontova s vanjskih servisa izgleda praktično, ali svaki dodatni domen znači novo DNS pretraživanje, novu uspostavu veze i dodatno kašnjenje. Samostalno hostanje fontova na vlastitom serveru ili CDN-u eliminiše taj trošak i daje vam punu kontrolu nad keširanjem i formatima.
Uz to, samostalno hostanje rješava i pitanje privatnosti, jer podaci posjetilaca ne odlaze trećoj strani. Kada fontove servirate s istog domena kao i ostatak stranice, pretraživač može iskoristiti već uspostavljenu vezu, što značajno ubrzava preuzimanje. Ovo je standardna praksa u svakom ozbiljnom projektu koji radimo u sklopu izrade web stranica.
Koristite preload za ključne fontove
Pošto pretraživač otkriva fontove tek nakon analize CSS-a, možemo mu ranije signalizirati da su određeni fontovi važni. To se radi atributom preload u zaglavlju dokumenta:
- Preload primijenite samo na fontove koji su vidljivi odmah, prije skrolanja – najčešće na glavni font za naslove i tijelo teksta.
- Nemojte preload primjenjivati na svaki rez i debljinu, jer ćete time zagušiti propusni kanal i usporiti druge važne resurse.
- Obavezno navedite atribut
crossorigin, jer se fontovi učitavaju u anonimnom režimu, inače se resurs preuzima dva puta.
Preload pomjera preuzimanje fonta na sam početak učitavanja, čime se dramatično smanjuje vrijeme do prvog ispravnog prikaza teksta.
Smanjite veličinu: podskupovi i moderni formati
Veliki dio kašnjenja dolazi od same veličine datoteke fonta. Standardni font sadrži stotine znakova koje vaša stranica nikada neće koristiti. Kreiranjem podskupa zadržavate samo one znakove koji su vam potrebni, na primjer latinično pismo s našim dijakritičkim znakovima č, ć, ž, š i đ, a izbacujete ćirilicu, grčki alfabet ili rijetke simbole.
Format datoteke je jednako bitan. Moderni format WOFF2 nudi najbolju kompresiju i podržan je u svim aktuelnim pretraživačima, pa ga treba koristiti kao primarni izbor.
| Format | Kompresija | Preporuka |
|---|---|---|
| WOFF2 | Odlična | Primarni format za sve projekte |
| WOFF | Dobra | Samo za vrlo stare pretraživače |
| TTF/OTF | Slaba | Izbjegavati na webu |
Kombinacija podskupa i WOFF2 formata često smanjuje veličinu fonta za više od polovine, što direktno ubrzava učitavanje.
Spriječite skok rasporeda
Kada se zamjenski font zamijeni pravim, razlika u širini i visini slova može pomjeriti cijeli sadržaj prema dolje. Taj pomak kvari metriku Cumulative Layout Shift i ostavlja dojam neuredne stranice. Rješenje je usklađivanje zamjenskog fonta s pravim pomoću CSS svojstava size-adjust, ascent-override i descent-override.
Ova svojstva omogućavaju da sistemski font koji se prikazuje prvi zauzima približno isti prostor kao i pravi font. Kada pravi font stigne, prelaz je gotovo neprimjetan, bez naglog skoka teksta. Ovo je detalj koji razdvaja brze, dotjerane stranice od onih koje djeluju nezavršeno.
Praktičan kontrolni spisak
- Ograničite broj fontova i debljina na ono što je zaista u upotrebi.
- Hostajte fontove sa vlastitog domena ili CDN-a.
- Postavite
font-display: swapilioptional. - Primijenite
preloadsamo na fontove vidljive bez skrolanja. - Servirajte fontove u WOFF2 formatu s prilagođenim podskupom znakova.
- Uskladite zamjenski font da spriječite skok rasporeda.
Optimizacija fontova nije kozmetika nego inženjerski zadatak koji direktno utiče na brzinu, čitljivost i poziciju u rezultatima pretraživanja. Ako želite da vaša stranica učitava tekst trenutno i bez treperenja, pogledajte naše usluge ili nam se javite da zajedno analiziramo trenutne performanse vašeg projekta.