Kun ajat sivuston PageSpeed Insightsin läpi, yksi yleisimmistä diagnooseista on "Varmista, että teksti pysyy näkyvissä webfonttien latauksen aikana". Ongelma on tuttu kaikille, jotka ovat asentaneet Elementorin, Astra-teeman tai yhdistäneet Google Fontsit: sillä aikaa kun selain lataa fonttitiedostoa, sivun teksti puuttuu kokonaan. Valkoinen ruutu otsikon paikalla, sekunnin murto-osien tyhjyys, ja kävijä on jo lähtenyt.

Teknisesti tätä kutsutaan FOITiksi (Flash of Invisible Text). Ongelman juuri on font-display-direktiivissä, jota selain käyttää oletuksena. Jos font-display: swap-arvoa ei ole erikseen määritetty, selain odottaa fontin latautumista eikä näytä tekstiä ennen kuin tiedosto on saatu. Ja jos fontti latautuu CDN:stä kolmannen osapuolen domainin kautta, viive kasvaa, ja PageSpeed Insights nostaa varoituksen.

Tämä ratkaistaan kahdella asialla: ensinnäkin jokaiseen @font-face-määritykseen on lisättävä font-display: swap, jotta selain näyttää tekstin välittömästi järjestelmäfontilla ja "vaihtaa" sen tilalle ladatun mukautetun fontin. Toiseksi, kriittisen tärkeät fontit (se, jota käytetään ensimmäisen ruudun otsikossa) tulee esiladata <link rel="preload">-tagilla. Alla on vaiheittainen ohje siitä, miten tämä tehdään WordPress-ympäristössä, huomioiden lisäosat kuten Elementor ja teemat kuten Astra.

💡 Nopea yleiskatsaus:

• Avaa PageSpeed Insights -raportti ja merkitse muistiin ongelmalliset fontit diagnostiikkaosiosta
• Ota lisäosan ja teeman tyylit pois käytöstä wp_dequeue_style-funktiolla functions.php-tiedostossa
• Kopioi fonttitiedostot paikalliseen kansioon ja luo font-face uudelleen font-display: swap -määrityksellä
• Lisää esilataus yhdelle tai kahdelle ensimmäisen ruudun fontille
• Elementorin mukautetuille fonteille vaihda polku paikalliseksi ja rakenna CSS uudelleen

Vaihe 1: etsi ongelmalliset fontit raportista

Aja auditointi PageSpeed Insights -työkalulla, odota tulos ja etsi diagnostiikkaosio. Etsimme kohtaa "Varmista, että teksti pysyy näkyvissä webfonttien latauksen aikana".

Laajenna lista nähdäksesi tarkat fonttien URL-osoitteet, joista puuttuu font-display: swap. Yleensä nämä ovat:

• fontawesome-webfont.woff2, Font Awesome Elementorista;
• eicons.woff2, Elementorin ikonifontti;
• Google Fontsit (Open Sans, Roboto, Montserrat), jos teema hakee ne CDN:n kautta.

Kirjoita tiedostonimet ylös; niitä tarvitaan seuraavissa vaiheissa. Pääasia nyt on ymmärtää, mikä lisäosa tai teema on vastuussa mistäkin fontista. Font Awesome ja eicons tulevat Elementorista. Google Fontsit yhdistää useimmiten teema; Astrassa tämä on astra-google-fonts-koukku.

Vaihe 2: ota pois käytöstä tyylit, jotka lataavat fontteja

Nyt tehtävänä on poistaa näiden fonttien vakioliitännät, jotta voimme tuoda ne takaisin oikeilla asetuksilla. Mene lapsiteeman functions.php-tiedostoon (tai koodilisäosaan kuten Code Snippets) ja lisää:

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);

Prioriteetti 9999 on tärkeä: koukun täytyy suorittua SEN JÄLKEEN, kun lisäosat ja teema ovat rekisteröineet tyylinsä. Jos fontti latautuu edelleen, tarkista, kutsuuko jokin toinen lisäosa sitä (esimerkiksi valikko tai yhteydenottolomake voi liittää oman versionsa Font Awesomesta). Etsi lisäosan tiedostoista merkkijonoa wp_enqueue_style ja vastaavaa kahvaa.

Koodin lisäämisen jälkeen Font Awesome -kuvake sivustolla katoaa tilapäisesti; tämä on normaalia. Tuomme sen takaisin vaiheessa 4.

Vaihe 3: kopioi fonttitiedostot paikalliseen kansioon

Kun fontti liitetään CDN:n kautta tai lisäosan kautta, selain tekee ylimääräisen DNS-kyselyn kolmannen osapuolen domainiin. Fonttien paikallinen isännöinti poistaa tämän viiveen. Toimintatapa:

• Etsi fonttitiedostot lisäosan rakenteesta. Font Awesomelle Elementorista polku on: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. eiconsille: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Google Fontseille lataa .woff2-tiedostot Google Fonts CDN:stä.

• Luo kansio /wp-content/fonts/ sivuston juureen ja kopioi kaikki tarvittavat tiedostot sinne. .woff2-formaatti (nykyaikaiset selaimet) ja .woff (varavaihtoehto vanhemmille) riittävät.

• Jos fontin liitti teema Google Fonts CDN:n kautta, lataa ajantasainen .woff2-tiedosto manuaalisesti suoran linkin kautta tai käyttämällä OMGF-lisäosaa (siitä lisää alla).

Nyt jokaisella fontilla on paikallinen polku, kuten /wp-content/fonts/fontawesome-webfont.woff2. Siirrytään tärkeimpään osaan: niiden liittämiseen.

Vaihe 4: liitä fontit font-display: swap -määrityksellä ja esilatauksella

Tyylit on otettu pois käytöstä, tiedostot ovat paikoillaan. Nyt määrittelemme @font-face-säännön oikealla font-display: swap -direktiivillä ja lisäämme preload-tagin välitöntä latausta varten. Sijoita koodi functions.php-tiedostoon wp_head-koukun kautta:

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);

Prioriteetti 5 wp_head-koukussa tarkoittaa, että preload-tagit ilmestyvät <head>-osioon ensimmäisten joukossa, joten selain alkaa ladata fonttia ennen kuin se saavuttaa CSS:n. crossorigin="anonymous"-attribuutti on pakollinen fonttien esilatauksessa: ilman sitä selain ohittaa esilatauksen ja lataa tiedoston uudelleen.

Tärkeä vivahde: @font-face-säännön sisällä olevassa URL-osoitteessa ei saa olla kyselyparametreja, kuten ?#iefix tai ?v=4.7.0. PageSpeed Insights kompastuu niihin analyysin aikana. Linkin tulee olla puhdas: /wp-content/fonts/fontawesome-webfont.woff2, ja siinä kaikki.

Koodin lisäämisen jälkeen tyhjennä välimuisti (välimuistilisäosa + Cloudflare, jos käytössä) ja aja PageSpeed Insights uudelleen. Fonttivaroituksen pitäisi kadota. Font Awesome -kuvakkeet palaavat paikoilleen, mutta nyt ne eivät estä tekstin näyttämistä.

Vaihe 5: Elementorin mukautetut fontit, erikoistapaus

Jos käytät Elementor Prota "Mukautetut fontit" -ominaisuuden kanssa, logiikka on sama, mutta mukana on kaksi lisävaihetta.

Ensinnäkin, vaihda fontin polku Elementorin asetuksissa. Mene Elementor → Mukautetut fontit, avaa haluttu fontti ja määritä URL-kenttään paikallinen polku /wp-content/fonts/your-font.woff2 ulkoisen CDN:n tai Google Fonts -linkin sijaan:

Toiseksi, rakenna Elementorin CSS uudelleen. Polun vaihtamisen jälkeen mene Elementor → Työkalut → Regeneroi CSS ja napsauta uudelleenrakennuspainiketta. Tämä pakottaa Elementorin rakentamaan tyylitiedostot uusilla fonttipoluilla:

Uudelleenrakennuksen jälkeen varmista, että fontin polku sivun HTML:ssä johtaa paikalliseen tiedostoon, ei CDN:ään. Lisää sitten header.php-tiedostossa (tai wp_head-koukun kautta kuten vaiheessa 4) esilataus tälle fontille:

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

Ja vastaava @font-face font-display: swap -määrityksellä:

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
}

Vaihtoehtoinen polku: lisäosat automaattiseen optimointiin

Manuaalinen tapa antaa täyden hallinnan, mutta vaatii huomiota lisäosia päivitettäessä (Elementorin päivitys saattaa palauttaa fonttien vakioliitännän). Jos haluat automatisoida prosessin, tässä on kaksi lisäosaa, jotka ratkaisevat tehtävän ilman koodin muokkaamista.

OMGF (Optimize My Google Fonts). Ilmainen lisäosa, joka skannaa kaikki sivuston Google Fontsit, lataa ne paikallisesti ja lisää font-display: swap -määrityksen automaattisesti. Asenna se, napsauta "Optimoi", ja kaikki teemasi Google Fontsit muuttuvat paikallisiksi oikeilla otsikkotiedoilla. Pro-versio voi toimia Adobe Fontsien ja minkä tahansa kolmannen osapuolen CDN-fonttien kanssa.

Swap Google Fonts Display. Minimalistinen lisäosa, joka tekee täsmälleen yhden asian: lisää font-display: swap -määrityksen kaikkiin Google Fontseihin lennosta. Se ei lataa paikallisesti, mutta poistaa PageSpeed Insights -varoituksen 10 sekunnin asennuksella. Sopii väliaikaiseksi ratkaisuksi tai jos fonttien paikallinen isännöinti ei ole kriittistä.

Lisäosat säästävät aikaa, mutta muista: ne toimivat vain Google Fontsien kanssa. Ikonifontteja (Font Awesome, eicons) ja Elementorin mukautettuja fontteja ne eivät koske; sinun on silti käytävä läpi manuaaliset vaiheet 1-5.

⁉️🤔 Usein kysytyt kysymykset

Täytyykö KAIKKI sivuston fontit esiladata?

Ei. <link rel="preload"> on järkevää vain yhdelle tai kahdelle fontille, jotka näkyvät ensimmäisessä ruudussa, esimerkiksi H1-otsikon fontille ja leipätekstin fontille. Kymmenen fontin esilatauksella on päinvastainen vaikutus: selain käyttää kaistaa tiedostoihin, joita ei tarvita juuri nyt, ja hidastaa kriittisen sisällön latautumista. Esilataa vain fontit, joita käytetään ensimmäisessä näkymässä. Tyypilliselle blogille tämä on yksi otsikkofontti ja yksi tekstifontti, yhteensä kaksi woff2-tiedostoa. Ikonifontin esilataus on kannattavaa vain, jos kuvake näkyy ensimmäisessä ruudussa (valikko, haku). Kaikki muu latautuu vierityksen mukana vahingoittamatta PageSpeed-mittareita.

Entä jos sivusto "hajoaa" tyylien poistamisen jälkeen?

Yleisin skenaario: otit pois käytöstä elementor-icons-tyylin, ja liukusäätimen nuolet tai hakukuvake katosivat. Ratkaisu on tarkistaa ennen käytöstä poistamista, mitkä tietyt elementit käyttävät fonttia. Avaa DevTools (F12), Elements-välilehti, etsi kuvake ja katso CSS-luokkaa. Jos luokka alkaa fa-, se on Font Awesome. Jos eicon-, se on eicons. Ota pois käytöstä vain se, mitä todella käytetään, ja liitä samat tiedostot paikallisesti; visuaalisesti mikään ei muutu. Sivusto "hajoaa" kahdessa tapauksessa: joko otit pois käytöstä tyylin, joka fontin lisäksi sisälsi CSS-sääntöjä (harvinaista, mutta tapahtuu Astrans kaltaisten teemojen kanssa), tai et liittänyt fonttia uudelleen paikallisesti. Ensimmäisessä tapauksessa poimi CSS-säännöt käytöstä poistetusta tiedostosta ja kopioi ne wp_head-lohkoosi. Toisessa tapauksessa lisää vain puuttuva @font-face.

Toimiiko tämä menetelmä mille tahansa WordPress-teemalle?

Kyllä, tietyin varauksin. Periaate dequeue style → local fonts → font-display: swap → preload on universaali. Vain tyylien kahvat vaihtuvat: Astralle se on astra-google-fonts, GeneratePressille generate-fonts, OceanWP:lle oceanwp-google-fonts. Löytääksesi teemasi kahvan, avaa sivun lähdekoodi (Ctrl+U), etsi <link rel="stylesheet" fontin kanssa ja katso tagin id-attribuuttia; tämä on kahva. Korvaa se sitten wp_dequeue_style-funktiossa. Nykyaikaiset teemat (2024-2026) lisäävät yhä useammin font-display: swap -määrityksen valmiina: Twenty Twenty-Five ja theme.json-pohjaiset lohkoteemat sisältävät tämän asetuksen jo. Ennen koodin muokkaamista tarkista, tekeekö teemasi jo kaiken oikein ja johtuuko varoitus vain erillisen lisäosan ikonifontista.

Onko fonttien kopioiminen paikallisesti pakollista?

Teknisesti ei. font-display: swap toimii myös CDN:n kautta liitettyjen fonttien kanssa (Google Fonts, cdnjs). Mutta paikallinen isännöinti tarjoaa kaksi etua: ensinnäkin poistat ylimääräisen DNS-kyselyn kolmannen osapuolen domainiin (säästät 50-200 ms), ja toiseksi et ole riippuvainen CDN:n saatavuudesta. Jos Google Fonts kaatuu, sivustollasi on edelleen luettavaa tekstiä. Tuotantosivustolle paikallinen isännöinti on paras käytäntö; harrasteprojektille se on valinnaista. Poikkeus: ikonifontit. Font Awesome, eicons ja dashicons latautuvat lisäosasta (määritelmällisesti paikallisesti); niiden kopioiminen juurikansioon on tarpeen vain, jotta voit "kaapata" latauksen hallinnan dequeuen jälkeen. Itse tiedosto on jo fyysisesti palvelimella.

Mitä tehdä fonttivaroitukselle: lopullinen toimintamalli

Käy läpi tämän oppaan viisi vaihetta, ja varoitus "Varmista, että teksti pysyy näkyvissä webfonttien latauksen aikana" katoaa PageSpeed Insights -raportista. Lyhyesti: poista vakioliitäntä käytöstä → sijoita fontit paikallisesti → tuo ne takaisin font-display: swap -määrityksellä → esilataa kriittinen woff2 → Elementor-tapauksessa vaihda lisäksi polku ja rakenna CSS uudelleen. Lopputuloksena sivuston teksti on näkyvissä välittömästi, LCP- ja FCP-mittarit paranevat, eikä kävijä näe "hyppivää" sivua.

Jos et halua kaivautua koodiin, aloita OMGF-lisäosalla Google Fontseille. Ikonifonteille ei ole olemassa "taikapilleri"-lisäosaa; ne on silti käsiteltävä manuaalisesti, mutta se on 20 minuutin työ, joka maksaa itsensä takaisin korkeampina PageSpeed-pisteinä ja todellisina latausnopeuden parannuksina. Kokeile ja testaa jokaisen muutoksen jälkeen; vain toistettu auditointi osoittaa, että ongelma on todella ratkaistu.