Self host Google fonts voor betere Core Web Vitals

Zelf hosten van Google Fonts voor verbeterde Core Web Vitals

Terwijl website-eigenaren en ontwikkelaars ernaar streven hun webpagina's te optimaliseren voor een betere gebruikerservaring en ranking in zoekmachines, zijn Core Web Vitals naar voren gekomen als een cruciale set meetwaarden. Google Fonts, hoewel ze een divers aanbod aan typografie-opties bieden, kunnen soms een negatieve invloed hebben op de Core Web Vitals. In dit artikel zullen we onderzoeken waarom het zelf hosten van Google Fonts voordelig kan zijn voor de prestaties van uw website, met name met betrekking tot de Core Web Vitals. We zullen ook voorbeelden en best practices geven om aan te tonen hoe het zelf hosten van fonts kan leiden tot aanzienlijke verbeteringen.

Core Web Vitals begrijpen

Core Web Vitals zijn een set van drie prestatiestatistieken die verschillende aspecten van de laadsnelheid, interactiviteit en visuele stabiliteit van webpagina's meten:

1. Largest Contentful Paint (LCP): LCP meet de tijd die het duurt voordat het grootste element op een webpagina (meestal een afbeelding of tekstblok) zichtbaar wordt in de viewport. Een ideale LCP moet binnen de eerste 2,5 seconden optreden om een snelle weergave van de inhoud te garanderen.

2. First Input Delay (FID): FID meet de tijdsvertraging tussen de eerste interactie van een gebruiker met een pagina (bijv. op een knop klikken) en de reactie van de browser op die interactie. Een goede FID moet lager zijn dan 100ms voor een soepele gebruikerservaring.

3. Cumulative Layout Shift (CLS): CLS meet de hoeveelheid onverwachte lay-outverschuiving die optreedt tijdens het laden van de pagina. Een lage CLS-waarde (onder 0,1) duidt op een stabiele visuele ervaring, aangezien gebruikers het niet prettig vinden als inhoud onverwachts verschuift terwijl ze proberen te lezen of interactie te hebben met de pagina.

Impact van Google Fonts op Core Web Vitals

Google Fonts, vaak opgenomen in webpagina's om typografie en ontwerp te verbeteren, kunnen een aanzienlijke impact hebben op Core Web Vitals, voornamelijk op de Largest Contentful Paint (LCP) en de Cumulative Layout Shift (CLS):

Voor de meeste mensen die ik spreek is dit nieuwe informatie. De Google CDN zou de beste ter wereld moeten zijn. Dus waarom is Google fonts slecht voor pagespeed?

1. De stylesheet staat nooit in de browsercache voor nieuwe bezoekers. Het eerste probleem met Google fonts is dat het afhankelijk is van een externe stylesheet gehost door fonts.google.com of fonts.googleapis.com. Deze stylesheet kan niet worden hergebruikt door verschillende domeinen (zoals veel mensen lijken te denken). Dit betekent dat de render blocking stylesheet nooit wordt geserveerd vanuit de supersnelle browsercache voor nieuwe bezoekers en altijd het rendergedeelte van de pagina een beetje vertraagt. 

2. Het vereist 2 verbindingen naar 2 nieuwe servers. Het tweede probleem is dat om het CSS-bestand en de lettertypebestanden te downloaden, we verbinding moeten maken met 2 verschillende servers. Elke initiële verbinding met een nieuwe server heeft ernstige overhead en kost wat extra tijd. Tijd die we hadden kunnen besparen door de bestanden vanaf onze reeds geopende verbinding met onze server te serveren. Om dit te voorkomen adviseert Google om te preconnecten naar hun domeinen. Dat zal het probleem een beetje verzachten, maar het is nog verre van perfect
   

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

3. U heeft beperkte controle over het font-display attribuut. Hoewel Google fonts u toestaat het font-display attribuut in te stellen, kunt u dit alleen globaal definiëren. Dit betekent dat alle woff2 bestanden dezelfde font-display instelling krijgen
   

4. De uiteindelijke locatie van het woff2 bestand is onbekend. Dit betekent dat we onze belangrijkste fonts niet kunnen preloaden. Dit betekent dat onze fontbestanden relatief laat in de wachtrij voor download worden geplaatst en we zullen waarschijnlijk een zichtbare lay-outverschuiving krijgen veroorzaakt door de flash of unstyled text (FOUT)

5. U heeft geen controle over de fontbestanden. 

Voordelen van het zelf hosten van Google Fonts

Het zelf hosten van Google Fonts houdt in dat u de fontbestanden vanaf uw eigen servers serveert in plaats van te vertrouwen op externe Google-servers. Deze aanpak kan verschillende voordelen opleveren, met name met betrekking tot de Core Web Vitals:

1. Verbeterde Font Leveringssnelheid: Het zelf hosten van fonts vermindert de afhankelijkheid van externe servers, wat leidt tot snellere fontlevering en bijgevolg snellere rendering van tekstinhoud. Deze verbetering kan een positieve invloed hebben op LCP, waardoor het grootste tekstelement sneller zichtbaar wordt.

2. Verminderde Lay-outverschuivingen: Door Google Fonts zelf te hosten, kunt u bepalen hoe het font wordt geladen en weergegeven, waardoor de kans op lay-outverschuivingen veroorzaakt door vertraagde fontrendering wordt geminimaliseerd. Dit helpt de algehele visuele stabiliteit van uw webpagina te verbeteren en heeft een positief effect op CLS.

Best Practices voor het zelf hosten van Google Fonts

Om uw zelfgehoste Google Fonts te optimaliseren voor betere Core Web Vitals-prestaties, overweeg dan de volgende best practices te implementeren:

1. Gebruik WOFF2 Formaat: Gebruik alleen het WOFF2 bestandsformaat, aangezien dit betere compressie en snellere laadtijden biedt, wat bijdraagt aan verbeterde LCP- en CLS-waarden.

2. Font Subsetting: Om de bestandsgrootte van fonts verder te verkleinen, overweeg dan font subsetting te gebruiken, wat inhoudt dat alleen de tekens worden opgenomen die nodig zijn voor uw webpagina-inhoud. Dit kan leiden tot sneller laden van fonts en verbeterde Core Web Vitals.

3. Strategisch Font-Display Attribuut: Configureer het font-display attribuut strategisch om tekstrendering tijdens het laden van fonts te regelen. De "swap" waarde zal bijvoorbeeld de first contentful paint versnellen door ervoor te zorgen dat fallback fonts worden weergegeven totdat het webfont volledig is geladen. De "optional" waarde zal lay-outverschuivingen voorkomen door het fontbestand nooit te wisselen. Een strategische mix van deze twee zal vaak zowel de Cumulative Layout Shift als de First Contentful Paint optimaliseren.

4. Preload fonts: Zorg ervoor dat fonts zo vroeg mogelijk beschikbaar zijn door de belangrijkste fonts te preloaden met het link preload mechanisme
   
   

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

Hoe een Google font zelf te hosten (de juiste manier)

Het downloaden en zelf hosten van een Google Font is een eenvoudig proces. Houd er rekening mee dat u altijd de licentie en gebruiksrechten van het font moet controleren voordat u het downloadt en op uw website of projecten gebruikt. Veel Google Fonts zijn beschikbaar onder open-source licenties, maar sommige kunnen beperkingen hebben voor commercieel gebruik.

Hier is een voorbeeld van hoe u een Google Font kunt downloaden en zelf hosten:

1. Ga naar de Google Fonts website op https://fonts.google.com/.

2. Selecteer het font dat u wilt gebruiken en kies de lettergroottes die u wilt opnemen. 

3. Klik op de fontpagina op de bovenste balk op de knop 'selected families'. Daar vindt u de link naar de door Google gehoste stylesheet. 
   
   

   

4. Kopieer de url van deze stylesheet en open deze in uw browser. U ziet nu alle font-face declaraties die beschikbaar zijn voor het font. 
   
   

   

5. Misschien merkt u dat er meer dan 1 woff2 bestand is, ook al hebben we maar één fontbestand gebruikt. Dat komt omdat er een ander fontbestand is voor verschillende unicode bereiken. Om te leren welke fonts we moeten downloaden, moet u tijdelijk de door Google gehosted stylesheet aan uw website toevoegen. Gebruik de sneltoets Ctrl-Shift-I om uw chrome devtools te openen. Navigeer naar het netwerk tabblad en klik op Font. Vernieuw nu de pagina (Ctrl-r) om te zien welk font wordt geactiveerd voor download.
   
   

6. Match dit fontbestandsnaam met het overeenkomstige woff2 bestand in de StyleSheet. Perfect! Nu weet u welk fontbestand voor uw website wordt gebruikt!
   

7. De volgende stap is om het volledige font use te kopiëren en dat in uw browser te openen. Dit zal een download voor dit fontbestand activeren. Kopieer dit bestand naar uw website.
   

8. Kopieer de CSS voor het gebruikte webfont in stap 7 en plak het in uw stylesheet. Vergeet niet de url van de Google CDN naar uw eigen server te wijzigen (bijvoorbeeld '/fonts/roboto400.woff2')

9. Preload het font (als het een visueel belangrijk font is)

Nu heeft u met succes het Google Font van uw keuze gedownload en zelf gehost. Vergeet niet te voldoen aan de licentievoorwaarden van het font en het font toe te schrijven zoals vereist door de licentie indien nodig.

Een praktijkvoorbeeld

<!DOCTYPE html>
<html>
<head>
  <title>Zelf-Gehoste Google Fonts</title>
  <!-- preload het font -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Zelf-gehost Google Sans font met WOFF2 formaat */
    @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 naar system-ui font */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welkom op Mijn Website</h1>
  <p>Dit is een pagina die Google-sans gebruikt met system-ui fallback font.</p>
</body>
</html>