Oletko koskaan miettinyt, miten voit parantaa WordPress-sivustosi suorituskykyä ja tietosuojaa? Yksi tehokas tapa on tallentaa ja jakaa Google Fontit paikallisesti Elementor PRO -lisäosan avulla. Tämä ei ainoastaan nopeuta sivustosi latausaikoja, vaan myös parantaa tietosuojaa ja auttaa noudattamaan GDPR-säädöksiä.
Kun fontit ladataan suoraan omalta palvelimeltasi, käyttäjät pääsevät nauttimaan nopeammasta ja sujuvammasta käyttökokemuksesta. Lisäksi, kun vältät tietojen jakamisen kolmansien osapuolten kanssa, voit olla varma, että sivustosi on tietoturvallinen ja käyttäjien luottamus säilyy.
Yhdistämällä WordPressin Elementor PRO lisäosan ja välimuistilisäosan, kuten LiteSpeed Cache tai Accelerate WP hyödyt, sivustostasi tulee entistäkin käyttäjäystävällisempi ja nopeampi. Kun käytät välimuistilisäosaa fonttien esilataukseen, lisäosa lisää automaattisesti tarvittavat preload-komennot sivustosi HTML-koodiin. Tämä varmistaa, että fontit ovat valmiina käytettäväksi heti, kun niitä tarvitaan, mikä vähentää viivettä ja estää fonttien välkkymisen (FOIT, Flash of Invisible Text). Latausnopeus on yksi hakukoneoptimmoinnin kriittinen tekijä.
1. Lataa Google Fontit tiedostona
Siirry osoitteeseen https://fonts.google.com/ ja etsi sopiva tai valittu fontti.
Visio Sites Oy käyttää verkkosivustolla Work Sans ja Roboto -fontteja.
Paina ensiksi ”Get Font”.
Etsi hakutoiminta käyttämällä myös muut haluamasi fontit ja paina ”Get Font”.
Kun olet löytänyt kaikki tarvitsemasi Google Fontit, paina ”Download Al”.
Yllä olevasta kuvasta voit huomata, että Work Sans -fontti on tyyppiä Variable ja Roboto tyyppiä Static. Variable-fontit ja static-fontit eroavat toisistaan merkittävästi. Variable-fontit sisältävät kaikki fonttivariantit yhdessä tiedostossa, kun taas static-fontit vaativat jokaiselle variantille oman tiedoston. Tämä tekee variable-fonteista tehokkaampia ja nopeampia, koska ne vähentävät HTTP-pyyntöjen määrää ja parantavat sivuston latausaikoja. Lisäksi variable-fontit tarjoavat laajemman valikoiman typografisia muunnelmia ja tukevat CSS-animaatioita, mikä mahdollistaa sujuvammat ja dynaamisemmat typografiset efektit. Tiivistettynä, variable tyypin fontit ovat tehokkaampia ja parempia.
Kun fontit ovat ladattu, pura zip-tiedosto. Ainoastaan .ttf tyypin tiedostoja tarvitaan.
2. Lataa fontit Elementor Pro Custom Fonts osioon
Siirry WordPress hallintapaneeliin ja paina Elementor -> Custom Fonts.
Variable fontin lisääminen Elementor Pro lisäosaan
Nimea fonttisi ja paina ”Add new font”. Lataa fontin .ttf tiedosto (esim WorkSans-VariableFont_wght.tff) mediakirjastosi kautta ja paina ”Julkaise”.
Static fontin lisääminen Elementor Pro lisäosaan
Staattisen fontin lisääminen Elementor Pro lisäosaan tapahtuu hyvin samalla tavalla, kun Variable tyyppisen fontin. Tässä tulee kuitenkin ottaa huomioon, että tehokkainta on ladata sivustollesi ainoastaan ne fontin vahvuudet, joita sivustollasi tarvitset. Itse käytän ainoastaan staattisen Roboto fontin vahvuuksia 400 ja 500 sivustollani.
3. Aseta sivustolle ladatut fontit yleisiksi fonteiksi
Siirry Elementor PRO -lisäosan sivuston asetukset osioon. Ja valitse yleiset kirjaisimet
Aseta jokaisen fonttisi kirjaisinperheeksi aiemmin lataamasi static font tai variable font.
Nyt Google fontit ovat ladattu suoraan sivustollesi, josta jakelet niitä tehokkaammin
