Google-fonttien itseisännöinti parempien Core Web Vitals -tulosten saavuttamiseksi

Google-fonttien itseisännöinti parempien Core Web Vitals -tulosten saavuttamiseksi

Kun verkkosivustojen omistajat ja kehittäjät pyrkivät optimoimaan verkkosivujaan paremman user experience ja hakukonesijoitusten saavuttamiseksi, Core Web Vitals on noussut keskeiseksi mittaristoksi. Google Fonts tarjoaa monipuolisen valikoiman typografisia vaihtoehtoja, mutta voi toisinaan vaikuttaa negatiivisesti Core Web Vitals -tuloksiin. Tässä artikkelissa tutkimme, miksi Google-fonttien itseisännöinti voi olla hyödyllistä verkkosivustosi suorituskyvylle, erityisesti Core Web Vitals -mittareiden osalta. Tarjoamme myös esimerkkejä ja parhaita käytäntöjä, jotka osoittavat, miten fonttien itseisännöinti voi johtaa merkittäviin parannuksiin.

Core Web Vitals -mittareiden ymmärtäminen

Core Web Vitals on kolmen suorituskykymittarin joukko, joka mittaa verkkosivun latausnopeuden, vuorovaikutteisuuden ja visuaalisen vakauden eri osa-alueita:

1. Largest Contentful Paint (LCP): LCP mittaa aikaa, joka kuluu verkkosivun suurimman elementin (yleensä kuvan tai tekstilohkon) näkymiseen näkymäalueella. Ihanteellinen LCP tulisi tapahtua ensimmäisen 2,5 sekunnin aikana nopean sisällön näyttämisen varmistamiseksi.

2. First Input Delay (FID): FID mittaa viivettä käyttäjän ensimmäisen vuorovaikutuksen (esim. painikkeen napsautus) ja selaimen vastauksen välillä. Hyvän FID:n tulisi olla alle 100 ms sujuvan user experience takaamiseksi.

3. Cumulative Layout Shift (CLS): CLS mittaa sivun latauksen aikana tapahtuvan odottamattoman asettelun siirtymisen määrää. Matala CLS-arvo (alle 0,1) osoittaa vakaata visuaalista kokemusta, sillä käyttäjät eivät pidä sisällön odottamattomasta siirtymisestä lukemisen tai vuorovaikutuksen aikana.

Google-fonttien vaikutus Core Web Vitals -tuloksiin

Google Fonts, joka sisällytetään usein verkkosivuille typografian ja suunnittelun parantamiseksi, voi vaikuttaa merkittävästi Core Web Vitals -tuloksiin, erityisesti Largest Contentful Paint (LCP) ja Cumulative Layout Shift (CLS) -mittareihin:

Useimmille ihmisille, joiden kanssa keskustelen, tämä on uutta tietoa. Google CDN:n pitäisi olla maailman paras. Miksi siis Google-fontit ovat huonoja sivunopeudelle?

1. Tyylitiedosto ei ole koskaan selaimen välimuistissa uusille vierailijoille. Ensimmäinen ongelma Google-fonttien kanssa on, että ne ovat riippuvaisia ulkoisesta tyylitiedostosta, jota isännöi fonts.google.com tai fonts.googleapis.com. Tätä tyylitiedostoa ei voi uudelleenkäyttää eri verkkotunnusten välillä (kuten monet näyttävät luulevan). Tämä tarkoittaa, että renderöintiä estävää tyylitiedostoa ei koskaan tarjoilla nopeasta selaimen välimuistista ensivierailijoille, ja se hidastaa aina hieman sivun renderöintiosaa. 

2. Se vaatii 2 yhteyttä 2 uuteen palvelimeen. Toinen ongelma on, että CSS-tiedoston ja fonttitiedostojen lataamiseksi meidän täytyy muodostaa yhteys 2 eri palvelimeen. Jokaisella uuden palvelimen ensimmäisellä yhteydellä on merkittävä lisäkuorma ja se vie ylimääräistä aikaa. Aikaa, jonka olisimme voineet säästää tarjoilemalla tiedostot jo avoimen yhteyden kautta omalta palvelimeltamme. Tämän välttämiseksi Google neuvoo käyttämään preconnect-yhteyttä heidän verkkotunnuksiinsa. Se lieventää ongelmaa hieman, mutta on silti kaukana täydellisestä
   

   <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

3. Sinulla on rajoitettu hallinta font-display -attribuuttiin. Vaikka Google fonts antaa sinun asettaa font-display-attribuutin, voit määrittää sen vain globaalisti. Tämä tarkoittaa, että kaikki woff2-tiedostot saavat saman font-display-asetuksen
   

4. Woff2-tiedoston lopullinen sijainti on tuntematon. Tämä tarkoittaa, että emme voi esilataa tärkeimpiä fonttejamme. Tämä tarkoittaa, että fonttitiedostomme asetetaan latausjonoon suhteellisen myöhään ja saamme todennäköisesti näkyvän asettelun siirtymisen, jonka aiheuttaa muotoilemattoman tekstin välähdys (FOUT)

5. Sinulla ei ole hallintaa fonttitiedostoihin. 

Google-fonttien itseisännöinnin edut

Google-fonttien itseisännöinti tarkoittaa fonttitiedostojen tarjoamista omilta palvelimiltasi ulkoisten Google-palvelimien sijaan. Tämä lähestymistapa voi tuottaa useita etuja, erityisesti Core Web Vitals -mittareiden osalta:

1. Parannettu fonttien toimitusnopeus: Fonttien itseisännöinti vähentää riippuvuutta ulkoisista palvelimista, mikä johtaa nopeampaan fonttien toimitukseen ja siten tekstisisällön nopeampaan renderöintiin. Tämä parannus voi vaikuttaa positiivisesti LCP:hen varmistaen, että suurin tekstielementti tulee näkyviin nopeammin.

2. Vähentyneet asettelun siirtymät: Itseisännöimällä Google-fontteja voit hallita, miten fontti ladataan ja näytetään, mikä minimoi viivästyneen fonttirenderöinnin aiheuttamat asettelun siirtymät. Tämä auttaa parantamaan verkkosivusi yleistä visuaalista vakautta ja vaikuttaa positiivisesti CLS:ään.

Parhaat käytännöt Google-fonttien itseisännöintiin

Optimoidaksesi itseisännöidyt Google-fonttisi parempien Core Web Vitals -tulosten saavuttamiseksi, harkitse seuraavien parhaiden käytäntöjen toteuttamista:

1. Käytä WOFF2-muotoa: Käytä ainoastaan WOFF2-tiedostomuotoa, sillä se tarjoaa paremman pakkauksen ja nopeammat latausajat, mikä edistää parempien LCP- ja CLS-arvojen saavuttamista.

2. Fonttien osittainen sisällyttäminen: Fonttitiedostojen koon pienentämiseksi entisestään harkitse fonttien osittaista sisällyttämistä, joka tarkoittaa vain verkkosivusi sisällölle tarvittavien merkkien sisällyttämistä. Tämä voi johtaa nopeampaan fonttien lataamiseen ja parempiin Core Web Vitals -tuloksiin.

3. Strateginen font-display-attribuutti: Määritä font-display-attribuutti strategisesti hallitaksesi tekstin renderöintiä fontin latauksen aikana. "swap"-arvo esimerkiksi nopeuttaa First Contentful Paint -aikaa varmistamalla, että varafontteja näytetään, kunnes verkkofontti on ladattu kokonaan. "optional"-arvo estää asettelun siirtymät, koska fonttitiedostoa ei koskaan vaihdeta. Strateginen yhdistelmä näistä kahdesta optimoi usein sekä Cumulative Layout Shift- että First Contentful Paint -tulokset.

4. Esilataa fontit: Varmista, että fontit ovat saatavilla mahdollisimman aikaisin esilataamalla tärkeimmät fontit link preload -mekanismilla
   
   

   <link rel="preload" as="font" href="fonts.woff2" crossorigin>

Kuinka itseisännöidä Google-fontti (oikealla tavalla)

Google-fontin lataaminen ja itseisännöinti on suoraviivainen prosessi. Muista, että sinun tulisi aina tarkistaa fontin lisenssi ja käyttöoikeudet ennen sen lataamista ja käyttämistä verkkosivustollasi tai projekteissasi. Monet Google Fonts ovat saatavilla avoimen lähdekoodin lisenssillä, mutta joillakin voi olla rajoituksia kaupalliseen käyttöön.

Tässä on esimerkki Google-fontin lataamisesta ja itseisännöinnistä:

1. Siirry Google Fonts -verkkosivustolle osoitteessa https://fonts.google.com/.

2. Valitse haluamasi fontti ja valitse fonttikoot, jotka haluat sisällyttää. 

3. Fonttisivulla napsauta yläpalkin 'selected families' -painiketta. Sieltä löydät linkin Googlen isännöimään tyylitiedostoon. 
   
   

   

4. Kopioi tämän tyylitiedoston URL-osoite ja avaa se selaimessasi. Näet nyt kaikki fontille saatavilla olevat font-face-määrittelyt. 
   
   

   

5. Saatat huomata, että woff2-tiedostoja on enemmän kuin yksi, vaikka käytimme vain yhtä fonttitiedostoa. Tämä johtuu siitä, että eri unicode-alueille on oma fonttitiedostonsa. Selvittääksesi, mitkä fontit sinun tulisi ladata, lisää tilapäisesti Googlen isännöimä tyylitiedosto verkkosivustollesi. Käytä pikanäppäintä Ctrl-Shift-I avataksesi Chromen kehittäjätyökalut. Siirry Network-välilehdelle ja napsauta Font. Päivitä nyt sivu (Ctrl-r) nähdäksesi, mikä fontti käynnistyy ladattavaksi.
   
   

6. Yhdistä tämä fonttitiedoston nimi vastaavaan woff2-tiedostoon tyylitiedostossa. Täydellistä! Nyt tiedät, mitä fonttitiedostoa verkkosivustosi käyttää!
   

7. Seuraava vaihe on kopioida koko fontin URL-osoite ja avata se selaimessasi. Tämä käynnistää fonttitiedoston latauksen. Kopioi tämä tiedosto verkkosivustollesi.
   

8. Kopioi vaiheessa 7 käytetyn verkkofontin CSS ja liitä se tyylitiedostoosi. Älä unohda vaihtaa URL-osoitetta Google CDN:stä omalle palvelimellesi (esimerkiksi '/fonts/roboto400.woff2')

9. Esilataa fontti (jos se on visuaalisesti tärkeä fontti)

Nyt olet onnistuneesti ladannut ja itseisännöinyt valitsemasi Google-fontin. Muista noudattaa fontin lisenssiehtoja ja mainita fontti lisenssin edellyttämällä tavalla tarvittaessa.

Tosielämän esimerkki

<!DOCTYPE html>
<html>
<head>
  <title>Itseisännöidyt Google-fontit</title>
  <!-- esilataa fontti -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Itseisännöity Google Sans -fontti WOFF2-muodossa */
    @font-face {
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      src: url('/path/to/google-sans.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback system-ui-fonttiin */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Tervetuloa verkkosivustolleni</h1>
  <p>Tämä on sivu, joka käyttää Google-sans-fonttia system-ui-varafontilla.</p>
</body>
</html>