⚡ Kuidas laadida veebifonte kiirust kaotamata ja kiirendada teksti renderdamist
Kui sait laadib kolm sekundit ja seejärel kulutab veel sekundi kogu teksti ümber joonistamisele, külastajad lahkuvad. Mitte konkurentide juurde, vaid lihtsalt sulgevad vahelehe. Probleem on peaaegu alati sama: veebifondid on laaditud jõudlust arvestamata.
HTTP Archive 2025. aasta andmete kohaselt kasutab umbes 84% saitidest kohandatud veebifonte ja keskmine sait teeb fondifailidele 5 päringut kogumahuga umbes 400 KB. Kehva ühenduse korral tähendab see 2-3 sekundit renderdamise blokeerimist, mille jooksul näevad kasutajad tühja ekraani. Google arvestab fondi vahetumisest tingitud kumulatiivset paigutuse nihet (Cumulative Layout Shift) ka Core Web Vitals hulka.
Neli alljärgnevat sammu ei ole teooria. See on praktiline miinimum, mis lahendab valdava osa veebifontide jõudlusprobleemidest. Iga samm võtab aega 5 kuni 15 minutit.
💡 Kiire ülevaade:
- Otsusta formaatide kasuks: woff2 peamise ja woff varuvariandina on kõigile kaasaegsetele brauseritele piisav.
- Lisa kriitiliste fontide eellaadimine, et brauser alustaks allalaadimist kohe, selle asemel et oodata CSS-i.
- Kontrolli oma font-face'i: local(), õige src järjekord, unicode-range ladina tähemärkide jaoks.
- Määra font-display: swap ja külastajad näevad teksti koheselt isegi siis, kui font alles laadib.
1. Samm: kasuta woff2 ja woff, midagi muud pole vaja
Veebifondiformaate on palju: EOT, TTF, OTF, SVG. Kuid aastal 2026 on sul tegelikult vaja ainult kahte.
woff2 on kaasaegne standard. Failid on sama kvaliteedi juures 30% väiksemad kui woff, sest nad kasutavad gzipi asemel broti tihendamist. Brauseri tugi hõlmab kõiki igihaljaid brausereid, sealhulgas mobiilne Safari ja Samsung Internet. Globaalselt 98%+ kasutajatest.
woff on varuvariant väikesele osale vanematest brauseritest (Safari iOS 11 ja vanematel, haruldased ettevõttekeskkonnad). See on samuti tihendatud ja töötab alates IE9+. Hoia seda src-s viimasena ja brauser võtab võimaluse korral woff2, vastasel juhul langeb tagasi woff-ile.
Ära kasuta 2026. aastal EOT-d (Internet Explorer 8 ja vanemad) ega TTF-i (toorformaat, ilma tihenduseta). Selliste brauserite osakaal on statistiline müra ja iga lisavorming src-s suurendab CSS-i mahtu ning ajab brauseri segadusse.
Kui sul on faile TTF või OTF formaadis, teisenda need veebigeneraatoriga. Transfonter toodab ühe toiminguga woff2 ja woff, näidates glüüfide eelvaadet ja lõplikku failisuurust. Alternatiiv on Font Squirrel Webfont Generator.
2. Samm: eellaadi kriitilised fondid
Brauser saab fontidest teada CSS-ist ja CSS-i loeb ta pärast HTML-i. Selleks ajaks, kui ta sinna jõuab, on keskmise ühenduse korral möödunud 500-800 ms. Eellaadimine vähendab selle viivituse nullini: brauser alustab fondi allalaadimist kohe, kui ta kohtab silti <head>-s, ootamata CSS-i.
Minimaalne töötav silt:
1 <link rel="preload" as="font" 2 href="/fonts/open-sans.woff2" 3 type="font/woff2" 4 crossorigin="anonymous">
Võtmeks on crossorigin="anonymous". Ilma selleta ignoreerib brauser eellaaditud fonti ja laadib selle uuesti alla. Põhjus on selles, et fonte hangitakse anonüümselt (CORS), kuid eellaadimine ilma crossorigin-ita teeb tavalise päringu. Brauser käsitleb neid erinevate ressurssidena ega sobita neid kokku.
Mida eellaadida. Mitte kõiki fonte saidil. Ainult seda, mida kasutatakse põhiteksti jaoks ekraani ülaosas (above the fold): pealkiri, sisutekst, navigatsioon. Ülejäänu võib oodata. 4-5 faili eellaadimine annab kahaneva tulu ja võtab kriitiliselt sisult ribalaiust.
Oluline märkus Google Fonts ja CDN kohta. Kui kasutad fonte Google Fonts-ist, uuendatakse faile perioodiliselt ja eellaadimislink vanale versioonile põhjustab topelt allalaadimise (vana + uus). CDN-i fontide eellaadimise asemel kasuta <link rel="preconnect"> fondi domeenile. See kiirendab kätlust, riskimata versioonide mittevastavusega:
1 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Eellaadimine teiseste fontide jaoks. rel="prefetch" ütleb brauserile: "seda ressurssi läheb hiljem vaja, laadi see siis, kui põhisisu on valmis." Sobib fontidele sisemistel lehtedel või ikoonifontidele jaluses. Prioriteet on madal, ei võta ribalaiust.
Kaasaegne ressursside prioriseerimise juhend on saadaval web.dev dokumentatsioonis.
3. Samm: kirjuta @font-face korrektselt
Esmapilgul on @font-face lihtne. Praktikas on sellel neli peent nüanssi, millest igaüks mõjutab kiirust.
Korrektse deklaratsiooni näide:
1 @font-face { 2 font-family: 'Open Sans'; 3 font-weight: 400; 4 font-style: normal; 5 font-display: swap; 6 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 7 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 8 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 9 U+FEFF, U+FFFD; 10 src: local('Open Sans'), 11 url('/fonts/open-sans.woff2') format('woff2'), 12 url('/fonts/open-sans.woff') format('woff'); 13 }
Jaotus punktide kaupa:
local(): esimesena src-s. Kui kasutajal on font juba oma süsteemi installitud (Roboto Androidis, Segoe UI Windowsis, San Francisco macOS-is), võtab brauser kohaliku koopia ja laadib null baiti. Pane local() alati src esimesele reale. Võta nimi fondifailist endast: local('Open Sans') ja local('Roboto Regular').
Formaatide järjekord. Brauser läbib src vasakult paremale ja võtab esimese formaadi, millest ta aru saab. Seega: local() → woff2 → woff. Ei mingit EOT/TTF/SVG lõppu, välja arvatud juhul, kui sul on spetsiifiline publik vanade brauseritega ja siis lähevad need PÄRAST woff-i (mitte enne).
unicode-range: laadi ainult vajalikud glüüfid. Ladina tähemärkide jaoks piisab vahemikust U+0000-00FF (Basic Latin + Latin-1 Supplement). See on umbes 250 glüüfi, võrreldes mitme tuhandega täiskomplektis. Tegelik failisuurus väheneb 3-5 korda. Ära koorma vahemikku üle: iga täiendav unicode'i plokk lisab glüüfe, mida keegi ei näe. Kirillitsa saitide jaoks lisa U+0400-04FF.
@font-face** plokkide järjekord.** Kui sul on mitu paksust (regular, bold, italic), pane tavaline paksus (font-weight: 400) esimeseks. Brauser alustab selle allalaadimist.
4. Samm: luba font-display: swap ja jäta FOIT-iga hüvasti
Nähtamatu teksti välgatus (Flash of Invisible Text e FOIT) on see, kui brauser peidab teksti 3 sekundiks, oodates fonti. Kasutajad näevad tühja lehte. Stiilimata teksti välgatus (Flash of Unstyled Text e FOUT) on see, kui tekst on koheselt nähtav süsteemifondis ja seejärel asendatakse kohandatud fondiga. Teine on alati parem kui esimene.
font-display: swap @font-face-is teeb täpselt seda: tekst renderdatakse koheselt süsteemifondis ja kui kohandatud font laaditakse, vahetatakse see sisse. Ideaalne sisuteksti jaoks.
Muud väärtused ja millal neid kasutada:
swap: sisuteksti jaoks. Tekst on kohe nähtav, asendamine on sujuv.optional: dekoratiivsete fontide ja ikoonide jaoks. Brauser otsustab, kas fonti üldse alla laadida. Kehva ühenduse korral keeldub sellest ja jätab süsteemifondi. Ooteaeg on 100 ms.block: lühike blokeerimine (tavaliselt 3 sekundit), seejärel on tekst nähtav, font vahetatakse laadimisel. Harva kasutatav.fallback: kompromiss. Lühike blokeerimine, seejärel on tekst nähtav, font vahetatakse, kui see kiiresti laadib.
Praktikas kasuta sisuteksti jaoks swap ja ikoonifontide ning dekoratsiooni jaoks optional. Sellest piisab.
Brauseri käitumine ilma font-display-ta. Kui sa midagi ei määra, peidab Chrome teksti kuni 3 sekundiks, Firefox kuni 3 sekundiks, Safari määramata ajaks ja Edge näitab süsteemifonti kohe. font-display: swap-iga muutub see käitumine ühtseks ja tulemus on prognoositav.
Kuidas tulemust kontrollida
Kontrolli oma saiti enne ja pärast aadressil web.dev/measure. Lighthouse näitab eraldi real "Ensure text remains visible during webfont load". Kui audit on punane, ei tööta su font-display või see puudub.
Käsitsi kontrollimiseks: ava DevTools → Network, sea ahenduseks "Slow 3G" ja värskenda lehte. Tekst peaks ilmuma süsteemifondis koheselt, mitte pärast 3 sekundit tühja ekraani.
Allolevad ekraanipildid näitavad erinevust standardse lähenemise ja optimeeritud vahel (test Slow 3G-ga):
Vaikimisi: tekst on peidetud, kuni font laadib
Optimeeritud käitumine: tekst on koheselt nähtav süsteemifondis
Erinevus on palja silmaga nähtav: esimene ekraanipilt näitab valget ekraani, teine koheselt kättesaadavat sisu.
Performance.now() 2024 konverentsil käsitleb Mandy Michael edasijõudnute strateegiaid: järkjärguline unicode-range, fontide tükeldamine ja töö muutuvate fontidega. Neile, kes soovivad minna neljast põhisammust kaugemale.
⁉️🤔 Korduma kippuvad küsimused
Miks on mul woff-i vaja, kui woff2 on kõikjal toetatud?
Ülejäänud vana iOS Safari (iOS 11 ja vanemad) kasutajad ning haruldased ettevõttekeskkonnad lukustatud brauseritega ei toeta woff2. Ilma woff varuta näevad need kasutajad sinu fondi asemel süsteemifonti. Woff lisab komplektile 15-20 KB: tühine hind ülejäänud osa katmise eest.
Kas ma võin lihtsalt Google Fonts-i kasutada ja mitte muretseda?
Jah, ja enamiku saitide jaoks on see optimaalne tee. Google Fonts teenindab automaatselt woff2 kaasaegsetele brauseritele, kasutab geograafiliselt hajutatud CDN-i ja toetab URL-i parameetrina
display=swap. Puudused: sõltuvus välisest CDN-ist (privaatsuse kaalutlused, GDPR), võimetus kontrollidaunicode-rangeja lokaalset fondi installimist. Kui privaatsus ja kontroll on olulised, majuta fonte ise.
Kuidas ma tean, kas fondid tõesti aeglustavad mu saiti?
Lighthouse (Audits vahekaart Chrome DevToolsis) näitab auditit "Ensure text remains visible during webfont load." WebPageTest pakub juga-diagrammi koos ajastusega iga fondipäringu kohta. Kui fondid algavad hiljem kui esimene CSS, pole eellaadimine seadistatud. Kui paigutuse nihe on suurem kui 0,1, põhjustab font kumulatiivset paigutuse nihet ja Google arvestab seda Core Web Vitalsis.
font-display: swap rikub disaini, tekst "hüppab" vahetusel?
Jah, see on swap-i teadaolev puudus. Võitle selle vastu kahe tehnikaga. Esiteks: määra teksti
font-sizejaline-heightvastavaks süsteemi varufondile. Mõõdikute erinevus on minimaalne. Teiseks: kasuta Font Style Matcherit võisize-adjustomadust@font-face-is (saadaval kaasaegsetes brauserites), et sobitada kohandatud fondi mõõdikud süsteemifondiga. Pärast kohandamist on CLS null.
Kas ma peaksin kõik saidi fondid eellaadima?
Ei. Eellaadi ainult kriitilised fondid: need, mis moodustavad teksti ekraani ülaosas (esimesed 1-2 ekraani). Ülejäänud laadi tavaliselt läbi CSS-i. 5+ fondi eellaadimine ummistab ribalaiust ja viivitab järjekorras olulisemaid ressursse. Praktikas katavad 1-2 eellaadimislinki valdava osa stsenaariumitest.
Kas see on vaeva väärt: neli sammu, neli minutit
Veebifontide seadistamine ei ole nädalapikkune projekt. woff2-ks teisendamine, @font-face parandamine, eellaadimine ja font-display: swap võtab 20-30 minutit tööd, isegi kui sa pole seda kunagi varem teinud.
Kasu on mõõdetav: tekst muutub nähtavaks 1,5-2,5 sekundit varem Slow 3G korral. Core Web Vitals ei karista paigutuse nihke eest. Ja kasutajad ei lahku tühja ekraani vaadates.
Alusta ühe fondiga: peamise sisuteksti fondiga. Tee neli sammu. Kontrolli Lighthouse'i enne ja pärast. Erinevus numbrites on veenvam kui ükski argument.
Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.