Bessere Ladezeiten ohne Google-Fonts

Und EU-DSGVO-Konformität?

Du bist dabei, Deine Website-Ladezeiten zu optimieren und hättest gerne eine höchstmögliche Wertung? Aber Dir versaut ein bestimmter Faktor die Bestnote? Du bekommst eine Note 6 (F), weil Du für Google-Fonts kein Ablaufdatum für das Browsercaching angegeben hast (wie auch?)! Du fragst Dich, wie Du das Thema Datenschutz angehen kannst, wie Du die Ladezeiten ohne Google-Fonts verbessern kannst, und vor allem:

Dich macht diese Meldung wahnsinnig?

Leverage browser caching - The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future

Dann bist Du hier richtig. Heute wird es mal etwas technischer. In diesem Beitrag möchte ich zeigen, wie Du einerseits die Ladezeit Deiner Website verbesserst und andererseits der EU-Datenschutzgrundverordnung genügst, indem Du die verwendeten Schriftarten nicht immer von Google-Fonts lädst, sondern auf Deinem eigenen Webserver ablegst.

In der Zielgruppe dieses Beitrags bist Du, wenn Du Dich schon ein wenig mit der Administration von WordPress auskennst und einen FTP-Zugriff auf Deinen Webserver hast. Also los, lass uns optimieren!

Der Stein des Anstoßes bei den Ladezeiten

Wenn Du beim Optimeren ein Analysetool wie GTmetrix oder Pingdom einsetzt, dann bist Du wahrscheinlich schon einmal über diese oder eine ähnliche Rückmeldung gestolpert (Screenshot von pingdom.com):

Da sitzt man nun und fragt sich „Wie soll ich denn bei einem von außen eingebundenen Google-Font mitgeben, für wie lange der im Cache vorgehalten werden soll?“. Kurze Antwort: Das geht überhaupt nicht. Darum müssen wir das anders lösen.

Und was ist das Problem mit der EU-DSGVO?

Man denkt bei Schriftarten im ersten Moment nicht an Datenschutz, aber das ist nach den neuen Gesetzen, gültig seit Inkrafttreten der DSGVO am 25. Mai 2018, tatsächlich ein Thema. Warum? Wenn Du eine Website besuchst, die ihre Schriftarten von Google-Fonts lädt, dann erhält Google über ein Tracking-Cookie davon Kenntnis, dass Du die Schriftart geladen hast und über welche Seite das war. Die Schriftart selbst ist dabei eigentlich nicht das Problem, sondern die Tatsache, dass Google dadurch weiß, dass Du diese Seite aufgerufen hast. Und zwar von welcher IP-Adresse, mit welchem Browser und welchem Betriebssystem. Darum ist es auch aus Datenschutzgründen ein Muss, die Schriftarten selbst zu „servieren“, statt sie von Google zu holen.

Warum sind die Ladezeiten ohne Google-Fonts schneller?

Beim Optimieren der Seiten-Ladezeiten ist Browser-Caching ein wichtiges Werkzeug, die Zugriffe auf externe Adressen zu minimieren, oder gar komplett zu vermeiden. Der Grund ist, dass man sonst von der Wartezeit abhängig ist, die es erfordert, um externe Dateien (hier die Schriftartendateien von Google) zu laden. Diese Wartezeit kann man nicht beeinflussen, wirkt sich aber negativ auf die Gesamtladezeit der eigenen Seite aus.

Vor allem aber kann man an dieser Stelle nicht den größten Hebel ansetzen, um Ladezeiten zu optimieren: das Browser-Caching. Der Cache Deines Browsers ist ein Verzeichnis auf Deinem Computer, in welchem Dein Browser Dateien ablegt, die sich nicht häufig ändern, und die er darum von einer Website nicht immer wieder herunterladen muss, wenn Du sie besuchst. Beispiel: Das Logo einer Firma. Statt bei jedem Aufruf der Seite das Logo immer und immer wieder aufs Neue herunterzuladen, ist es viel schneller, die Datei zu verwenden, die man vor einer Zeit X schon heruntergeladen hat. Wie lange diese Zeit X dauern soll, das kann man auf Seiten des Webservers bestimmen, und dem Browser sagen, was er wie lange aus dem Cache nehmen soll, statt es neu herunterzuladen.

Wenn man das nun nicht nur mit Bildern und anderen sogenannten „statischen“ Inhalten, sondern auch mit Schriftarten machen kann, dann wäre man in der Lage, dem Browser zu sagen: „Hey, diese Schriftart verwenden wir jetzt für eine ganze Weile. Und die ändert sich auch so bald nicht. Also speichere die bei Dir für einen Monat, bevor Du sie erneut herunterlädst.“ Das verbessert die Ladezeit enorm. Je weniger der Browser herunterladen muss, weil er es schon hat, umso schneller kann er die Website anzeigen.

Wie kann man denn nun die Google-Fonts lokal speichern?

Zunächst einmal: Mit „lokal“ ist gemeint „auf dem Server, auf dem Deine Website abgelegt ist“. Erst, wenn Du nicht mehr mit einem Verweis auf die Font-Dateien bei Google arbeitest, sondern selbst über die Dateien auf dem Server verfügst, greift die oben genannte Einstellung auf dem Webserver, die dem Browser sagt, dass er eine Datei eines bestimmten Typs (nämlich u. a. Bilder und eben auch Schriftarten) im Cache speichern soll. Für Dateien von anderen Servern kann man diese Anweisung nämlich nicht geben.

Die Schriftarten-Dateien müssen also von Deinem Webserver direkt kommen und nicht von Google. Dafür sind ein paar Schritte notwendig, die ich Dir hier nun beschreibe. Los geht’s!

Vorgehen

Mit den folgenden sieben Schritten erreichst Du bessere Ladezeiten ohne Google-Fonts. Wo es möglich ist, illustriere ich die Schritte mit Beispielen von unserer Website https://fjordkommission.de

1. Verwende entweder ein Dateimanager-Plugin, oder verbinde Dich mit FTP auf Deinen Webserver. Lege nun in Deinem Child-Theme-Ordner zwei Ordner an: „css“ und „fonts“. Bei uns sind das

   (...)/wp-content/themes/Impreza-child/css

   bzw.

   (...)/wp-content/themes/Impreza-child/fonts

2. Öffne im Browser das Stylesheet für Deinen Font, das bei Google-Fonts hinterlegt ist (z. B. http://fonts.googleapis.com/css?family=Arimo), und speichere es lokal als CSS-Datei „googlefonts.css“. Lade diese anschließend in den Ordner „css“ hoch, den Du im Schritt 1 angelegt hast.
3. Öffne die CSS-Datei. In ihr gibt es mehrere Definitionen für verschiedene Zeichencodierungen (meist latin, latin-ext, oft auch cyrillic, greek und verschiedene asiatische Varianten). In jeder Definition steht bei dem Attribut „url“ in Klammern die Adresse der eigentlichen Schriftart-Datei (z. B. „url(https://fonts.gstatic.com/s/arimo/v11/P5sMzZCDf9_T_10XxCF8jA.woff2)“). Diese Dateien musst Du alle einzeln herunterladen und anschließend in Deinem Ordner „fonts“ ablegen.
4. Optional, aber dennoch empfohlen: Die .woff2-Dateien mit „sprechenden“ Namen umbenennen, damit Du ihnen ansiehst, welche Zeichencodierung sie vertreten. Also zum Beispiel „Arimo-Regular-latin-ext.woff2“ statt „P5sMzZCDf9_T_10XxCF8jA.woff2“.
5. Ändere in der CSS-Datei googlefonts.css die Verweise auf die WOFF-Dateien im url-Attribut, die Du eben benutzt hast, um die Dateien herunterzuladen, nun so, dass sie auf Deine eigenen lokalen Dateien zeigen. Also beispielsweise https://fjordkommission.de/wp-content/themes/Impreza-child/fonts/Arimo-Regular-latin-ext.woff2
6. Damit diese lokalen Schriftarten nun nicht mehr von Google-Fonts, sondern von Deinem eigenen Webserver kommen sollen, musst Du als nächstes in der Datei „header.php“ in Deinem Child-Theme Deine eigene neue CSS-Datei referenzieren. Das geht durch Einfügen des HTML-Tags „link“.
   Z. B. <link rel=“https://fjordkommission.de/wp-content/themes/Impreza-child/css/googlefonts.css“ type=“text/css“/>.
   Schreibe diese Zeile an den Anfang, nach dem Tag <head> und vor den Aufruf der PHP-Funktion wp_head(). Mit dieser Information weiß der Browser dann, wo er die Schriftarten findet. Beispiel:

   <!DOCTYPE HTML>
   <html class="<?php echo $us_layout->html_classes() ?>" <?php language_attributes( 'html' ) ?>>
   <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="//fjordkommission.de/wp-content/themes/Impreza-child/css/googlefonts.css" type="text/css"/>
   <?php wp_head() ?>          
   (...)

7. Als letzten Schritt -zur eigentlichen Optimierung der Ladezeit- musst Du nun nur noch die Anweisung geben, dass der Browser Dateien vom Typ „Schriftart“ in seinem Cache speichern soll. Dafür bearbeitest Du die Datei .htaccess im obersten Verzeichnis Deiner Website. Die Anweisung lautet „ExpiresByType“. Idealerweise hast Du schon eine Optimierung der Seiten-Ladezeiten vorgenommen, so dass der Block in der Datei bereits enthalten ist. Ergänze ihn wie folgt (neue Angaben in Rot):

   <IfModule mod_expires.c>
   AddType application/font-woff2 .woff2
   ExpiresActive On
   #(...)
   ExpiresByType text/css "access plus 30 days"
   ExpiresByType application/font-woff2 "access plus 30 days"
   </IfModule>

   Falls Du noch keine solchen Angaben für das Browser-Caching gemacht hast, und dieser Block noch ganz fehlt, dann wirf einen Blick auf dieses Tutorial bei hosteurope.de, wo es auch ein Beispiel zum Kopieren gibt.

8. Für den Fall, dass Du ein Caching-Plugin aktiviert hast (wovon wir jetzt einmal ausgehen, da Du Dich mit dem Thema Optimierung der Seiten-Ladezeiten beschäftigst), musst Du nun noch den Cache dieses Plugins löschen, damit die Änderung an der Datei „header.php“ wirksam wird.

Ist die Seite jetzt schneller geladen? Finde es heraus

Lasse nun erneut das Analysetool über Deine Seite laufen. Wir verwenden übrigens http://gtmetrix.com und http://tools.pingdom.com. Falls diese Tools immer noch kritisieren, dass Du das Browser-Caching für die Schriftarten nicht unterstützt, nicht verzagen! Manchmal dauert es eine Weile, bis die Änderung an der Datei .htacess greift. Mach in diesem Fall eine Kaffeepause und versuche es in einer halben Stunde noch einmal. Wenn die Änderungen greifen, sollten nun Deine Ladezeiten ohne Google-Fonts deutlich schneller sein! Auf zur 100%-Marke! 🙂

Hast Du noch weitere Fragen zu dem Thema? Oder sogar noch ergänzende Tipps und Hinweise? Wir freuen uns auf Deinen Input in den Kommentaren!