Self-hosta Google Fonts för bättre Core Web Vitals

Self-hosta Google Fonts för förbättrade Core Web Vitals

I takt med att webbplatsägare och utvecklare strävar efter att optimera sina webbsidor för bättre user experience och bättre sökmotorplaceringar har Core Web Vitals blivit en avgörande uppsättning mätvärden. Google Fonts erbjuder ett brett utbud av typografiska alternativ men kan ibland påverka Core Web Vitals negativt. I den här artikeln utforskar vi varför self-hosting av Google Fonts kan vara fördelaktigt för din webbplats prestanda, särskilt i relation till Core Web Vitals. Vi kommer också att ge exempel och bästa praxis för att visa hur self-hosting av typsnitt kan leda till betydande förbättringar.

Förstå Core Web Vitals

Core Web Vitals är en uppsättning av tre prestandamätvärden som mäter olika aspekter av en webbsidas laddningshastighet, interaktivitet och visuell stabilitet:

1. Largest Contentful Paint (LCP): LCP mäter tiden det tar för det största elementet på en webbsida (vanligtvis en bild eller ett textblock) att bli synligt i viewporten. En ideal LCP bör ske inom de första 2,5 sekunderna för att säkerställa snabb innehållsvisning.

2. First Input Delay (FID): FID mäter tidsfördröjningen mellan en användares första interaktion med en sida (t.ex. att klicka på en knapp) och webbläsarens svar på den interaktionen. En bra FID bör vara under 100 ms för en smidig user experience.

3. Cumulative Layout Shift (CLS): CLS mäter mängden oväntade layoutförskjutningar som inträffar under sidladdningen. Ett lågt CLS-värde (under 0,1) indikerar en stabil visuell upplevelse, eftersom användare ogillar att innehåll förskjuts oväntat medan de försöker läsa eller interagera med sidan.

Google Fonts påverkan på Core Web Vitals

Google Fonts, som ofta inkluderas på webbsidor för att förbättra typografi och design, kan ha en betydande påverkan på Core Web Vitals, främst på Largest Contentful Paint (LCP) och Cumulative Layout Shift (CLS):

För de flesta jag pratar med är detta ny information. Googles CDN anses vara det bästa i världen. Så varför är Google Fonts dåligt för sidladdningshastigheten?

1. Stilmallen finns aldrig i webbläsarens cache för nya besökare. Det första problemet med Google Fonts är att det är beroende av en extern stilmall som hostas av fonts.google.com eller fonts.googleapis.com. Denna stilmall kan inte återanvändas av olika domäner (som många verkar tro). Det innebär att den renderingsblockerande stilmallen aldrig levereras från den supersnabba webbläsarcachen för förstagångsbesökare och alltid kommer att sakta ner renderingsdelen av sidan något. 

2. Det kräver 2 anslutningar till 2 nya servrar. Det andra problemet är att för att ladda ner CSS-filen och typsnittsfilerna måste vi ansluta till 2 olika servrar. Varje initial anslutning till en ny server har betydande overhead och tar extra tid. Tid som vi kunde ha sparat genom att leverera filerna från vår redan öppna anslutning till vår egen server. För att undvika detta rekommenderar Google att använda preconnect till deras domäner. Det mildrar problemet något men är fortfarande långt ifrån perfekt
   

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

3. Du har begränsad kontroll över font-display-attributet. Även om Google Fonts låter dig ställa in font-display-attributet kan du bara definiera det globalt. Det innebär att alla woff2-filer får samma font-display-inställning
   

4. Den slutgiltiga platsen för woff2-filen är okänd. Det innebär att vi inte kan förladda våra viktigaste typsnitt. Det gör att våra typsnittsfiler ställs i kö för nedladdning relativt sent och vi kommer förmodligen att få en synlig layoutförskjutning orsakad av en flash of unstyled text (FOUT)

5. Du har ingen kontroll över typsnittsfilerna. 

Fördelar med att self-hosta Google Fonts

Att self-hosta Google Fonts innebär att du levererar typsnittsfilerna från dina egna servrar istället för att förlita dig på externa Google-servrar. Denna metod kan ge flera fördelar, särskilt i relation till Core Web Vitals:

1. Förbättrad leveranshastighet för typsnitt: Self-hosting av typsnitt minskar beroendet av externa servrar, vilket leder till snabbare typsnittsleverans och följaktligen snabbare rendering av textinnehåll. Denna förbättring kan påverka LCP positivt och säkerställa att det största textelementet blir synligt snabbare.

2. Minskade layoutförskjutningar: Genom att self-hosta Google Fonts kan du kontrollera hur typsnittet laddas och visas, vilket minimerar risken för layoutförskjutningar orsakade av fördröjd typsnittsrendering. Detta bidrar till att förbättra den övergripande visuella stabiliteten på din webbsida och påverkar CLS positivt.

Bästa praxis för self-hosting av Google Fonts

För att optimera dina self-hostade Google Fonts för bättre Core Web Vitals-prestanda, överväg att implementera följande bästa praxis:

1. Använd WOFF2-formatet: Använd enbart WOFF2-filformatet, eftersom det erbjuder bättre komprimering och snabbare laddningstider, vilket bidrar till förbättrade LCP- och CLS-värden.

2. Subsetting av typsnitt: För att ytterligare minska typsnittens filstorlek, överväg att använda subsetting, vilket innebär att bara inkludera de tecken som behövs för ditt webbsideinnehåll. Detta kan leda till snabbare typsnittsladdning och förbättrade Core Web Vitals.

3. Strategiskt font-display-attribut: Konfigurera font-display-attributet strategiskt för att kontrollera textrendering under typsnittsladdning. Värdet "swap" snabbar till exempel upp First Contentful Paint genom att säkerställa att fallback-typsnitt visas tills webbtypsnittet är fulladdat. Värdet "optional" förhindrar layoutförskjutningar genom att aldrig byta typsnittsfil. En strategisk mix av dessa två optimerar ofta både Cumulative Layout Shift och First Contentful Paint.

4. Förladda typsnitt: Säkerställ att typsnitt är tillgängliga så tidigt som möjligt genom att förladda de viktigaste typsnitten med länkförladdningsmekanismen
   
   

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

Hur du self-hostar ett Google-typsnitt (på rätt sätt)

Att ladda ner och self-hosta ett Google-typsnitt är en enkel process. Tänk på att du alltid bör granska typsnittets licens och användningsrättigheter innan du laddar ner och använder det på din webbplats eller i dina projekt. Många Google Fonts är tillgängliga under open source-licenser, men vissa kan ha begränsningar för kommersiellt bruk.

Här är ett exempel på hur du laddar ner och self-hostar ett Google-typsnitt:

1. Gå till Google Fonts webbplats på https://fonts.google.com/.

2. Välj det typsnitt du vill använda och välj de typsnittsstorlekar du vill inkludera. 

3. På typsnittssidan klickar du på knappen 'selected families' i den övre menyraden. Där hittar du länken till den Google-hostade stilmallen. 
   
   

   

4. Kopiera URL:en till denna stilmall och öppna den i din webbläsare. Du kommer nu att se alla tillgängliga font-face-deklarationer för typsnittet. 
   
   

   

5. Du kanske märker att det finns mer än 1 woff2-fil även om vi bara använde en typsnittsfil. Det beror på att det finns en annan typsnittsfil för olika unicode-intervall. För att ta reda på vilka typsnitt vi bör ladda ner ska du tillfälligt lägga till den Google-hostade stilmallen på din webbplats. Använd genvägen Ctrl-Shift-I för att öppna Chrome DevTools. Navigera till fliken Network och klicka på Font. Uppdatera nu sidan (Ctrl-r) för att se vilket typsnitt som laddas ner.
   
   

6. Matcha detta typsnittsfilnamn med motsvarande woff2-fil i stilmallen. Perfekt! Nu vet du vilken typsnittsfil som används för din webbplats!
   

7. Nästa steg är att kopiera den fullständiga typsnitts-URL:en och öppna den i din webbläsare. Detta triggar en nedladdning av typsnittsfilen. Kopiera denna fil till din webbplats.
   

8. Kopiera CSS:en för det använda webbtypsnittet i steg 7 och klistra in det i din stilmall. Glöm inte att ändra URL:en från Googles CDN till din egen server (till exempel '/fonts/roboto400.woff2')

9. Förladda typsnittet (om det är ett visuellt viktigt typsnitt)

Nu har du framgångsrikt laddat ner och self-hostat Google-typsnittet du valde. Kom ihåg att följa typsnittets licensvillkor och tillskriva typsnittet enligt licensens krav om det är nödvändigt.

Ett verkligt exempel

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