Lokaalne fondihosting, WOFF2, font-display: swap ja preload – kuidas fontide teadlik valik vähendab lehe koormust ja parandab FCP mõõdikut.

Sisukord

Veebifontid on üks lihtsamini unustatavaid jõudlusprobleeme. Arendaja installib Elementori, valib Google Fonts-ist kümme ilusat kirjastiili, laadib kõik variandid – thin, light, regular, medium, semibold, bold, extrabold, iga kaal eraldi italic-iga. Leht näeb hea välja. Google Lighthouse annab 45 punkti ja FCP on 4 sekundit.

Põhjus: fondid ei ole dekoratsioon. Need on failid, mis tuleb üle võrgu laadida enne kui tekst õigesti kuvatakse.

Iga font, iga variant = eraldi fail

WOFF2 on tänapäevane fondivorming – kõige väiksem, kõige laialdasemalt toetatud. Üks WOFF2 fail kaalub tüüpiliselt 20-80 KB sõltuvalt kirjastiilist ja tähemärkide hulgast.

Probleem tekib variant-ide kogumisel:

Variant	Fail
Source Sans 3 Regular (400)	~25 KB
Source Sans 3 Bold (700)	~25 KB
Source Sans 3 Italic	~25 KB
Source Sans 3 Bold Italic	~25 KB
Judson Regular	~40 KB
Judson Bold	~40 KB
Kokku	~180 KB

180 KB ainult fondifaile – ja see on juba optimeeritud valik. Elementori vaikimisi lähenemine, kus laadib terve font-perekonna kõigi kaalu ja stiilidega, võib kergesti 500 KB fondifaile tähendada.

Õige lähenemine – teadlikud valikud eos

Fondi valik ei ole ainult visuaalne otsus. See on jõudlusotsus.

Hundikuu.ee: kaks kirjastiili, piiratud variandid.

Judson – pealkirjad, ainult Regular (400). Italic-it ei kasutata, ei laadita.
Source Sans 3 – põhitekst, Regular (400) ja Bold (700). Italic ainult vajaduse korral.

HeadRehvid.ee: teadlik otsus minna ühe kirjastiiliga.

Inter Regular, Medium, SemiBold – kolm varianti, üks perekond.
Põhjus: WooCommerce poe puhul on maht niigi suurem (tootefotod, skriptid). Fondifailide maht peab olema minimaalne. Emotsionaalne kirjastiil ei ole prioriteet – kiirus on.

Elevon Kinnisvara: emotsioon on olulisem, aga ikkagi distsiplineeritud.

Cormorant Garamond – pealkirjad, Normal + Italic. Ainult kaks varianti.
Süsteemifont põhitekstile – null laadimisaega.

Küsimused enne fondi valimist:

Kas see font on päriselt vajalik, või sobiks süsteemifont?
Mitu varianti tegelikult lehel kasutatakse?
Kas Bold Italic on kuskil lehel kasutusel? Kui ei, ära laadi.

Lokaalne hosting vs Google Fonts

Google Fonts on mugav – üks rida HTML-is ja font töötab. Aga see tähendab välist HTTP päringut Google’i serverisse igal lehe laadimisel.

Google Fonts probleemid:

Väline DNS päring + ühenduse loomine Google serveriga – 200-400ms lisaviivitus
GDPR küsitavus – Google saab teada su külastajate IP-aadressid
Google Fonts CSS laadib mitteblokaarselt, aga fondi failid ise laadivad väliselt

Lokaalne hosting – parim valik:
Fondifailid on sinu serveris. Ei ole väliseid päringuid, ei ole DNS viivitust, GDPR probleem kaob.

Lokaalne hosting käib kolme sammuga:

Laadi fondifailid alla – google-webfonts-helper.herokuapp.com genereerib täpselt need WOFF2 failid, mida vajad
Lisa fondifailid teema kausta (/fonts/)
Deklareeri @font-face CSS-is:

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Judson';
    src: url('../fonts/judson-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

font-display: swap – miks kriitiline

font-display: swap ütleb brauserile: “Näita teksti kohe süsteemifondiga, vaheta font välja kui fondifail on laaditud.”

Ilma font-display: swap-ta tekib FOIT (Flash of Invisible Text) – tekst on nähtamatu kuni font laadib. Kasutaja näeb tühja lehte. Google mõõdab seda FCP probleemina.

font-display: swap tähendab FOUT (Flash of Unstyled Text) – tekst on kohe näha süsteemifondiga, vaheldub siis veebifondiga. Väike visuaalne hüpe, aga kasutaja näeb sisu kohe.

Preload – laadi kriitilised fondid prioriteetselt

Preload ütleb brauserile: “Alusta selle fondi laadimist kohe, see on prioriteet.”

<!-- Lisada <head> sektsiooni, enne CSS-i -->
<link rel="preload" href="/fonts/source-sans-3-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/judson-400.woff2" as="font" type="font/woff2" crossorigin>

Preload-i piirangud: ära preloadi kõiki fonte. Preload on prioriteetsignaal – kui kõik on prioriteet, ei ole miski prioriteet. Preloadi ainult:

Põhiteksti font Regular variant (kasutatakse igal lehel)
Pealkirja font Regular variant (nähtav above-fold)

Bold, Italic, muud variandid – laadivad tavaliselt, vajadusel.

WordPress-is saab preload lisada functions.php kaudu:

add_action( 'wp_head', 'hnd_font_preload', 1 );
function hnd_font_preload() {
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/source-sans-3-400.woff2" as="font" type="font/woff2" crossorigin>' . "\n";
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/judson-400.woff2" as="font" type="font/woff2" crossorigin>' . "\n";
}

Font Awesome – kas ikka vajalik?

Font Awesome on ikoonikogu, mida kasutatakse laialdaselt – aga see maksab 150-300 KB JavaScript-i või CSS-i, mis laadib igal lehel.

Küsi enne lisamist: kas ikoonide jaoks on Font Awesome päriselt vajalik?

Alternatiiv 1 – SVG inline
SVG ikoonid otse HTML-i – null lisafaile, skaleerub täiuslikult, värvitav CSS-iga:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2"/>
</svg>

Alternatiiv 2 – SVG sprait
Kõik kasutatavad ikoonid ühes SVG failis, viidatav <use> elemendiga. Üks HTTP päring kõigi ikoonide jaoks.

Alternatiiv 3 – WebP/PNG ikoonid
Lihtsate ikoonide jaoks sobib optimeeritud WebP fail. Ei skaleeru nii hästi kui SVG, aga töötab.

Millal Font Awesome on okei: kui saidil on 50+ erinevat ikooni mida regulaarselt muudetakse. Muul juhul on SVG efektiivsem.

Levinud viga – fondifailid arendaja serveris

Näeme seda regulaarselt: arendaja ehitab lehe Elementoriga, fondifailide viited jäävad arenduskeskkonna serverisse. Leht läheb live – fondid laadivad jätkuvalt arendaja serverist, mis on aeglane, ebausaldusväärne ja võib ühel päeval lihtsalt kaduda.

Tulemus: FCP on kõrge, Lighthouse märgib “Eliminate render-blocking resources”, ja fondid laadivad iga külastaja jaoks välistest serverist mida sa ei kontrolli.

Kontrolli: ava GTmetrix → Waterfall → otsi fondifailidega seotud päringuid. Kõik fondifailid peaksid laadima sinu enda domeenilt, mitte väliselt.

Kokkuvõte – fontide optimeerimise kontrollnimekiri

[ ] Mitu kirjastiili on päriselt vajalik? Üks võib piisata.
[ ] Mitu varianti kasutatakse? Laadi ainult need.
[ ] Fondid on lokaalselt hostitud, mitte Google Fonts CDN-ist.
[ ] Kõik fondifailid on WOFF2 formaadis.
[ ] font-display: swap on kõigil @font-face reeglitel.
[ ] Kriitilised fondid (Regular variant) on preloaditud.
[ ] Font Awesome on asendatud SVG-ga kui ikoonide arv on väike.
[ ] Fondifailide viited laadivad sinu enda domeenilt (mitte arendaja serverist).