Google Fonts asynchron laden und in WordPress einbinden
Im ersten Teil habe ich dir gezeigt wie wir Google Fonts in WordPress einbinden können. Dieser Teil handelt darüber, wie wir Google Fonts asynchron laden und somit die Ladezeit unserer Webseite verbessern können.
Was bewirkt das asynchrone Laden von Google Fonts? Durch das asynchrone Laden von Google Fonts wird vermieden, dass deine Webseite beim Laden von JavaScript blockiert wird.
Du kennst das vielleicht schon von PageSpeed Insights by Google, womit du die Ladezeit deiner Webseite testen kannst. Hier wird eine solche Optimierungsempfehlung wie folgt betitelt: Ressourcen beseitigen, die das Rendering blockieren.
Google Fonts mit Javascript „async“ laden
Auf die herkömmliche Art werden Google Fonts durch das <link> HTML-Tag im Head-Bereich einer Webseite oder durch @import über CSS eingebettet und synchron geladen. Dadurch wird jedoch das Rendering der Seite blockiert und Inhalte werden solang ausgeblendet, bis sie vollständig geladen sind. Die Einbettung von Google Fonts sieht in der Regel so aus:
Einbindung über das <link> HTML-Tag:
Einbindung über @import in CSS:
Web Font Loader als Lösung für asynchrones Laden
Möchten wir die Web-Schriften jedoch asynchron laden, betten wir die Google Fonts stattdessen über Javascript ein. Die Bibliothek von Web Font Loader bietet dafür die geeignete Lösung.
Diese Lösung verbessert die gefühlte Ladezeit für den Nutzer und hat den Vorteil, dass der Inhalt einer Webseite schon viel früher angezeigt wird, da dieser nun nicht mehr durch das synchrone Laden blockiert wird.
Wir erstellen zunächst eine neue Javascript-Datei, nennen diese z.B. google-fonts-async.js und kopieren den folgenden Code-Schnipsel in die Datei:
Wie im oberen Code-Beispiel zu sehen ist, werden innerhalb des Arrays families: [...]eine oder mehrere Google Fonts definiert, welche anschließend auf deiner WordPress Webseite asynchron geladen bzw. eingebettet werden sollen.
Hinweis: Wenn wir Web-Schriften asynchron Laden wird der Rest der Seite möglicherweise gerendert, bevor das Script geladen und ausgeführt wird. Dies kann zu einem sogenannten FOUT (Flash of unstyled text) führen. In diesem Fall sollte das obere Script synchron geladen werden. Weitere Informationen dazu findest du unter: https://github.com/typekit/webfontloader
FOUT vermeiden und Fallback-Schriftart(en) definieren
Wie bereits erwähnt, führt das asynchrone Laden von Web-Schriften dazu, dass der Inhalt bereits vor dem erfolgreichen Laden der Schriftart angezeigt werden kann und somit die gefühlte Ladezeit optimiert wird. Für einen minimalen Zeitraum wird also zunächst eine Fallback-Schriftart verwendet, bis die eigentliche Google Font angezeigt wird.
Wenn wir bestimmen möchten, welche Fallback-Schriftart verwendet wird, können wir das über die Definition der folgenden CSS-Regeln tun. Außerdem verringern wir somit ebenfalls den sogenannten FOUT (Flash of unstyled text) beim asynchronen Laden der Webfonts, indem wir eine möglichst ähnliche Fallback-Schriftart zur geladenen Google Font verwenden.
Die Fallback-Schrift(en) werden so definiert:
Die Web Font Loader Bibliothek fügt dem html-Tag der Webseite u.a. die CSS-Klasse .wf-active hinzu, sobald das Script verfügbar ist. Diese Klasse können wir dafür nutzen, die Google Fonts für die Anzeige auf unserer Webseite zu definieren. Das bedeutet, dass Google Fonts nur dann verwendet werden, sobald das Web Font Loader Skript geladen ist:
Die Google Fonts in WordPress einbinden
Nun haben wir eine Lösung geschaffen Google Fonts asynchron zu laden, um die Ladezeit unserer WordPress Webseite zu verbessern. Im letzten Schritt laden wir die erstellte Javascript-Datei google-fonts-async.js mit Hilfe von wp_enqueue_script() innerhalb von WordPress auf die folgende Art und Weise:
Möchten wir das Script stattdessen im <head> Bereich der Webseite laden, setzen wir den letzten Wert in der Funktion wp_register_script() von „true“ auf „false„:
Übrigens kannst du mit Hilfe der Web Font Loader Bibliothek neben Google Fonts auch weitere Web-Schriften wie Adobe Fonts (früher Typekit Fonts) oder fonts.com Web Fonts asynchron laden.
Icons made by Freepik from www.flaticon.com
