Einfluss von Schriftarten auf den Pagespeed

Letzte Änderung:

Allgemeines

Aus (web-)technischer Sicht unterteilt man Schriftarten("Fonts") in zwei Klassen:

Die Wahl der Schriftart kann vor diesem Hintergrund einen starken Einfluss auf die Ladezeiten und damit auch auf das Ranking in Suchmaschinen haben. 


Was sind "websichere Schriftarten"?

"Websichere Schriftarten" bzw. "Web Safe Fonts" stehen nahezu jedem System standardmäßig zur Verfügung. Im Gegensatz zu nicht websicheren Schriftarten (z.B. von Google) müssen sie nicht extra von einem Server geladen werden.

Ihre Verwendung hat dadurch gleich mehrere Vorteile:

  1. der Pagespeed der Seite erhöht sich
  2. die "visuelle Stabilität" bleibt erhalten (keine Verschiebe-Effekte während der Ladezeit)
  3. datenschutzrechtlich bedenklichen Zugriffe (z.B. Zugriff auf Drittserver) werden vermieden

Vor dem Hintergrund der Core Web Vitals von Google, die Ladezeiten und die stabile Darstellung ("Cumulative Layout Shift") während des Seitenaufbaus zu wichtigen Ranking-Faktoren machen, spielt die Wahl der Schriftart eine wichtige Rolle bei der technischen Suchmaschinenoptimierung.


Beispiele websicherer Fonts

Beispiele für websichere Font sind u.a. Verdana, Arial und Times New Roman:

Arial: Dies ist ein Text, 0 1 2 3 4 5 6 7 8 9

Verdana: Dies ist ein Text, 0 1 2 3 4 5 6 7 8 9

Times New Roman: Dies ist ein Text, 0 1 2 3 4 5 6 7 8 9

Garamond Dies ist ein Text, 0 1 2 3 4 5 6 7 8 9


Die Auswirkungen der Schriftart auf die Ladezeit einer Seite

Um die Auswirkungen der gewählten Schriftart auf den Pagespeed und der Core Web Vitals messen zu können, haben wir zwei statische Seiten auf denselben Webspace gelegt und mit dem Pagespeed-Tool von Google aufgerufen. Beide Seiten sind bis auf die verwendete Schriftart identisch.

Herausgekommen ist Folgendes:

Die linke Seite auf obigem Bild zeigt die Auswertung der Seite mit der externen Schriftart Raleway von Google. Das rechte Bild gibt die Ergebnisse derselben Seite unter Verwendung der websicheren Schriftart Verdana wider. Wie man sieht erzielt die zweite Variante in allen Bereichen bessere Ergebnisse und kommt mit einem Gesamtwert von 93 Punkte 9 Punkte besser aus der Analyse als die Version mit Raleway (84 Punkte).

Die unterste Zeile zeigt den Aufbau der Seite auf einem Zeitstrahl. Hier wird deutlich, dass die Inhalte auch später erscheinen. Das wird u.a. mit der Kennzahl "First Contentful Paint"(FCP) gemessen und ist der Tatsache geschuldet, dass die Schriftart erst vom Server geladen und verarbeitet werden muss.

Eine einfache Netzwerk-Analyse liefert hierzu genauere Zahlen:

Es müssen also 4(!!) Ressourcen geladen werden, die zusammen eine Größe von ca. 85 KB haben. Der Zeitaufwand dafür beträgt ca. 350 Millisekunden.


Awesomefont und Alternativen

Awesomefont ist eine beliebte Schriftartart zur Darstellung von Icons:

Die Schriftart ist sehr beliebt. Ihr primäres Ziel ist es, eine einheitliche Symbolwelt bereit zu stellen und die Erstellung und Verwendung von Grafiken zu vermeiden. Das Problem ist nur: Wie jede Schriftart muss auch Awesomefont zunächst vom Browser geladen werden. Die Auswertung hierzu ist ernüchternd:

Auch hier werden 4 Ressourcen benötigt, Die Ladezeit beträgt in diesem Fall 1,1 Sekunden.

Es besteht die Möglichkeit die Ladezeiten für Awesomefonts zu optimieren (z.B. via SVG-Sprites). Das ist aber wiederum mit Arbeit und Wartungsaufwand verbunden. Wir empfehlen daher genau zu überlegen, ob man die Schriftart wirklich benötigt.

Eine viel bessere Alternative wäre ggf. die Verwendung von HTML Entities. Dabei handelt es sich um Symbole, die zum Standardzeichensatz von HTML gehören und somit auf dem Gerät des Besuchers schon verfügbar sind.

Als TYPO3 Redakteur haben Sie in der Regel keinen Einfluss auf die Wahl der Schriftart. Diese wird als globaler Wert in einer CSS-Datei definiert und ist im RichTextEditor im TYPO3 Backend nicht änderbar. Beauftragen Sie hierfür einen qualifizierten TYPO3 Dienstleister.


Fazit

Die Schriftart spielt für das Design und den Wiedererkennungswert einer Organisation oder einer Marke eine sehr große Rolle. Da die Auswahl sicherer Web-Schriftarten relativ klein ist, kann es ggf. sinnvoll sein, eine externe Schriftart einzubinden. Damit ist allerdings eine Erhöhung der Ladezeiten verbunden, was insbesondere für Besucher mit mobilen Endgeräten zu einer verschlechterten User Experience führt. Website-Betreiber sollten sich vor dem Hintergrund der für Mai 2021 angekündigten Änderung des Google Rankings, die Ladezeiten noch stärker in den Fokus zu rücken, genau überlegen, ob eine websichere Schriftart eine vertretbare Lösung für ihre Organisation ist.  

WICHTIG:

Wenn Sie sich für eine externe Schriftart entscheiden, achten Sie darauf, die Schriftart auf Ihrem Webserver bereit zu stellen. Andernfalls baut der Browser eine Verbindung zu einem Drittserver auf, um die Schriftart von dort zu laden. Dadurch hinterlassen Besucher ihre IP-Adresse bei dem Anbieter, was im Rahmen der DSGVO i.d.R. zustimmungspflichtig wäre.