Optimierung der Leistung von Google-Schriftarten

Gute Website-Designs werden durch atemberaubende Bilder und Schriftarten geschmückt. Leider tragen diese beiden Web-Elemente stark zu den Gründen bei, warum viele Websites lästige Latenzen aufweisen. Natürlich können nur Webfonts etwas Erfrischendes, Unerwartetes und Neues liefern.

Es gibt jedoch Möglichkeiten, dieses schreckliche Phänomen einzudämmen. SVG hilft Entwicklern, einige der Herausforderungen beim Rendern von Bildern zu bewältigen. Und für Google Fonts, die am häufigsten verwendete Webschriftart, geht es bei der Verbesserung der Renderzeit einer Seite nur darum, die verschiedenen verfügbaren Tricks zur Optimierung der Leistung von Google Fonts einzusetzen.

Was sind Google-Schriftarten?

Google-Schriftarten sind eine speziell abgestimmte Sammlung von Glyphen, aus denen Schriftarten für die Verwendung auf Websites bestehen. Sie sind speziell für die Verwendung über das Internet konzipiert, daher der Name Webfonts.

2010 als Google Web Fonts mit nur etwa 30 Schriftarten eingeführt, verfügt Google Fonts heute über etwa 17 Milliarden Schriftarten und unterstützt derzeit etwa 57 % aller Websites. Google Fonts, das völlig kostenlos ist, verzeichnet zum Zeitpunkt des Schreibens dieses Artikels etwa 500.000 Aufrufe pro Sekunde und hat seit 2010 über 37 Billionen Aufrufe gesammelt.

Durch den Einsatz von Google Fonts auf Ihrer Website lösen Sie sich von der Beschränkung auf Systemschriften oder „websichere Schriftarten“ wie Arial und Georgia, die meist betriebssystemübergreifend vorinstalliert sind.

So implementieren Sie Google-Schriftarten

Die Implementierung von Google Fonts auf einer Website erfolgt über die Anwendungsprogrammierschnittstelle (API), die auf die vom Benutzer gewählte(n) Schriftart(en) verweist. Diese von Google angebotene API kann mithilfe des standardmäßigen CSS-Link-Tags oder der Syntax für den Import in Ihr HTML-Dokument eingebettet werden. Nachfolgend finden Sie ein Beispiel für die APIs zur Implementierung von Baloo Chettan 2.

Verwendung des standardmäßigen CSS-Link-Tags

Verwenden der Importsyntax
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Mit jeder der oben genannten APIs in Ihrem HTML-Dokument können Sie die Schriftfamilie in Ihrem CSS-Dokument verwenden, indem Sie darauf verweisen, wie im folgenden Beispiel gezeigt.

Schriftfamilie : 'Baloo Chettan 2', kursiv;

Wichtigkeit der Optimierung der Leistung von Google Fonts

Das Implementieren und Verwenden von Google Fonts ist wie andere Webfonts keine große Sache, sondern die Bereitstellung der Schriftarten für Ihre Website-Besucher. Denken Sie daran, dass die Benutzer diese Schriftarten nicht auf ihren Geräten haben. Mit anderen Worten, ihre Browser müssen sie herunterladen, bevor sie den Inhalt Ihrer Website sehen können.

Schriftgewicht

Jede Schriftart hat eine Gewichtung, die sich negativ auf die Latenz Ihrer Website auswirkt. Die Schriftart Baloo Chettan 2 von Google beispielsweise hat eine Gesamtgröße von 720 KB. Das bedeutet, dass Sie ungefähr 9 MB beim Laden Ihrer Website einplanen müssen, wenn Sie die gesamte Baloo-Schriftfamilie (19) mit allen verfügbaren Sprachen und Varianten auf Ihrer Website verwenden müssen. Das ist natürlich unideal und kommt der Webfont-Optimierung nicht nahe. Wenn Sie es jedoch falsch machen, müssen Sie Ihre Website-Besucher einige Sekunden warten lassen, bevor sie Text auf Ihrer Website sehen können.

Schriftformat

Leider gilt keines dieser Formate als universelles Format, das in allen Browsern funktioniert.

EOT wird nur vom IE unterstützt. Chrome und Opera haben die größte Unterstützung für die meisten Formate, während etwa 86 Prozent aller Browser das WOFF-Format unterstützen. Dazu müssen Sie möglicherweise alle Schriftformate für jede Schriftart, die Sie verwenden möchten, einbeziehen. Die Idee ist, ein konsistentes Erlebnis zu bieten, indem sichergestellt wird, dass alle Browser jede Schriftart anzeigen können.

Diese Probleme sind einer der vielen Gründe, warum die Leistung von Google-Schriftarten unbedingt optimiert werden muss.

Optimierung der Leistung von Google Fonts

Die Google Font-Optimierung beginnt mit der Platzierung Ihrer Font-API und dem Anforderungsformat bis hin zum Rendering. Hier sind einfache Tricks zur Optimierung von Google Fonts.

Laden Sie Google Font-Ressourcen vorab

Es wird dringend empfohlen, die neue Funktion der Webplattform zu verwenden: <link rel="preload"> , mit der Sie Ihre Webfonts im Voraus laden können. Mit dieser Funktion können Sie das standardmäßige Browserverhalten umgehen, das normalerweise das Rendern von Text verzögert, indem Sie zuerst den Renderbaum erstellen, um zu wissen, welche Schriftartressourcen er benötigt, bevor Sie auf den Ressourcenlink zugreifen.

<link rel="preload"> ist normalerweise im <head> -Tag Ihres HTML-Codes enthalten, um eine Anfrage für Ihre Schriftarten früh genug auszulösen, ohne auf die Erstellung des CSSOM warten zu müssen. Die Funktion gibt dem Browser lediglich eine Vorabinformation darüber, dass Ihre Webfonts demnächst benötigt werden, nicht aber Informationen über deren Nutzung.

Außerdem wird empfohlen, neben der Preload-Funktion eine geeignete CSS-@font-face-Definition zu verwenden, um den Browser darüber zu informieren, wie die Ressourcen-URL zu verwenden ist. Siehe ein Beispiel im nächsten Punkt.

Verwenden Sie eine Anfrage für mehrere Schriftarten

Eine weitere gute Maßnahme zur Google Font-Optimierung ist es, mehrere Font-Requests in einem Tag zusammenzufassen. Kein separates <link>-Tag für jede Schriftart einzufügen, wodurch mehrere Anfragen in verschiedenen Stapeln gesendet werden. Um Schriftartanforderungen zu kombinieren, trennen Sie die Schriftarten in der API einfach mit dem | Charakter. Dies könnte jedoch auch dadurch erreicht werden, dass Sie auf der Google Font-Seite einfach alle benötigten Schriftarten auf einmal auswählen.

Anforderungsformat für ungültige Schriftarten:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Empfohlenes Format für Schriftanfragen:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Indem wir mehrere Schriftartanfragen in einem einzigen Tag zusammenfassen, ersparen wir dem Browser mehrere Aufrufe des Servers und helfen auch älteren Browsern mit maximal 2 Verbindungen gleichzeitig pro Domain.

Optimierte Schriftformate für alle Browser

Browser, die ein bestimmtes Schriftformat nicht unterstützen, ignorieren es einfach und springen zum nächsten Schritt im Rendering-Baum. Und um ein konsistentes Erlebnis zu bieten, müssen Sie alle Schriftformate in Ihre CSS-@font-face-Deklaration aufnehmen.

Allerdings konnte das Gewicht reduziert werden. Die einzelnen Grafiken, die eine Schriftart beschreiben, bestehen aus ähnlichen Informationen, die mit einem kompatiblen Komprimierer wie GZIP komprimiert werden können. Während TTF- und EOT-Formate standardmäßig komprimiert sind, müssen Sie sicherstellen, dass Ihre Server so konfiguriert sind, dass sie die Komprimierung anwenden, wenn beide Schriftartformate bereitgestellt werden.

Verwenden Sie die optimale Komprimierungseinstellung für WOFF, das über eine integrierte Komprimierung verfügt, und greifen Sie auf benutzerdefinierte Vorverarbeitungs- und Komprimierungsalgorithmen zurück, um WOFF2 mit einer Reduzierung der Dateigröße von ~ 30 % bereitzustellen.

CSS @font-face-Deklarationsbeispiel
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Hinweis: Der src: verweist auf mehrere Ressourcenvarianten, während url() es Ihnen ermöglicht, externe Schriftarten zu laden, und local() Ihnen erlaubt, Schriftarten lokal zu beziehen. Das format() gibt das Schriftformat in der spezifischen URL an.

Geben Sie local() in Ihrer src-Liste Vorrang

Obwohl diese Idee zur Optimierung von Google-Schriftarten möglicherweise nicht wirklich auf Mobiltelefonbenutzer zutrifft, es sei denn, Sie beziehen sich auf Standardsystemschriftarten, bleibt sie ein effektiver Trick zur Optimierung von Webschriftarten.

Wenn Sie sich das obige CSS-Beispiel für @font-face-Deklarationen ansehen, werden Sie feststellen, dass local() die durch Kommas getrennte Liste der Ressourcenvarianten im src:-Deskriptor anführt. Diese Priorisierung ist absichtlich, und die Idee ist, den Benutzerbrowser an die erste Quelle für die Schriftart lokal zu senden, bevor er sich entscheidet, sie herunterzuladen, wenn sie lokal nicht verfügbar ist.

Dadurch wird sichergestellt, dass der Browser keine bereits lokal auf dem Computer des Benutzers installierten Schriftarten herunterlädt, wodurch eine bessere Website-Performance gewährleistet wird.

Schriftwiedergabe anpassen: CSS-Schriftartanzeige

Durch die Steuerung der Schriftleistung mit dem Schriftanzeige-Deskriptor für @font-face können Sie entscheiden, wie Ihre Google-Schriftarten gerendert werden sollen, je nachdem, wie lange das Herunterladen dauert. Ursprünglich haben Webbrowser Standardeinstellungen, was zu tun ist, wenn das Laden der Schriftarten zu lange dauert. Die meisten von ihnen legen ein Timeout fest, nach dem sie die Fallback-Schriftart verwenden, aber leider unterscheidet sich ihre Timeout-Periode.

Die neu eingeführte Eigenschaft font-display unterstützt derzeit fünf Wertebereiche: auto | blockieren | tauschen | Rückfall | Optional

Sie sollten die Eigenschaft auf Blockwert setzen, wenn die Wiedergabe des Textes in einer bestimmten Schriftart sehr wichtig ist. Dies liegt daran, dass der Browser unbesiegbaren Text anstelle der bevorzugten Schriftart verwenden kann, wenn sie nicht bereit sind, und sie einwechselt, sobald der Download abgeschlossen ist. Die meisten Browser verwenden diesen Wert als Standardwert ( auto ).

Der Austausch könnte in Fällen verwendet werden, in denen Sie es sich leisten können, eine temporäre Schriftart zu rendern, bis die bevorzugte Schriftart fertig ist. Swap ähnelt Block, rendert jedoch die Fallback-Schriftart, sobald die Seite mit dem Laden beginnt, und ersetzt sie durch die bevorzugte Schriftart, sobald sie fertig sind. Dieser Wert hat eine unendliche Swap-Periode und eine Blockperiode von null Sekunden.

Der Swap -Wert ist nicht ideal für Fließtext, um das Leseerlebnis nicht auf halbem Weg durch das Verschieben von Text zu stören. Sie können dies für Logotext verwenden, wenn Sie den Namen oder Slogan des Unternehmens schnell mithilfe eines Fallbacks anzeigen müssen, aber schließlich die offizielle Schriftart für Branding-Zwecke benötigen.

Beispiel: Font-Display-Eigenschaft auf Swap gesetzt
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Der Swap-Wert ist in den allerersten Codezeilen (Google Font API) implementiert, die verwendet werden, um zu demonstrieren, wie Google-Schriftarten in Ihrem HTML-Dokument verknüpft werden.

Fallback ähnelt Swap , hat aber eine begrenzte Swap-Periode. Wenn die bevorzugte Schriftart nicht innerhalb eines festgelegten Zeitraums geladen wird, normalerweise null Sekunden, behält der Text die Fallback-Schriftart für den Rest der Lebensdauer der Seite bei. Dies ist ein guter Kandidat für Fließtext; es rendert den Text so schnell wie möglich und verschiebt ihn nicht, wenn jemand mit dem Lesen beginnt.

Der optionale Wert ist eine Nachbildung des Fallbacks , ermöglicht es dem Browser jedoch zu entscheiden, ob der Webfont-Download initiiert werden soll oder nicht, unter Berücksichtigung der Netzwerkgeschwindigkeit des Benutzers. In einer Situation, in der die Verbindung zu schwach ist, müsste der Browser Anfragen einschränken und die am meisten benötigten Ressourcen priorisieren, indem er keine Anfragen zum Herunterladen der Webschriftart sendet.

Schriftfamilie und -varianten einschränken

Da jede Schriftfamilie und -variante zum Seitengewicht beiträgt, muss ein Teil Ihres Google Font-Optimierungsprozesses die Begrenzung dieser beiden Elemente beinhalten.

Die Verfügbarkeit mehrerer Varianten wie kursiv , normal, fett usw. bedeutet nicht unbedingt, dass Sie die „Wahl“ haben, sie in Ihren Download aufzunehmen. Reduzieren Sie Ihren Download auf die exakt benötigte Variante und vermeiden Sie es, zu viele einzufügen. Es wäre verschwenderisch, eine vollständige Variante herunterzuladen, weil Sie nur ein Wort davon verwenden möchten. Hier kommt der nächste Optimierungstrick für Google Fonts ins Spiel.

Verwenden Sie den Textparameter

Der Textparameter ist einer der besten Tricks zur Optimierung von Google-Schriftarten, die Sie kennen müssen, und überraschenderweise verwenden ihn die meisten Entwickler nicht. Mit dem Parameter können Sie nur die benötigten Zeichen laden.

Angenommen, Sie möchten nur zwei Buchstaben einer Schriftart in Ihrem Firmennamen verwenden, wie im Beispiel unten. Ich habe verschiedene Schriftarten für die Buchstaben C und N verwendet:

Name der Firma

Sie können anfordern, nur diese beiden Buchstaben statt der gesamten Schriftart zu laden. Die Schriftart-URL enthält zusätzliche Parameter wie diese:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Abschließend

Die Google Font-Optimierung ist eine entscheidende Strategie zur Verbesserung der Gesamtleistung einer Website.

Zugänglichkeit und Lesbarkeit sind immer die wichtigsten Faktoren, auf die man sich konzentrieren muss, abgesehen von gutem Design in der Typografie. Die oben genannten Methoden zur Verbesserung der Schriftleistung konzentrieren sich alle auf das Herunterskalieren der Schriftstärke, den schnellstmöglichen Zugriff auf die Webschriftarten und das Rendern gültiger Formate/Alternativen, wenn das Benutzernetzwerk unbeständig ist.

Bitte lassen Sie uns wissen, ob Sie eine dieser Methoden ausprobiert haben und über einen Optimierungsprozess für Webfonts, der in diesem Artikel nicht erwähnt wird.