Google Fonts selbst hosten für bessere Core Web Vitals

Selbsthosting von Google Fonts für verbesserte Core Web Vitals

Während Website-Besitzer und Entwickler danach streben, ihre Webseiten für eine bessere Benutzererfahrung und Suchmaschinen-Rankings zu optimieren, haben sich die Core Web Vitals als entscheidender Satz von Metriken herausgestellt. Google Fonts, obwohl sie eine vielfältige Auswahl an Typografie-Optionen bieten, können manchmal einen negativen Einfluss auf die Core Web Vitals haben. In diesem Artikel werden wir untersuchen, warum das Selbsthosten von Google Fonts für die Leistung Ihrer Website vorteilhaft sein kann, insbesondere in Bezug auf die Core Web Vitals. Wir werden auch Beispiele und Best Practices bereitstellen, um zu demonstrieren, wie das Selbsthosten von Schriftarten zu erheblichen Verbesserungen führen kann.

Verständnis der Core Web Vitals

Core Web Vitals sind ein Satz von drei Leistungsmetriken, die verschiedene Aspekte der Ladegeschwindigkeit, Interaktivität und visuellen Stabilität von Webseiten 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 Viewport sichtbar zu werden. Ein idealer LCP sollte innerhalb der ersten 2,5 Sekunden auftreten, um eine schnelle Anzeige des Inhalts zu gewährleisten.

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

3. Cumulative Layout Shift (CLS): CLS misst die Menge an unerwarteten Layoutverschiebungen, die während des Ladens der Seite auftreten. Ein niedriger CLS-Wert (unter 0,1) weist auf eine stabile visuelle Erfahrung hin, da Benutzer es nicht mögen, wenn sich Inhalte unerwartet verschieben, während sie versuchen zu lesen oder mit der Seite zu interagieren.

Auswirkung von Google Fonts auf Core Web Vitals

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

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

1. Das Stylesheet ist nie im Browser-Cache für neue Besucher. Das erste Problem mit Google Fonts ist, dass es auf ein externes Stylesheet angewiesen ist, das von fonts.google.com oder fonts.googleapis.com gehostet wird. Dieses Stylesheet kann nicht von verschiedenen Domains wiederverwendet werden (wie viele Leute zu denken scheinen). Dies bedeutet, dass das render blocking Stylesheet nie aus dem superschnellen Browser-Cache für Erstbesucher bereitgestellt wird und den Renderteil der Seite immer ein wenig verlangsamt. 

2. Es erfordert 2 Verbindungen zu 2 neuen Servern. Das zweite Problem ist, dass wir, um die CSS-Datei und die Schriftartdateien herunterzuladen, eine Verbindung zu 2 verschiedenen Servern herstellen müssen. Jede anfängliche Verbindung zu einem neuen Server hat einen erheblichen Overhead und kostet etwas zusätzliche Zeit. Zeit, die wir hätten sparen können, indem wir die Dateien von unserer bereits offenen Verbindung zu unserem Server bereitstellen. Um dies zu vermeiden, rät Google dazu, eine Vorabverbindung zu ihren Domains herzustellen. Das wird das Problem ein wenig mildern, aber es ist immer noch weit von perfekt entfernt
   

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

3. Sie haben begrenzte Kontrolle über das font-display Attribut. Während Google fonts Ihnen erlaubt, das font-display Attribut festzulegen, können Sie es nur global definieren. Dies bedeutet, dass alle woff2-Dateien dieselbe font-display Einstellung erhalten
   

4. Der endgültige Speicherort der woff2-Datei ist unbekannt. Dies bedeutet, dass wir unsere wichtigsten Schriftarten nicht vorab laden können. Dies bedeutet, dass unsere Schriftartdateien relativ spät für den Download in die Warteschlange gestellt werden und wir wahrscheinlich eine sichtbare Layoutverschiebung erhalten, die durch den Flash of Unstyled Text (FOUT) verursacht wird

5. Sie haben keine Kontrolle über die Schriftartdateien. 

Vorteile des Selbsthostings von Google Fonts

Das Selbsthosten von Google Fonts beinhaltet das Bereitstellen der Schriftartdateien von Ihren eigenen Servern anstatt sich auf externe Google-Server zu verlassen. Dieser Ansatz kann mehrere Vorteile bringen, insbesondere in Bezug auf die Core Web Vitals:

1. Verbesserte Schriftartbereitstellungsgeschwindigkeit: Das Selbsthosten von Schriftarten reduziert die Abhängigkeit von externen Servern, was zu einer schnelleren Schriftartbereitstellung und folglich zu einem schnelleren Rendern von Textinhalten führt. Diese Verbesserung kann sich positiv auf LCP auswirken und sicherstellen, dass das größte Textelement schneller sichtbar wird.

2. Reduzierte Layoutverschiebungen: Durch das Selbsthosten von Google Fonts können Sie steuern, wie die Schriftart geladen und angezeigt wird, wodurch die Wahrscheinlichkeit von Layoutverschiebungen durch verzögertes Schriftartrendern minimiert wird. Dies hilft, die allgemeine visuelle Stabilität Ihrer Webseite zu verbessern und wirkt sich positiv auf CLS aus.

Best Practices für das Selbsthosten von Google Fonts

Um Ihre selbst gehosteten Google Fonts für eine bessere Core Web Vitals Leistung zu optimieren, sollten Sie die Implementierung der folgenden Best Practices in Betracht ziehen:

1. Verwenden Sie das WOFF2-Format: Verwenden Sie nur 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 Größe der Schriftartdateien weiter zu reduzieren, sollten Sie Font Subsetting in Betracht ziehen, bei dem nur die Zeichen enthalten sind, die für Ihren Webseiteninhalt erforderlich sind. Dies kann zu schnellerem Laden von Schriftarten und verbesserten Core Web Vitals führen.

3. Strategisches Font-Display Attribut: Konfigurieren Sie das font-display Attribut strategisch, um das Textrendern während des Ladens von Schriftarten zu steuern. Der Wert "swap" wird beispielsweise den First Contentful Paint beschleunigen, indem sichergestellt wird, dass Fallback-Schriftarten angezeigt werden, bis die Web-Schriftart vollständig geladen ist. Der Wert "optional" verhindert Layoutverschiebungen, indem die Schriftartdatei niemals ausgetauscht wird. Eine strategische Mischung aus diesen beiden optimiert oft sowohl den Cumulative Layout Shift als auch den First Contentful Paint.

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

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

Wie man eine Google Schriftart selbst hostet (der richtige Weg)

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

Hier ist ein Beispiel, wie man eine Google Font herunterlädt und selbst hostet:

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

2. Wählen Sie die Schriftart aus, die Sie verwenden möchten, und wählen Sie die Schriftgrößen aus, die Sie einschließen möchten. 

3. Klicken Sie auf der Schriftartenseite in der oberen Leiste auf die Schaltfläche 'selected families'. Dort finden Sie den Link zum von Google gehosteten Stylesheet. 
   
   

   

4. Kopieren Sie die URL dieses Stylesheets und öffnen Sie sie in Ihrem Browser. Sie sehen nun alle Font-Face-Deklarationen, die für die Schriftart verfügbar sind. 
   
   

   

5. Sie bemerken vielleicht, dass es mehr als 1 woff2-Datei gibt, obwohl wir nur eine Schriftartdatei verwendet haben. Das liegt daran, dass es eine andere Schriftartdatei für verschiedene Unicode-Bereiche gibt. Um zu erfahren, welche Schriftarten wir herunterladen sollten, sollten Sie vorübergehend das von Google gehostete Stylesheet zu Ihrer Website hinzufügen. Verwenden Sie den Shortcut Ctrl-Shift-I, um Ihre Chrome DevTools zu öffnen. Navigieren Sie zum Netzwerk-Tab und klicken Sie auf Font. Aktualisieren Sie nun die Seite (Ctrl-r), um zu sehen, welche Schriftart für den Download ausgelöst wird.
   
   

6. Gleichen Sie diesen Schriftartdateinamen mit der entsprechenden woff2-Datei im StyleSheet ab. Perfekt! Jetzt wissen Sie, welche Schriftartdatei für Ihre Website verwendet wird!
   

7. Der nächste Schritt besteht darin, die vollständige Font Use zu kopieren und diese in Ihrem Browser zu öffnen. Dies löst einen Download für diese Schriftartdatei aus. Kopieren Sie diese Datei auf Ihre Website.
   

8. Kopieren Sie das CSS für die verwendete Webfont in 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 Schriftart vorab (wenn es eine visuell wichtige Schriftart ist)

Jetzt haben Sie die Google Font Ihrer Wahl erfolgreich heruntergeladen und selbst gehostet. Denken Sie daran, die Lizenzbedingungen der Schriftart einzuhalten und die Schriftart wie von der Lizenz gefordert zuzuschreiben, falls erforderlich.

Ein Beispiel aus dem wirklichen Leben

<!DOCTYPE html>
<html>
<head>
  <title>Selbst gehostete Google Fonts</title>
  <!-- Schriftart vorab laden -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Selbst gehostete Google Sans Schriftart mit 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 auf system-ui Schriftart */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Willkommen auf meiner Website</h1>
  <p>Dies ist eine Seite, die Google-sans mit system-ui Fallback-Schriftart verwendet.</p>
</body>
</html>