So beschleunigen Sie Google Fonts in WordPress

Veröffentlicht: 2020-04-10

Heute werde ich einige Methoden zur Optimierung und Beschleunigung von Google Fonts in WordPress behandeln. Bilder sind natürlich und werden immer der schwerste Teil einer Webseite sein, aber laut HTTP Archive machen Webfonts seit Oktober 2016 etwas mehr als 3 % des Gesamtgewichts einer durchschnittlichen Seite aus.

Auch wenn das Gewicht von Webfonts nur einen kleinen Teil der gesamten Webseite ausmacht, trägt jede Optimierung, die Sie vornehmen, zu schnelleren Ladezeiten bei. Sehen Sie sich unten einige Möglichkeiten an, um diese Schriftarten zu beschleunigen!

Was sind Google Fonts?

Zunächst einmal, für diejenigen unter Ihnen, die es vielleicht nicht wissen, Google Fonts ist ein (kostenloses) Open-Source-Verzeichnis mit über 800 Webfont-Familien, die Sie auf Ihrer Website verwenden können. Sie können auch lokal zum Drucken und für andere Zwecke heruntergeladen werden. Millionen von WordPress-Websites verwenden Google Fonts, da dies eine großartige kostenlose Möglichkeit ist, das Aussehen und die Benutzerfreundlichkeit Ihrer Website zu verbessern.

Wenn Sie nach reiner Leistung streben, werden Systemschriftarten immer gewinnen, aber es geht nichts über die Professionalität und Ästhetik einer guten Webschriftart. Und tatsächlich hat sich gezeigt, dass Typografie Conversions positiv beeinflusst. Aber alles hat seinen Preis. Daher ist es wichtig zu verstehen, wie sich das Hinzufügen von Google Fonts zu Ihrer WordPress-Site auf Geschwindigkeit und Leistung auswirkt.

So verwenden Sie Google Fonts in WordPress

Es gibt mehrere Möglichkeiten, Google Fonts zu Ihrer WordPress-Site hinzuzufügen. Der erste und standardmäßige Weg ist, sie direkt von Google zu holen. Diese Methode verwendet ihr globales CDN, um die Schriftarten schnell von verschiedenen Servern aus der ganzen Welt bereitzustellen.

Wenn Sie sie zu Ihrer Website hinzufügen, erfolgt eine externe Anfrage an fonts.googleapis.com .

googleapis

Das sind auch externe Anfragen an fonts.gstatic.com für die WOFF- oder WOFF2-Versionen, je nach Browserunterstützung.

gstatisch

WordPress-Plugin

Wenn Sie ein WordPress-Anfänger sind, ist der einfachste Weg, Google Fonts zu Ihrer Website hinzuzufügen, wahrscheinlich ein kostenloses Plugin. Das Easy Google Fonts-Plugin ist ein gutes beliebtes Beispiel. Zum Zeitpunkt des Schreibens hat es derzeit über 300.000 aktive Installationen mit einer Bewertung von 4,9 von 5 Sternen.

einfache google schriften wordpress

Einbettungscode von Google Fonts hinzufügen

Es ist wichtig zu beachten, dass die meisten WordPress-Plugins einen leichten Overhead verursachen, und deshalb ziehe ich es vor, Google Fonts mit ihrem viel einfacher zu verwendenden Einbettungscode hinzuzufügen. Gehen Sie also zu Google Fonts und wählen Sie die gewünschte Schriftart aus. Für dieses Beispiel verwende ich Roboto.

Klicken Sie auf die Option „ Anpassen “. Dies ist ein wichtiger Schritt, da jede Schriftfamilie unterschiedliche Schriftstärken hat. Typischerweise möchten Sie normal, mittel und fett.

Hinweis: Jede Schriftart, die Sie hinzufügen, trägt zur Gesamtladezeit Ihrer Schriftarten bei, wählen Sie also nicht einfach alle aus. Je weniger, desto besser.

4 Roboto-Google-Schriftarten

Klicken Sie dann auf die Option „ Einbetten “. Hier sollten Sie den bereitgestellten Einbettungscode kopieren.

Google Fonts einbetten

Nehmen Sie diesen Code und fügen Sie ihn in den Abschnitt <head> Ihrer WordPress-Site ein. Es gibt verschiedene Möglichkeiten, wie Sie dies tun können, einige ziehen es vielleicht vor, die Schriftarten in die Warteschlange einzureihen, aber für dieses Beispiel habe ich den Code einfach zur Datei header.php hinzugefügt. Hinweis: Dies kann je nach verwendetem Thema leicht variieren.

Header-Schriftart einbetten

Damit Ihr WordPress-Theme tatsächlich die Google Fonts verwendet, müssen Sie einige CSS-Stile hinzufügen. Unten ist ein Beispiel dafür, was ich verwende. Wenn Ihr Theme-Admin-Panel keinen benutzerdefinierten CSS-Editor hat, können Sie immer ein kostenloses Plugin wie benutzerdefiniertes CSS und JS verwenden.

 body {font-family:roboto; font-size:18px;} h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;} h1 {font-size:28px;} h2 {font-size:26px;} h3 {font-size:24px;} h4 {font-size:20px;} h5 {font-size:18px;} h6 {font-size:16px;}

Nachdem Sie nun einige schnelle Methoden zum Hinzufügen von Google Fonts zu Ihrer WordPress-Site kennen, werde ich jetzt ein paar schnelle Tests durchführen, um alternative Möglichkeiten zur Beschleunigung zu finden. Ich habe zuerst einige Tests mit dem obigen Setup durchgeführt und die Durchschnittsgeschwindigkeit lag bei 418 ms. Hinweis: Jeder Test wurde fünfmal durchgeführt, und das Durchschnittsergebnis wurde genommen.

google fonts cdn geschwindigkeitstest

Hosten Sie Google Fonts lokal

Eine andere Möglichkeit, Google Fonts auf Ihrer WordPress-Site bereitzustellen, besteht darin, sie lokal auf Ihrem Webserver zu hosten. Wenn sich Ihre Zielgruppe an einem bestimmten geografischen Standort und in der Nähe Ihres Servers befindet, kann es tatsächlich schneller sein, sie lokal zu hosten, als Google Fonts zu verwenden. Google Fonts CDN ist großartig, aber das Hinzufügen dieser zusätzlichen externen Anfragen und DNS-Lookups kann zu Verzögerungen führen.

Diese Methode funktioniert normalerweise nur, wenn Sie schnelles Hosting verwenden. In dem Beispiel verwende ich verwaltetes WordPress-Hosting von Kinsta, das ironischerweise von der Google Cloud Platform betrieben wird.

Um lokal zu hosten, habe ich tatsächlich ein kostenloses Tool namens google-webfonts-helper verwendet. Dadurch können Sie die Google-Schriftarten einfacher lokal herunterladen und erhalten das gesamte CSS. Unten ist ein Beispiel dafür, was wir am Ende haben werden. Sie müssen die heruntergeladenen Schriftarten auf Ihren Webserver hochladen. In diesem Fall habe ich sie in einem Ordner namens „Schriftarten“ abgelegt.

 /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

Wir müssen dann sicherstellen, dass der Einbettungscode von Google Fonts in der Kopfzeile entfernt wird, damit Sie diese externen Aufrufe nicht mehr haben. Ich habe dann noch einmal einige Tests mit dem obigen Setup durchgeführt und die Durchschnittsgeschwindigkeit betrug 386 ms.

Geschwindigkeitstest für lokale Google-Schriftarten

Hinweis: Der Webserver befindet sich in Iowa, und der Geschwindigkeitstest von Pingdom wurde in Dallas, TX, durchgeführt. Wie Sie sehen können, ist es, obwohl sich der Server an einem anderen Ort in den Vereinigten Staaten befindet, immer noch etwas schneller, Google Fonts lokal auf dem Server zu laden. Natürlich möchten Sie verschiedene Standorte selbst testen, basierend auf Ihrem eigenen Publikum.

Hosten Sie Google Fonts auf Ihrem eigenen CDN

Nun zu einem dritten Szenario. Auf der obigen Website verwende ich bereits einen Drittanbieter-CDN-Anbieter (KeyCDN), um alle anderen Assets (Bilder, CSS, Javascript usw.) zu hosten. Was passiert, wenn wir unsere Schriftarten jetzt auf dasselbe CDN statt auf Googles CDN werfen?

Ich verwende das kostenlose CDN Enabler WordPress-Plugin. Dadurch werden die Schriftarten tatsächlich automatisch aus dem Ordner „Schriftarten“ auf dem Webserver nach KeyCDN kopiert. Wir müssen den Code dann leicht anpassen, sodass der Pfad zu den Schriftarten jetzt auf das CDN zeigt (z. B. cdn.domain.com).

 /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

Ich habe dann noch einmal einige Tests mit dem obigen Setup durchgeführt und die Durchschnittsgeschwindigkeit betrug 384 ms.

Wie Sie sehen können, ist die Verwendung eines CDN noch einmal etwas schneller. Nicht viel, aber wenn Sie es mit Googles CDN vergleichen, testen Sie es, es ist definitiv schneller. Ein Teil davon liegt daran, dass es dieselbe HTTP/2-Verbindung nutzen kann und dennoch den externen Anruf und die DNS-Suche reduziert, genau wie es das lokale Hosting tut. Und natürlich ist ein Vorteil dieser Methode, dass sie global schneller ist.

Zusammenfassung

Wie Sie den obigen Tests entnehmen können, ist das Google Fonts-CDN großartig, aber möglicherweise nicht immer das schnellste. Natürlich hängt es immer von Ihrer eigenen Umgebung ab und davon, wo Sie Traffic bereitstellen, sei es für ein lokales Publikum oder global.

Ich empfehle, jede der oben genannten Methoden selbst zu testen und zu sehen, welche die schnellste ist und für Ihre WordPress-Site am besten funktioniert. Und denken Sie daran: Laden Sie nur die tatsächlich benötigten Schriftstärken!