Optimierung der Leistung von Google Fonts

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Google Fonts sind einfach zu implementieren, können aber einen großen Einfluss auf die Ladezeiten Ihrer Seite haben. Lassen Sie uns untersuchen, wie wir sie am besten laden können.

Es ist fair zu sagen, dass Google Fonts beliebt sind. Zum jetzigen Zeitpunkt wurden sie über 29 Billionen Mal im Internet aufgerufen, und es ist leicht zu verstehen, warum – die Sammlung bietet Ihnen Zugriff auf über 900 wunderschöne Schriftarten, die Sie kostenlos auf Ihrer Website verwenden können. Ohne Google Fonts wären Sie auf die wenigen „Systemschriften“ beschränkt, die auf dem Gerät Ihres Benutzers installiert sind.

Systemschriftarten oder „websichere Schriftarten“ sind die am häufigsten vorinstallierten Schriftarten auf allen Betriebssystemen. Beispielsweise sind Arial und Georgia mit Windows-, macOS- und Linux-Distributionen verpackt.

Wie alle guten Dinge sind auch Google Fonts mit Kosten verbunden. Jede Schriftart hat eine Gewichtung, die der Webbrowser herunterladen muss, bevor sie angezeigt werden kann. Bei richtiger Einrichtung macht sich die zusätzliche Ladezeit nicht bemerkbar. Wenn Sie es jedoch falsch machen, könnten Ihre Benutzer bis zu ein paar Sekunden warten, bevor Text angezeigt wird.

Google Fonts sind bereits optimiert

Die Google Fonts-API stellt dem Browser nicht nur die Schriftartdateien zur Verfügung, sondern führt auch eine intelligente Überprüfung durch, um zu sehen, wie sie die Dateien im optimalsten Format bereitstellen kann.

Schauen wir uns Roboto an, GitHub sagt uns, dass die reguläre Variante 168kb wiegt.

Roboto Regular hat eine Dateigröße von 168 KB
168 KB für eine einzelne Schriftartvariante. (Große Vorschau)

Wenn ich jedoch dieselbe Schriftartvariante von der API anfordere, wird mir diese Datei bereitgestellt. Das sind nur 11kb. Wie kann das sein?

Wenn der Browser eine Anfrage an die API stellt, prüft Google zunächst, welche Dateitypen der Browser unterstützt. Ich verwende die neueste Version von Chrome, die wie die meisten Browser WOFF2 unterstützt, sodass mir die Schriftart in diesem stark komprimierten Format bereitgestellt wird.

Wenn ich meinen User-Agent auf Internet Explorer 11 ändere, wird mir stattdessen die Schriftart im WOFF-Format bereitgestellt.

Wenn ich schließlich meinen Benutzeragenten auf IE8 ändere, erhalte ich die Schriftart im EOT-Format (Embedded OpenType).

Google Fonts verwaltet über 30 optimierte Varianten für jede Schriftart und erkennt und liefert automatisch die optimale Variante für jede Plattform und jeden Browser.

— Ilya Grigorik, Webfont-Optimierung

Dies ist eine großartige Funktion von Google Fonts. Durch die Überprüfung des Benutzeragenten können sie Browsern, die diese unterstützen, die leistungsstärksten Formate bereitstellen, während die Schriftarten in älteren Browsern weiterhin konsistent angezeigt werden.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Browser-Caching

Eine weitere eingebaute Optimierung von Google Fonts ist das Browser-Caching.

Aufgrund der allgegenwärtigen Natur von Google Fonts muss der Browser nicht immer die vollständigen Schriftartdateien herunterladen. SmashingMagazine verwendet beispielsweise eine Schriftart namens „Mija“. Wenn dies das erste Mal ist, dass Ihr Browser diese Schriftart sieht, muss er sie vollständig herunterladen, bevor der Text angezeigt wird, aber wenn Sie das nächste Mal eine Website besuchen, die diese Schriftart verwendet , verwendet der Browser die zwischengespeicherte Version.

Da die Google Fonts-API immer häufiger verwendet wird, ist es wahrscheinlich, dass Besucher Ihrer Website oder Seite bereits alle Google-Schriftarten, die in Ihrem Design verwendet werden, in ihrem Browser-Cache haben.

— Häufig gestellte Fragen, Google Fonts

Der Browser-Cache von Google Fonts läuft nach einem Jahr ab, sofern der Cache nicht früher geleert wird.

Hinweis: Mija ist keine Google-Schriftart, aber die Caching-Prinzipien sind nicht herstellerspezifisch.

Eine weitere Optimierung ist möglich

Während Google große Anstrengungen in die Optimierung der Bereitstellung der Schriftartdateien investiert, gibt es dennoch Optimierungen, die Sie an Ihrer Implementierung vornehmen können, um die Auswirkungen auf die Seitenladezeiten zu reduzieren.

1. Schriftfamilien einschränken

Die einfachste Optimierung besteht darin, einfach weniger Schriftfamilien zu verwenden. Jede Schriftart kann bis zu 400 KB zu Ihrer Seitengröße hinzufügen, multiplizieren Sie das mit ein paar verschiedenen Schriftartfamilien und plötzlich wiegen Ihre Schriftarten mehr als Ihre gesamte Seite.

Ich empfehle, nicht mehr als zwei Schriftarten zu verwenden, eine für Überschriften und eine für den Inhalt ist normalerweise ausreichend. Mit der richtigen Verwendung von Schriftgröße, Gewicht und Farbe können Sie mit nur einer Schriftart ein großartiges Aussehen erzielen.

Beispiel mit drei Strichstärken einer einzelnen Schriftfamilie (Source Sans Pro)
Drei Strichstärken einer einzigen Schriftfamilie (Source Sans Pro). (Große Vorschau)

2. Varianten ausschließen

Aufgrund des hohen Qualitätsstandards von Google Fonts enthalten viele der Schriftfamilien das gesamte Spektrum der verfügbaren Schriftstärken:

  • Dünn (100)
  • Dünn kursiv (100i)
  • Licht (300)
  • Leicht kursiv (300i)
  • Normal (400)
  • Normal kursiv (400i)
  • Mittel (600)
  • Mittel kursiv (600i)
  • Fett (700)
  • Fett Kursiv (700i)
  • Schwarz (800)
  • Schwarz kursiv (800i)

Das ist großartig für fortgeschrittene Anwendungsfälle, die möglicherweise alle 12 Varianten erfordern, aber für eine normale Website bedeutet es, alle 12 Varianten herunterzuladen, wenn Sie vielleicht nur 3 oder 4 benötigen.

Beispielsweise wiegt die Roboto-Schriftfamilie ~144 KB. Wenn Sie jedoch nur die Varianten Regular, Regular Italic und Bold verwenden, beträgt diese Zahl ~36 KB. Eine Ersparnis von 75 %!

Der Standardcode für die Implementierung von Google Fonts sieht folgendermaßen aus:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Wenn Sie das tun, wird nur die 'normale 400'-Variante geladen. Das bedeutet, dass alle hellen, fetten und kursiven Texte nicht korrekt angezeigt werden.

Um stattdessen alle Schriftvarianten zu laden, müssen wir die Gewichte in der URL wie folgt angeben:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Es ist selten, dass eine Website alle Varianten einer Schriftart von Thin (100) bis Black (900) verwendet. Die optimale Strategie besteht darin, nur die Gewichte anzugeben, die Sie verwenden möchten:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Dies ist besonders wichtig, wenn mehrere Schriftfamilien verwendet werden. Wenn Sie beispielsweise Lato für Überschriften verwenden, ist es sinnvoll, nur die fette Variante (und ggf. fette Kursivschrift) anzufordern:

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Anforderungen kombinieren

Das Code-Snippet, mit dem wir oben gearbeitet haben, ruft die Server von Google ( fonts.googleapis.com ) auf, was als HTTP-Anfrage bezeichnet wird. Im Allgemeinen gilt: Je mehr HTTP-Anfragen Ihre Webseite stellen muss, desto länger dauert das Laden.

Wenn Sie zwei Schriftarten laden möchten, können Sie etwa so vorgehen:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Das würde funktionieren, aber es würde dazu führen, dass der Browser zwei Anfragen stellt. Wir können das optimieren, indem wir sie wie folgt zu einer einzigen Anfrage kombinieren:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Es gibt keine Begrenzung, wie viele Schriftarten und Varianten eine einzelne Anfrage enthalten kann.

4. Ressourcenhinweise

Ressourcenhinweise sind eine Funktion, die von modernen Browsern unterstützt wird und die Website-Leistung steigern kann. Wir werden uns zwei Arten von Ressourcenhinweisen ansehen: „DNS Prefetching“ und „Preconnect“.

Hinweis: Wenn ein Browser eine moderne Funktion nicht unterstützt, wird sie einfach ignoriert. Ihre Webseite wird also weiterhin normal geladen.

DNS-Vorabruf

DNS-Prefetching ermöglicht es dem Browser, die Verbindung zu Googles Fonts-API ( fonts.googleapis.com ) zu starten, sobald die Seite zu laden beginnt. Das bedeutet, dass ein Teil der Arbeit bereits erledigt ist, wenn der Browser bereit ist, eine Anfrage zu stellen.

Um das DNS-Prefetching für Google Fonts zu implementieren, fügen Sie einfach diesen Einzeiler zu Ihren Webseiten <head> hinzu:

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Vorverbinden

Wenn Sie sich den Einbettungscode von Google Fonts ansehen, scheint es sich um eine einzelne HTTP-Anfrage zu handeln:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Wenn wir jedoch diese URL besuchen, können wir sehen, dass es drei weitere Anfragen an eine andere URL, https://fonts.gstatic.com, gibt. Für jede Schriftvariante eine zusätzliche Anfrage.

Quellcode einer Google Fonts-Anfrage
(Quelle anzeigen) (Große Vorschau)

Das Problem bei diesen zusätzlichen Anfragen besteht darin, dass der Browser mit den Prozessen zu ihrer Durchführung erst beginnt, wenn die erste Anfrage an https://fonts.googleapis.com/css abgeschlossen ist. Hier kommt Preconnect ins Spiel.

Preconnect könnte als erweiterte Version von Prefetch bezeichnet werden. Es wird auf die spezifische URL gesetzt, die der Browser laden wird. Anstatt nur eine DNS-Suche durchzuführen, schließt es auch die TLS-Verhandlung und den TCP-Handshake ab.

Genau wie das DNS-Prefetching kann es mit einer Codezeile implementiert werden:

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

Allein das Hinzufügen dieser Codezeile kann die Ladezeit Ihrer Seite um 100 ms verkürzen. Dies wird ermöglicht, indem die Verbindung neben der ursprünglichen Anfrage gestartet wird, anstatt darauf zu warten, dass sie zuerst abgeschlossen wird.

5. Schriftarten lokal hosten

Google Fonts sind unter einer „Libre“- oder „Free Software“-Lizenz lizenziert, die Ihnen die Freiheit gibt, die Schriftarten ohne Einholung einer Erlaubnis zu verwenden, zu ändern und zu verteilen. Das bedeutet, dass Sie das Hosting von Google nicht verwenden müssen, wenn Sie dies nicht möchten – Sie können die Schriftarten selbst hosten!

Alle Schriftartdateien sind auf Github verfügbar. Eine ZIP-Datei mit allen Schriftarten ist ebenfalls verfügbar (387 MB).

Schließlich gibt es einen Hilfsdienst, mit dem Sie auswählen können, welche Schriftarten Sie verwenden möchten, und dann die dafür erforderlichen Dateien und CSS bereitstellt.

Das lokale Hosten von Schriftarten hat einen Nachteil. Wenn Sie die Schriftarten herunterladen, speichern Sie sie so, wie sie zu diesem Zeitpunkt sind. Wenn sie verbessert oder aktualisiert werden, erhalten Sie diese Änderungen nicht. Im Vergleich dazu erhalten Sie beim Anfordern von Schriftarten aus der Google Fonts API immer die aktuellste Version.

Google Fonts-API-Anfrage mit Datum der letzten Änderung
Google Fonts-API-Anfrage. (Große Vorschau)

Beachten Sie den lastModified Parameter in der API. Die Schriftarten werden regelmäßig modifiziert und verbessert.

6. Schriftanzeige

Wir wissen, dass der Browser einige Zeit braucht, um Google Fonts herunterzuladen, aber was passiert mit dem Text, bevor er fertig ist? Lange Zeit zeigte der Browser dort, wo der Text stehen sollte, eine Leerstelle an, auch bekannt als „FOIT“ (Flash of Invisible Text).

Empfohlene Lektüre : „FOUT, FOIT, FOFT“ von Chris Coyier

Überhaupt nichts zu zeigen, kann für den Endbenutzer ein erschütterndes Erlebnis sein, eine bessere Erfahrung wäre, zunächst eine Systemschriftart als Fallback anzuzeigen und dann die Schriftarten zu „tauschen“, sobald sie fertig sind. Dies ist mit der CSS-Eigenschaft font-display möglich.

Durch Hinzufügen von font-display: swap; zur @font-face-Erklärung weisen wir den Browser an, die Fallback-Schriftart anzuzeigen, bis die Google-Schriftart verfügbar ist.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

Im Jahr 2019 kündigte Google an, Unterstützung für Font-Display: Swap hinzuzufügen. Sie können sofort mit der Implementierung beginnen, indem Sie der Schriftarten-URL einen zusätzlichen Parameter hinzufügen:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Verwenden Sie den Text

Ein wenig bekanntes Feature der Google Fonts API ist der text . Mit diesem selten verwendeten Parameter können Sie nur die benötigten Zeichen laden.

Wenn Sie beispielsweise ein Textlogo haben, das eine eindeutige Schriftart sein muss, können Sie den text verwenden, um nur die im Logo verwendeten Zeichen zu laden.

Es funktioniert so:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Offensichtlich ist diese Technik sehr spezifisch und hat nur wenige realistische Anwendungen. Wenn Sie es jedoch verwenden können, kann es die Schriftstärke um bis zu 90 % reduzieren.

Hinweis: Bei Verwendung des text wird standardmäßig nur die „normale“ Schriftstärke geladen. Um ein anderes Gewicht zu verwenden, müssen Sie es explizit in der URL angeben.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Einpacken

Da schätzungsweise 53 % der Top-1-Million-Websites Google Fonts verwenden, kann die Implementierung dieser Optimierungen enorme Auswirkungen haben.

Wie viele der oben genannten haben Sie versucht? Lass es mich im Kommentarbereich wissen.