Selvhost Google Fonts for bedre Core Web Vitals

Selvhosting af Google Fonts for forbedrede Core Web Vitals

Som ejere af hjemmesider og udviklere stræber efter at optimere deres websider for bedre user experience og placeringer i søgemaskinerne, er Core Web Vitals blevet et afgørende sæt af målinger. Google Fonts, som tilbyder et bredt udvalg af typografimuligheder, kan nogle gange påvirke Core Web Vitals negativt. I denne artikel vil vi undersøge, hvorfor selvhosting af Google Fonts kan være gavnligt for din hjemmesides ydeevne, særligt i forhold til Core Web Vitals. Vi vil også give eksempler og best practices for at demonstrere, hvordan selvhosting af fonte kan føre til betydelige forbedringer.

Forståelse af Core Web Vitals

Core Web Vitals er et sæt af tre ydeevnemålinger, der måler forskellige aspekter af en websides indlæsningshastighed, interaktivitet og visuel stabilitet:

1. Largest Contentful Paint (LCP): LCP måler den tid, det tager for det største element på en webside (normalt et billede eller en tekstblok) at blive synligt inden for viewporten. En ideel LCP bør forekomme inden for de første 2,5 sekunder for at sikre hurtig visning af indhold.

2. First Input Delay (FID): FID måler tidsforsinkelsen mellem en brugers første interaktion med en side (f.eks. at klikke på en knap) og browserens reaktion på den interaktion. En god FID bør være under 100ms for en problemfri user experience.

3. Cumulative Layout Shift (CLS): CLS måler mængden af uventet layout shift, der forekommer under sideindlæsning. En lav CLS-værdi (under 0,1) indikerer en stabil visuel oplevelse, da brugere ikke bryder sig om, at indhold forskyder sig uventet, mens de forsøger at læse eller interagere med siden.

Google Fonts' indvirkning på Core Web Vitals

Google Fonts, der ofte inkluderes på websider for at forbedre typografi og design, kan have en betydelig indvirkning på Core Web Vitals, primært på Largest Contentful Paint (LCP) og Cumulative Layout Shift (CLS):

For de fleste mennesker, jeg taler med, er dette ny information. Google CDN formodes at være det bedste i verden. Så hvorfor er Google Fonts dårligt for pagespeed?

1. Stylesheetet er aldrig i browserens cache for nye besøgende. Det første problem med Google Fonts er, at det er afhængigt af et eksternt stylesheet hostet af fonts.google.com eller fonts.googleapis.com. Dette stylesheet kan ikke genbruges af forskellige domæner (som mange mennesker synes at tro). Det betyder, at det renderingsblokkerende stylesheet aldrig serveres fra den superhurtige browsercache for førstegangsbesøgende og altid vil bremse renderingsdelen af siden en smule. 

2. Det kræver 2 forbindelser til 2 nye servere. Det andet problem er, at for at downloade CSS-filen og fontfilerne skal vi oprette forbindelse til 2 forskellige servere. Hver indledende forbindelse til en ny server har betydelig overhead og tager ekstra tid. Tid, som vi kunne have sparet ved at servere filerne fra vores allerede åbne forbindelse til vores server. For at undgå dette anbefaler Google at bruge preconnect til deres domæner. Det vil afhjælpe problemet en smule, men det er stadig langt fra perfekt
   

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

3. Du har begrænset kontrol over font-display-attributten. Selvom Google Fonts giver dig mulighed for at indstille font-display-attributten, kan du kun definere den globalt. Det betyder, at alle woff2-filer får den samme font-display -indstilling
   

4. Den endelige placering af woff2-filen er ukendt. Det betyder, at vi ikke kan preloade vores vigtigste fonte. Det betyder, at vores fontfiler sættes i kø til download relativt sent, og vi vil sandsynligvis få et synligt layout shift forårsaget af flash of unstyled text (FOUT)

5. Du har ingen kontrol over fontfilerne. 

Fordele ved selvhosting af Google Fonts

Selvhosting af Google Fonts indebærer at servere fontfilerne fra dine egne servere i stedet for at være afhængig af eksterne Google-servere. Denne tilgang kan give flere fordele, især i forhold til Core Web Vitals:

1. Forbedret fontleveringshastighed: Selvhosting af fonte reducerer afhængigheden af eksterne servere, hvilket fører til hurtigere fontlevering og dermed hurtigere rendering af tekstindhold. Denne forbedring kan positivt påvirke LCP og sikre, at det største tekstelement bliver synligt hurtigere.

2. Reducerede layout shifts: Ved at selvhoste Google Fonts kan du kontrollere, hvordan fonten indlæses og vises, hvilket minimerer risikoen for layout shifts forårsaget af forsinket fontrendering. Dette hjælper med at forbedre den overordnede visuelle stabilitet på din webside og påvirker CLS positivt.

Best practices for selvhosting af Google Fonts

For at optimere dine selvhostede Google Fonts for bedre Core Web Vitals-ydeevne bør du overveje at implementere følgende best practices:

1. Brug WOFF2-formatet: Brug kun WOFF2-filformatet, da det tilbyder bedre komprimering og hurtigere indlæsningstider, hvilket bidrager til forbedrede LCP- og CLS-værdier.

2. Font Subsetting: For yderligere at reducere fontfilstørrelser bør du overveje at bruge font subsetting, som indebærer kun at inkludere de tegn, der er nødvendige for din websides indhold. Dette kan føre til hurtigere fontindlæsning og forbedrede Core Web Vitals.

3. Strategisk font-display-attribut: Konfigurer font-display-attributten strategisk for at kontrollere tekstrendering under fontindlæsning. Værdien "swap" vil for eksempel fremskynde First Contentful Paint ved at sikre, at fallback-fonte vises, indtil webfonten er fuldt indlæst. Værdien "optional" vil forhindre layout shifts ved aldrig at skifte fontfilen. En strategisk blanding af disse to vil ofte optimere både Cumulative Layout Shift og First Contentful Paint.

4. Preload fonte: Sørg for, at fonte er tilgængelige så tidligt som muligt ved at preloade de vigtigste fonte med link preload-mekanismen
   
   

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

Sådan selvhoster du en Google Font (den rigtige måde)

At downloade og selvhoste en Google Font er en ligetil proces. Husk, at du altid bør gennemgå fontens licens og brugsrettigheder, før du downloader og bruger den på din hjemmeside eller i dine projekter. Mange Google Fonts er tilgængelige under open source-licenser, men nogle kan have begrænsninger for kommerciel brug.

Her er et eksempel på, hvordan du downloader og selvhoster en Google Font:

1. Gå til Google Fonts-hjemmesiden på https://fonts.google.com/.

2. Vælg den font, du vil bruge, og vælg de fontstørrelser, du ønsker at inkludere. 

3. På fontsiden klikker du på 'selected families'-knappen i topbaren. Der finder du linket til det Google-hostede stylesheet. 
   
   

   

4. Kopiér URL'en til dette stylesheet og åbn det i din browser. Du vil nu se alle font-face-deklarationerne, der er tilgængelige for fonten. 
   
   

   

5. Du bemærker måske, at der er mere end 1 woff2-fil, selvom vi kun brugte én fontfil. Det skyldes, at der er en forskellig fontfil for forskellige unicode-intervaller. For at finde ud af, hvilke fonte vi skal downloade, bør du midlertidigt tilføje det Google-hostede stylesheet til din hjemmeside. Brug genvejen Ctrl-Shift-I for at åbne dine Chrome DevTools. Navigér til netværksfanen og klik på Font. Opdater nu siden (Ctrl-r) for at se, hvilken font der udløses til download.
   
   

6. Match dette fontfilnavn med den tilsvarende woff2-fil i stylesheetet. Perfekt! Nu ved du, hvilken fontfil der bruges til din hjemmeside!
   

7. Næste skridt er at kopiere den fulde font-URL og åbne den i din browser. Dette vil udløse en download af denne fontfil. Kopiér denne fil til din hjemmeside.
   

8. Kopiér CSS'en for den brugte webfont i trin 7 og indsæt den i dit stylesheet. Glem ikke at ændre URL'en fra Google CDN til din egen server (for eksempel '/fonts/roboto400.woff2')

9. Preload fonten (hvis det er en visuelt vigtig font)

Nu har du med succes downloadet og selvhostet Google Fonten efter dit valg. Husk at overholde fontens licensvilkår og kreditere fonten som krævet af licensen, hvis det er nødvendigt.

Et eksempel fra virkeligheden

<!DOCTYPE html>
<html>
<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Self-hosted Google Sans font with WOFF2 format */
    @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 to system-ui font */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a page using the Google-sans with system-ui fallback font.</p>
</body>
</html>