Google Fonts selbst hosten für bessere Core Web Vitals

Google Fonts selbst hosten für verbesserte Core Web Vitals

Website-Betreiber und Entwickler streben kontinuierlich danach, ihre Webseiten für eine bessere UX und bessere Suchmaschinen-Rankings zu optimieren. Dabei haben sich die Core Web Vitals als entscheidende Kennzahlen etabliert. Google Fonts bieten zwar eine vielfältige Auswahl an Typografie-Optionen, können sich jedoch manchmal negativ auf die Core Web Vitals auswirken. In diesem Artikel untersuchen wir, warum das Selbst-Hosten von Google Fonts für die Performance Ihrer Website vorteilhaft sein kann, insbesondere in Bezug auf die Core Web Vitals. Außerdem stellen wir Beispiele und Best Practices vor, die zeigen, wie das Selbst-Hosten von Schriften zu erheblichen Verbesserungen führen kann.

Core Web Vitals verstehen

Core Web Vitals sind eine Reihe von drei Performance-Metriken, die verschiedene Aspekte der Ladegeschwindigkeit, Interaktivität und visuellen Stabilität einer Webseite messen:

1. Largest Contentful Paint (LCP): LCP misst die Zeit, die das größte Element auf einer Webseite (normalerweise ein Bild oder Textblock) benötigt, um im sichtbaren Bereich angezeigt zu werden. Ein idealer LCP sollte innerhalb der ersten 2,5 Sekunden erfolgen, um eine schnelle Inhaltsdarstellung zu gewährleisten.

2. First Input Delay (FID): FID misst die Zeitverzögerung zwischen der ersten Interaktion eines Nutzers mit einer Seite (z. B. Klick auf einen Button) und der Reaktion des Browsers auf diese Interaktion. Ein guter FID sollte unter 100 ms liegen, um eine reibungslose UX zu gewährleisten.

3. Cumulative Layout Shift (CLS): CLS misst das Ausmaß unerwarteter Layout-Verschiebungen während des Seitenladens. Ein niedriger CLS-Wert (unter 0,1) deutet auf ein stabiles visuelles Erlebnis hin, da Nutzer es nicht mögen, wenn sich Inhalte unerwartet verschieben, während sie versuchen zu lesen oder mit der Seite zu interagieren.

Auswirkungen von Google Fonts auf die Core Web Vitals

Google Fonts, die häufig in Webseiten eingebunden werden, um Typografie und Design zu verbessern, können einen erheblichen Einfluss auf die Core Web Vitals haben, vor allem auf den Largest Contentful Paint (LCP) und den Cumulative Layout Shift (CLS):

Für die meisten Menschen, mit denen ich spreche, ist das eine neue Information. Das Google CDN soll schließlich das beste der Welt sein. Warum ist Google Fonts also schlecht für die Seitengeschwindigkeit?

1. Das Stylesheet ist niemals im Browser-Cache für neue Besucher. Das erste Problem mit Google Fonts ist die Abhängigkeit von einem externen Stylesheet, das von fonts.google.com oder fonts.googleapis.com gehostet wird. Dieses Stylesheet kann nicht von verschiedenen Domains wiederverwendet werden (wie viele Leute zu glauben scheinen). Das bedeutet, dass das render-blockierende Stylesheet für Erstbesucher niemals aus dem superschnellen Browser-Cache geladen wird und das Rendern der Seite immer etwas verlangsamt. 

2. Es erfordert 2 Verbindungen zu 2 neuen Servern. Das zweite Problem ist, dass wir uns mit 2 verschiedenen Servern verbinden müssen, um die CSS-Datei und die Schriftdateien herunterzuladen. Jede erstmalige Verbindung zu einem neuen Server hat erheblichen Overhead und benötigt zusätzliche Zeit. Zeit, die wir hätten sparen können, indem wir die Dateien über unsere bereits offene Verbindung zu unserem Server ausliefern. Um dies zu vermeiden, empfiehlt Google, eine Preconnect-Verbindung zu ihren Domains herzustellen. Das mildert das Problem etwas, ist aber noch lange nicht perfekt
   

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

3. Sie haben eingeschränkte Kontrolle über das font-display-Attribut. Obwohl Google fonts es Ihnen erlaubt, das font-display-Attribut zu setzen, können Sie es nur global definieren. Das bedeutet, dass alle woff2-Dateien dieselbe font-display-Einstellung erhalten
   

4. Der endgültige Speicherort der woff2-Datei ist unbekannt. Das bedeutet, dass wir unsere wichtigsten Schriften nicht vorladen können. Dadurch werden unsere Schriftdateien relativ spät zum Download eingereiht und wir bekommen wahrscheinlich eine sichtbare Layout-Verschiebung durch den Flash of Unstyled Text (FOUT)

5. Sie haben keine Kontrolle über die Schriftdateien. 

Vorteile des Selbst-Hostens von Google Fonts

Beim Selbst-Hosten von Google Fonts werden die Schriftdateien von Ihren eigenen Servern bereitgestellt, anstatt sich auf externe Google-Server zu verlassen. Dieser Ansatz kann mehrere Vorteile bringen, insbesondere in Bezug auf die Core Web Vitals:

1. Verbesserte Geschwindigkeit der Schriftbereitstellung: Das Selbst-Hosten von Schriften reduziert die Abhängigkeit von externen Servern, was zu einer schnelleren Schriftbereitstellung und folglich zu einem schnelleren Rendern von Textinhalten führt. Diese Verbesserung kann sich positiv auf den LCP auswirken und dafür sorgen, dass das größte Textelement schneller sichtbar wird.

2. Reduzierte Layout-Verschiebungen: Durch das Selbst-Hosten von Google Fonts können Sie kontrollieren, wie die Schrift geladen und angezeigt wird, wodurch die Wahrscheinlichkeit von Layout-Verschiebungen durch verzögertes Schrift-Rendering minimiert wird. Dies trägt zur Verbesserung der visuellen Stabilität Ihrer Webseite bei und wirkt sich positiv auf den CLS aus.

Best Practices für das Selbst-Hosten von Google Fonts

Um Ihre selbst gehosteten Google Fonts für eine bessere Core Web Vitals-Performance zu optimieren, sollten Sie die folgenden Best Practices implementieren:

1. WOFF2-Format verwenden: Verwenden Sie ausschließlich das WOFF2-Dateiformat, da es eine bessere Komprimierung und schnellere Ladezeiten bietet, was zu verbesserten LCP- und CLS-Werten beiträgt.

2. Font Subsetting: Um die Dateigrößen der Schriften weiter zu reduzieren, sollten Sie Font Subsetting in Betracht ziehen, bei dem nur die Zeichen einbezogen werden, die für den Inhalt Ihrer Webseite benötigt werden. Dies kann zu schnellerem Laden der Schriften und verbesserten Core Web Vitals führen.

3. Strategisches font-display-Attribut: Konfigurieren Sie das font-display-Attribut strategisch, um das Text-Rendering während des Schriftladens zu steuern. Der Wert "swap" beschleunigt beispielsweise den First Contentful Paint, indem sichergestellt wird, dass fallback-Schriften angezeigt werden, bis die Web-Schrift vollständig geladen ist. Der Wert "optional" verhindert Layout-Verschiebungen, indem die Schriftdatei niemals ausgetauscht wird. Eine strategische Mischung dieser beiden Werte optimiert häufig sowohl den Cumulative Layout Shift als auch den First Contentful Paint.

4. Schriften vorladen: Stellen Sie sicher, dass Schriften so früh wie möglich verfügbar sind, indem Sie die wichtigsten Schriften mit dem Link-Preload-Mechanismus vorladen
   
   

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

So hosten Sie eine Google Font selbst (der richtige Weg)

Das Herunterladen und Selbst-Hosten einer Google Font ist ein unkomplizierter Prozess. Beachten Sie, dass Sie immer die Lizenz- und Nutzungsrechte der Schrift überprüfen sollten, bevor Sie sie auf Ihrer Website oder in Ihren Projekten herunterladen und verwenden. Viele Google Fonts sind unter Open-Source-Lizenzen verfügbar, einige können jedoch Einschränkungen für die kommerzielle Nutzung haben.

Hier ist ein Beispiel, wie Sie eine Google Font herunterladen und selbst hosten:

1. Gehen Sie zur Google Fonts-Website unter https://fonts.google.com/.

2. Wählen Sie die gewünschte Schrift aus und wählen Sie die Schriftgrößen, die Sie einbinden möchten. 

3. Klicken Sie auf der Schriftseite in der oberen Leiste auf den Button ‘Ausgewählte Familien’. Dort finden Sie den Link zum von Google gehosteten Stylesheet. 
   
   

   

4. Kopieren Sie die URL dieses Stylesheets und öffnen Sie es in Ihrem Browser. Sie sehen nun alle verfügbaren font-face-Deklarationen für die Schrift. 
   
   

   

5. Möglicherweise fällt Ihnen auf, dass es mehr als eine woff2-Datei gibt, obwohl wir nur eine Schriftdatei verwendet haben. Das liegt daran, dass es für verschiedene Unicode-Bereiche unterschiedliche Schriftdateien gibt. Um herauszufinden, welche Schriften wir herunterladen sollten, fügen Sie das von Google gehostete Stylesheet vorübergehend zu Ihrer Website hinzu. Verwenden Sie die Tastenkombination Strg+Umschalt+I, um die Chrome DevTools zu öffnen. Navigieren Sie zum Netzwerk-Tab und klicken Sie auf Schrift. Aktualisieren Sie nun die Seite (Strg+R), um zu sehen, welche Schrift zum Download ausgelöst wird.
   
   

6. Ordnen Sie diesen Schriftdateinamen der entsprechenden woff2-Datei im Stylesheet zu. Perfekt! Jetzt wissen Sie, welche Schriftdatei für Ihre Website verwendet wird!
   

7. Der nächste Schritt ist, die vollständige Schrift-URL zu kopieren und in Ihrem Browser zu öffnen. Dies löst einen Download dieser Schriftdatei aus. Kopieren Sie diese Datei auf Ihre Website.
   

8. Kopieren Sie das CSS für die verwendete Webschrift aus Schritt 7 und fügen Sie es in Ihr Stylesheet ein. Vergessen Sie nicht, die URL vom Google CDN auf Ihren eigenen Server zu ändern (zum Beispiel ‘/fonts/roboto400.woff2’)

9. Laden Sie die Schrift vor (wenn es eine visuell wichtige Schrift ist)

Damit haben Sie die Google Font Ihrer Wahl erfolgreich heruntergeladen und selbst gehostet. Denken Sie daran, die Lizenzbedingungen der Schrift einzuhalten und die Schrift wie von der Lizenz gefordert zu kennzeichnen, falls erforderlich.

Ein Praxisbeispiel

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