Kui saad saidi läbi PageSpeed Insightsi, on üks levinud diagnoosidest „Ensure text remains visible during webfont load". Probleem on tuttav kõigile, kes on paigaldanud Elementori, Astra või ühendanud Google Fonts’i: sel ajal, kui brauser fondifaili alla laadib, on tekst lehel lihtsalt puudu. Valge ekraan pealkirja asemel, sekundi murdosa tühjust ja külastaja on juba lahkunud.

Tehniliselt nimetatakse seda FOIT-iks (Flash of Invisible Text). Probleemi juur peitub font-display direktiivis, mida brauser vaikimisi kasutab. Ilma font-display: swap selgesõnalise määramiseta ootab brauser fondi laadimist ega näita teksti enne, kui fail on kätte saadud. Ja kui font laaditakse CDN-ist läbi kolmanda osapoole domeeni, siis viivitus kuhjub ning PageSpeed Insights annab hoiatuse.

See lahendatakse kahe asjaga: esiteks tuleb igale @font-face-ile lisada font-display: swap, et brauser näitaks kohe teksti süsteemse fondiga ja „vahetaks" selle kohandatud fondi vastu, kui see laadib. Teiseks tuleks kriitiliselt olulised fondid (esimesel ekraanil pealkirja jaoks kasutatav font) eellaadida <link rel="preload"> abil. Allpool on samm-sammuline juhend, kuidas seda WordPressis teha, arvestades pluginaid nagu Elementor ja teemasid nagu Astra.

💡 Kiirülevaade:

• Ava PageSpeed Insightsi raport ja märgi üles probleemsed fondid diagnostika alt
• Keela plugina ja teema stiilid wp_dequeue_style abil failis functions.php
• Kopeeri fondifailid kohalikku kausta ja loo font-face uuesti koos font-display: swap-iga
• Lisa eellaadimine ühele või kahele esimese ekraani fondile
• Elementori kohandatud fontide puhul muuda tee kohalikuks ja ehita CSS uuesti üles

1. Samm: leia raportist probleemsed fondid

Käivita audit PageSpeed Insightsis, oota tulemust ja leia diagnostika sektsioon. Otsime kirjet „Ensure text remains visible during webfont load".

Laienda nimekirja, et näha konkreetseid fondi URL-e, millel puudub font-display: swap. Tavaliselt on need:

• fontawesome-webfont.woff2, Font Awesome Elementorist;
• eicons.woff2, Elementori ikoonifont;
• Google Fonts (Open Sans, Roboto, Montserrat), kui teema tõmbab need CDN-i kaudu.

Kirjuta failinimed üles; neid läheb järgmistes sammudes vaja. Praegu on peamine mõista, milline plugin või teema iga fondi eest vastutab. Font Awesome ja eicons tulevad Elementorist. Google Fonts’i ühendab kõige sagedamini teema; Astras on selleks astra-google-fonts konks.

2. Samm: keela fonte laadivad stiilid

Nüüd on ülesanne eemaldada nende fontide standardne ühendamine, et saaksime need seejärel õigete seadetega tagasi tuua. Mine alamteema functions.php faili (või koodiplugina nagu Code Snippets) ja lisa:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

Prioriteet 9999 on oluline: konks peab käivituma PÄRAST seda, kui pluginad ja teema on oma stiilid registreerinud. Kui font ikka laadib, kontrolli, kas mõni teine plugin seda kutsub (näiteks menüü või kontaktvorm võivad ühendada oma Font Awesome’i versiooni). Otsi plugina failidest stringi wp_enqueue_style koos vastava käepidemega.

Pärast koodi lisamist kaovad saidil Font Awesome’i ikoonid ajutiselt; see on normaalne. Toome need tagasi 4. sammus.

3. Samm: kopeeri fondifailid kohalikku kausta

Kui font on ühendatud CDN-i või plugina kaudu, teeb brauser täiendava DNS-päringu kolmanda osapoole domeeni. Kohalik fondimajutus eemaldab selle viivituse. Algoritm:

• Leia fondifailid plugina struktuurist. Elementori Font Awesome’i puhul on tee: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Eiconsi puhul: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Google Fonts’i puhul laadi .woff2 alla Google Fonts’i CDN-ist.

• Loo saidi juurkausta kaust /wp-content/fonts/ ja kopeeri sinna kõik vajalikud failid. Piisab .woff2 (kaasaegsed brauserid) ja .woff (varuvariant vanematele) formaatidest.

• Kui fondi ühendas teema Google Fonts’i CDN-i kaudu, laadi kehtiv .woff2 käsitsi alla otse lingi kaudu või kasutades OMGF pluginat (sellest allpool lähemalt).

Nüüd on igal fondil kohalik tee nagu /wp-content/fonts/fontawesome-webfont.woff2. Liigume edasi kõige olulisema osa juurde: nende ühendamine.

4. Samm: ühenda fondid koos font-display: swap ja eellaadimisega

Stiilid on keelatud, failid on paigas. Nüüd määratleme @font-face koos õige font-display: swap direktiiviga ja lisame preload koheseks laadimiseks. Paiguta kood functions.php faili wp_head konksu kaudu:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

Prioriteet 5 wp_head sees tähendab, et preload sildid ilmuvad <head> sektsiooni esimeste hulgas, nii et brauser alustab fondi allalaadimist enne CSS-i jõudmist. Atribuut crossorigin="anonymous" on fondi eellaadimise puhul kohustuslik: ilma selleta ignoreerib brauser eellaadimist ja laadib faili uuesti alla.

Oluline nüanss: @font-face sees olev URL ei tohiks sisaldada päringuparameetreid nagu ?#iefix või ?v=4.7.0. PageSpeed Insights komistab nende otsa analüüsi käigus. Link peaks olema puhas: /wp-content/fonts/fontawesome-webfont.woff2 ja kõik.

Pärast koodi lisamist tühjenda vahemälu (vahemäluplugin + Cloudflare, kui kasutad) ja käivita PageSpeed Insights uuesti. Fondi hoiatus peaks kaduma. Font Awesome’i ikoonid naasevad oma kohtadele, kuid nüüd ei blokeeri need teksti kuvamist.

5. Samm: Elementori kohandatud fondid, erijuhtum

Kui kasutad Elementor Pro-d koos „Custom Fonts" funktsiooniga, on loogika sama, kuid on kaks lisasammu.

Esiteks, muuda fondi tee Elementori seadetes. Mine Elementor → Custom Fonts, ava soovitud font ja sisesta URL-i väljale kohalik tee /wp-content/fonts/your-font.woff2 välise CDN-i või Google Fonts’i lingi asemel:

Teiseks, ehita Elementori CSS uuesti üles. Pärast tee muutmist mine Elementor → Tools → Regenerate CSS ja klõpsa regenereerimise nuppu. See sunnib Elementorit stiilifaile uute fonditeedega uuesti üles ehitama:

Pärast regenereerimist kontrolli, et fondi tee lehe HTML-is viitaks kohalikule failile, mitte CDN-ile. Seejärel lisa header.php failis (või wp_head kaudu nagu 4. sammus) selle fondi eellaadimine:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Ja vastav @font-face koos font-display: swap-iga:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Alternatiivne tee: pluginad automaatseks optimeerimiseks

Käsitsi meetod annab täieliku kontrolli, kuid nõuab tähelepanu pluginade uuendamisel (Elementori uuendus võib taastada standardse fondiühenduse). Kui soovid protsessi automatiseerida, on siin kaks pluginat, mis lahendavad ülesande ilma koodi redigeerimata.

OMGF (Optimize My Google Fonts). Tasuta plugin, mis skannib kõik saidi Google Fonts’id, laadib need kohalikult alla ja lisab automaatselt font-display: swap. Paigalda see, klõpsa „Optimize" ja kõik sinu teema Google Fonts’id muutuvad kohalikuks koos õigete päistega. Pro versioon oskab töötada Adobe Fonts’i ja mis tahes kolmanda osapoole CDN-i fontidega.

Swap Google Fonts Display. Minimalistlik plugin, mis teeb täpselt ühte asja: lisab lennult font-display: swap kõigile Google Fonts’idele. See ei laadi kohalikult alla, kuid eemaldab PageSpeed Insightsi hoiatuse 10 sekundiga pärast paigaldamist. Sobib ajutise lahendusena või kui kohalik fondi majutus pole kriitiline.

Pluginad säästavad aega, kuid pea meeles: need töötavad ainult Google Fonts’iga. Ikoonifonte (Font Awesome, eicons) ja Elementori kohandatud fonte need ei puuduta; nende jaoks pead ikka läbima käsitsi sammud 1-5.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean eellaadima KÕIK saidi fondid?

Ei. <link rel="preload"> on mõttekas ainult ühe või kahe fondi puhul, mis ilmuvad esimesel ekraanil, näiteks H1 pealkirja font ja põhiteksti font. Kümne fondi eellaadimine annab vastupidise efekti: brauser kulutab ribalaiust failidele, mida praegu vaja pole, ja aeglustab kriitilise sisu laadimist. Eellaadi ainult esimeses vaateaknas kasutatavaid fonte. Tüüpilise blogi puhul on see üks pealkirja font ja üks tekstifont, kokku kaks woff2 faili. Ikoonifondi tasub eellaadida ainult siis, kui ikoon ilmub esimesel ekraanil (menüü, otsing). Kõik muu laadib kerimise ajal, kahjustamata PageSpeedi mõõdikuid.

Mis siis, kui sait „laguneb" pärast stiilide keelamist?

Kõige levinum stsenaarium: keelasid elementor-icons ja kadusid liuguri nooled või otsinguikoon. Lahendus on enne keelamist kontrollida, millised konkreetsed elemendid fonti kasutavad. Ava DevTools (F12), Elements vahekaart, leia ikoon ja vaata CSS klassi. Kui klass algab fa-, on see Font Awesome. Kui eicon-, on see eicons. Keela ainult see, mida tegelikult kasutatakse, ja ühenda samad failid kohalikult; visuaalselt ei muutu midagi. Sait „laguneb" kahel juhul: kas keelasid stiili, mis kandis lisaks fondile ka CSS reegleid (harv, kuid juhtub selliste teemadega nagu Astra), või ei ühendanud fonti kohalikult uuesti. Esimesel juhul eralda CSS reeglid keelatud failist ja kopeeri need oma wp_head plokki. Teisel juhul lisa lihtsalt puuduv @font-face.

Kas see meetod töötab iga WordPressi teema puhul?

Jah, mööndustega. Põhimõte dequeue style → local fonts → font-display: swap → preload on universaalne. Muutuvad ainult stiilide käepidemed: Astra puhul on see astra-google-fonts, GeneratePressi puhul generate-fonts, OceanWP puhul oceanwp-google-fonts. Oma teema käepideme leidmiseks ava lehe lähtekood (Ctrl+U), otsi <link rel="stylesheet" koos fondiga ja vaata sildi id-d; see ongi käepide. Seejärel asenda see wp_dequeue_style sees. Kaasaegsed teemad (2024-2026) lisavad üha sagedamini font-display: swap vaikimisi: Twenty Twenty-Five ja theme.json-il põhinevad plokiteemad juba omavad seda seadet. Enne koodi redigeerimist kontrolli, kas sinu teema juba teeb kõik õigesti ja hoiatuse põhjustab ainult eraldi plugina ikoonifont.

Kas fondide kohalikult kopeerimine on kohustuslik?

Tehniliselt ei ole. font-display: swap töötab ka CDN-i kaudu ühendatud fontidega (Google Fonts, cdnjs). Kuid kohalik majutus annab kaks eelist: esiteks eemaldad täiendava DNS-päringu kolmanda osapoole domeeni (säästes 50-200 ms) ja teiseks ei sõltu sa CDN-i käideldavusest. Kui Google Fonts maas on, jääb sinu sait loetava tekstiga. Tootmissaidi puhul on kohalik majutus parim praktika; lemmikloomaprojekti puhul on see valikuline. Erand: ikoonifondid. Font Awesome, eicons ja dashicons laadivad pluginast (definitsiooni järgi kohalikult); nende juurkausta kopeerimine on vajalik ainult selleks, et „kinni püüda" laadimise kontroll pärast dequeued’i. Fail ise on juba füüsiliselt serveris.

Mida teha fondihoiatusega: lõplik algoritm

Mine läbi selle juhendi viis sammu ja hoiatus „Ensure text remains visible during webfont load" kaob PageSpeed Insightsi raportist. Lühidalt: keela standardne ühendus → paiguta fondid kohalikult → too need tagasi koos font-display: swap-iga → eellaadi kriitiline woff2 → Elementori puhul muuda lisaks tee ja ehita CSS uuesti üles. Tulemusena on tekst saidil koheselt nähtav, LCP ja FCP mõõdikud paranevad ning külastaja ei näe „hüppavat" lehte.

Kui sa ei soovi koodi süveneda, alusta OMGF pluginast Google Fonts’i jaoks. Ikoonifontide jaoks ei ole „võluime" pluginat; neid pead ikka käsitsi töötlema, kuid see on 20 minutit tööd, mis tasub end ära kõrgemate PageSpeedi skooride ja reaalse laadimiskiiruse paranemisega. Proovi järele ja testi pärast iga muudatust; ainult korduv audit näitab, et probleem on tegelikult lahendatud.