Google-Schriften sind zwar einfach zu implementieren, können aber einen großen Einfluss auf die Ladezeiten Ihrer Seiten haben. Lassen Sie uns untersuchen, wie wir sie am besten einbinden und laden können.
Es ist selbstverständlich zu sagen, dass Google-Schriften beliebt sind. Zum aktuellen Zeitpunkt wurden sie über 29 Billionen Mal im Internet angesehen, und es ist leicht zu verstehen, warum – die Sammlung gibt Ihnen Zugang zu über 900 schönen Schriften, die Sie kostenlos auf Ihrer Website verwenden können. Ohne Google-Schriften wären Sie auf die wenigen „Systemschriften“ beschränkt, die auf dem Gerät Ihres Benutzers installiert sind.
Systemschriften oder „Web Safe Fonts“ sind die am häufigsten vorinstallierten Schriften auf Betriebssystemen. So sind beispielsweise Arial und Georgia mit Windows-, MacOS- und Linux-Distributionen ausgestattet.
Wie alle guten Dinge sind auch Google-Schriftarten mit Kosten verbunden. Jede Schrift hat eine bestimmte Größe, die der Webbrowser herunterladen muss, bevor die Schrift vollständig angezeigt werden kann. Bei richtiger Einstellung ist die zusätzliche Ladezeit kaum bis gar nicht spürbar. Wenn die Schriftarten allerdings nicht optimal eingebunden werden, können Webseitenbesucher ein paar Sekunden mehr darauf warten, dass Ihre Webseite fertig geladen hat. Wir haben hier die gängigsten Fehler beschrieben und zeigen wie Sie am besten umgangen werden können.
Google-Schriftarten sind bereits optimiert.
Die Google Fonts API stellt dem Browser nicht nur die Schriftartendateien zur Verfügung, sondern führt auch eine intelligente Überprüfung durch, um zu sehen, wie sie die Dateien im am besten optimierten Format bereitstellen kann.
Schauen wir uns Roboto an, laut GitHub ist die normale Variante 168kb groß.
Wird jedoch die gleiche Schriftartvariante aus der API angefordert, wird eine andere Datei ausgeliefert, nur 11kb hat. 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, so dass mir die Schriftart in diesem hochkomprimierten Format zur Verfügung steht.
Wenn ich meinen Benutzer-Agenten auf Internet Explorer 11 umstelle, wird mir stattdessen die Schriftart im WOFF-Format bereitgestellt.
Schließlich, wenn ich meinen User Agent auf IE8 umstelle, dann bekomme ich die Schriftart im EOT (Embedded OpenType) Format.
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.
Dies ist eine großartige Funktion von Google Fonts, indem sie den Benutzer-Agenten überprüft, der in der Lage ist, die performantesten Formate für Browser bereitzustellen, die diese unterstützen, während die Schriften in älteren Browsern weiterhin konsistent angezeigt werden.
Browser-Caching
Eine weitere integrierte Optimierung von Google Fonts ist das Browser-Caching.
Aufgrund der allgegenwärtigen Natur von Google Fonts muss der Browser nicht immer die vollständigen Schriftdateien herunterladen. Die Webseite von Digitalsuite verwendet zum Beispiel eine Schriftart namens ‚Quicksand‘, 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 mit dieser Schriftart besuchen, verwendet der Browser die zwischengespeicherte Version und hat diese viel schneller geladen.
Da die Google Fonts-API immer häufiger verwendet wird, ist es wahrscheinlich, dass Besucher Ihrer Website oder Seite bereits alle in Ihrem Design verwendeten Google-Schriften in ihrem Browser-Cache haben.
1. Schriftfamilien einschränken
Die einfachste Optimierung besteht darin, einfach weniger Schriftfamilien zu verwenden. Jede Schriftart kann bis zu 400kb zu Ihrer Webseitengröße hinzufügen, multiplizieren Sie das mit ein paar verschiedenen Schriftfamilien und plötzlich sind Ihre Schriften größer als Ihre gesamte Seite.
Ich empfehle, nicht mehr als zwei Schriften zu verwenden, eine für Überschriften und eine für Inhalte ist in der Regel ausreichend. Mit der richtigen Verwendung von Schriftgröße, Gewicht und Farbe können Sie auch mit nur einer Schrift einen tollen Look erzielen.
2. Varianten ausschließen
Aufgrund des hohen Qualitätsstandards von Google Fonts enthalten viele der Schriftfamilien das gesamte Spektrum der verfügbaren Schriftgewichte:
- Dünn (100)
- Dünne Kursivschrift (100i)
- Licht (300)
- Hellkursiv (300i)
- Regulär (400)
- Reguläre Kursivschrift (400i)
- Mittel (600)
- Mittlere Kursivschrift (600i)
- Fett gedruckt (700)
- Fett kursiv (700i)
- Schwarz (800)
- Schwarz Kursiv (800i)
Das ist großartig für fortgeschrittene Anwendungsfälle, die alle 12 Varianten benötigen könnten, aber für eine normale Website bedeutet es, alle 12 Varianten herunterzuladen, wenn Sie nur 3 oder 4 benötigen.
So wiegt beispielsweise die Roboto-Schriftfamilie ~144kb. Wenn Sie jedoch nur die Varianten Regular, Regular Italic und Bold verwenden, beträgt diese Zahl ~36kb. 75% Ersparnis!
Der Standard-Code für die Implementierung von Google Fonts sieht wie folgt aus:
<link rel=“stylesheet“ href=“https://fonts.googleapis.com/css?family=Montserrat”>
Wenn Sie das tun, wird nur die Variante’regular 400′ geladen. Das bedeutet, dass alle hellen, fetten und kursiven Texte nicht korrekt dargestellt werden.
Um stattdessen alle Schriftartenvarianten zu laden, müssen wir die Gewichte in der URL so angeben:
<link href="https://fonts.googleapis.com/css?family=Montserrat: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 Dünn (100) bis Schwarz (900) verwendet. Die optimale Strategie ist es, nur die Gewichte anzugeben, die Sie verwenden möchten:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,600" rel="stylesheet">
Dies ist besonders wichtig bei der Verwendung mehrerer Schriftfamilien. Wenn Sie z.B. Lato für Überschriften verwenden, ist es sinnvoll, nur die fettgedruckte Variante (und eventuell fett kursiv) anzufordern:
<link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">
3. Anfragen an den Google Server reduzieren
Der Code-Ausschnitt, mit dem wir oben gearbeitet haben, ruft die Server von Google (fonts.googleapis.com) an, das heißt eine HTTP-Anfrage. Im Allgemeinen gilt: Je mehr HTTP-Anfragen Ihre Webseite stellen muss, desto länger dauert das Laden.
Wenn Sie zwei Schriften laden möchten, können Sie dies auf folgende Weise tun:
<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 zu einer einzigen Anfrage wie dieser kombinieren:
<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">
Es gibt keine Begrenzung, wie viele Schriften und Varianten eine einzelne Anforderung aufnehmen kann.
4. Ressourcen-Hints
Ressourcen-Hints sind eine Funktion, die von modernen Browsern unterstützt wird und die die Leistung der Website steigern kann. Wir werden uns zwei Arten von Ressourcen-Hints ansehen:’DNS Prefetching‘ und’Preconnect‘.
Hinweis: Wenn ein Browser eine moderne Funktion nicht unterstützt, wird er sie einfach ignorieren. So wird Ihre Webseite weiterhin normal geladen.
DNS-Voreinstellung
Das DNS-Prefetching ermöglicht es dem Browser, die Verbindung zur Fonts-API von Google (fonts.googleapis.com) zu starten, sobald die Seite zu laden beginnt. Das bedeutet, dass zu dem Zeitpunkt, an dem der Browser bereit ist, eine Anfrage zu stellen, ein Teil der Arbeit bereits erledigt ist.
Um DNS-Prefetching für Google-Schriften zu implementieren, fügen Sie einfach diesen Einzeiler zu Ihren Webseiten <head> so weit oben wie möglich hinzu:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
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 gibt, https://fonts.gstatic.com Eine zusätzliche Anforderung für jede Schriftartvariante.
Das Problem bei diesen zusätzlichen Anfragen besteht darin, dass der Browser die Prozesse zur Erstellung dieser erst dann startet, wenn die erste Anfrage an https://fonts.googleapis.com/css abgeschlossen ist. Hier kommt Preconnect ins Spiel.
Preconnect könnte als eine erweiterte Version von Prefetch beschrieben werden. Sie ist auf die spezifische URL eingestellt, die der Browser laden soll. Anstatt nur ein DNS-Lookup durchzuführen, vervollständigt es auch die TLS-Verhandlung und den TCP-Handshake.
Genau wie DNS Prefetching kann es mit einer Zeile Code implementiert werden:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
Das Hinzufügen dieser Codezeile kann die Ladezeit Ihrer Seite um 100 ms verkürzen. Dies wird ermöglicht, indem die Verbindung neben der ersten Anforderung 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 Fonts ohne Erlaubnis zu verwenden, zu ändern und zu verteilen. Das bedeutet, dass Sie das Hosting von Google nicht verwenden müssen, wenn Sie nicht möchten – Sie können die Schriften selbst hosten! Alle Schriftartendateien sind auf Github verfügbar. Eine Zip-Datei mit allen Schriften ist ebenfalls verfügbar (387MB).
Es gibt sogar einen Helferdienst, der es Ihnen ermöglicht, auszuwählen, welche Schriften Sie verwenden möchten, dann stellt er die dafür benötigten Dateien und CSS zur Verfügung.
Zusätzlich sind die damit auch bezüglich DSGVO auf der sicheren Seite, da Ihre Webseite so keine Anfrage an Drittserver stellt und damit auch keine personenbezogenen Daten an Dritte ohne die Einwilligung Ihrer Webseitenbesucher weitergibt. Wir empfehlen daher Google Fonts lokal einzubinden.
Der einzige Nachteil Schriften lokal zu hosten, besteht darin, dass Sie nicht von Änderungen der Schriftdateien betroffen sind. Wenn sie verbessert oder aktualisiert werden, erhalten Sie diese Änderungen nicht. Im Vergleich dazu erhalten Sie bei der Anforderung von Schriften über die Google Fonts API immer die aktuellste Version. Dennoch kann es sinnvoll sein 1 mal pro Jahr die Schriftdateien neu herunterzuladen und mit den alten auf dem Server zu ersetzen, da Aktualisierungen in der Regel nicht sehr häufig vorkommen.
6. CSS – Font-Display
Wir wissen, dass es Zeit braucht, bis der Browser Google-Schriften herunterlädt, aber was passiert mit dem Text, bevor er fertig ist? Lange Zeit zeigte der Browser Leerzeichen an, wo sich der Text befinden sollte, auch bekannt als „FOIT“ (Flash of Invisible Text).
Wir empfehlen, sich auch mit den Begriffen: „FOUT, FOIT, FOIT, FOFT“ vertraut zu machen. Keinen Text zu sehen, kann für den Endbenutzer eine erschütternde Erfahrung sein, eine bessere Erfahrung wäre es, zuerst eine Systemschriftart als Fallback zu zeigen und dann die Schriften zu „tauschen“, sobald sie fertig sind.
Dies ist über die Eigenschaft CSS font-display möglich. Durch Hinzufügen von
font-display: swap; zur @font-face-Deklaration
sagen wir dem Browser, dass er die Fallback-Schriftart anzeigen soll, bis der Google-Font verfügbar ist.
Im Jahr 2019 kündigte Google an, dass sie die Unterstützung für die Schriftanzeige hinzufügen würden: Sie können sofort mit der Implementierung beginnen, indem Sie der Font-URL einen zusätzlichen Parameter hinzufügen:
https://fonts.googleapis.com/css?family=Montserrat&display=swap
7. Verwenden Sie den “Text”-Parameter
Eine wenig bekannte Funktion der Google Fonts API ist der Textparameter. Dieser selten verwendete Parameter erlaubt es Ihnen, nur die Zeichen zu laden, die Sie wirklich benötigen.
Wenn Sie beispielsweise ein Text-Logo haben, das eine eindeutige Schriftart sein muss, können Sie mit dem Textparameter nur die im Logo verwendeten Zeichen laden.
Es funktioniert so:
https://fonts.googleapis.com/css?family=Roboto&text=IhreZeichenkette
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 Textparameters wird standardmäßig nur die „normale“ Schriftart 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=IhreZeichenkette
Fazit:
Bei schätzungsweise 53% der Top 1 Million Websites, die Google Fonts verwenden, kann die Implementierung dieser Optimierungen einen enormen Einfluss haben.
Wie viele der oben genannten haben Sie ausprobiert?
Neueste Kommentare