Lässt sich die Ladezeit meiner Website verbessern?

Elementor: Google Schriftarten lokal einbinden

Zuletzt aktualisiert am 7. August 2020

Inhaltsverzeichnis

Einleitung

Schriftarten sind ein großer Bestandteil der Gestaltung einer Website und können maßgeblich zum Branding deiner Marke beitragen. Wir alle kennen bekannte Schriftarten die wir mit Unternehmen verbinden, sei es avant garde (Adidas), Futura (Nike), Bebas Neue (Netflix), Alternate Gothic (YouTube), Gotham (Spotify), Klavika (Klarna), Futura BQ (Red Bull), etc.

All diese Schriftarten haben eines gemein – sie stehen für eine Brand und haben einen Wiedererkennungswert. Daher solltest du dir im Vorfeld immer Gedanken machen, welche Schriftart du einsetzen möchtest um ein erfolgreiches Branding zu kreieren. Dies führt uns direkt zum ersten Optimierungsansatz.

Weniger ist mehr

Schaue dir oben genannte Unternehmenswebsites genauer an und du wirst feststellen, dass in 95% aller Fälle nicht mehr als zwei unterschiedliche Schriftarten genutzt werden. Dies spielt natürlich an erster Stelle für das Branding eine Rolle, doch auch aus der Performance Sicht macht der Einsatz weniger Fonts durchaus Sinn.

Umso mehr Schriftarten du nutzt, desto länger braucht auch der Ladevorgang deiner Website – ganz gleich ob du die Schriftarten über die Google Server oder Lokal ausgibst. Wenn du also Google Fonts nutzen möchtest solltest du auf zwei Dinge achten:

  • Nutze nicht zu viele unterschiedliche Fonts
  • Nutze nicht zu viele Varianten einzelner Fonts

Eine Faustregel besagt, maximal drei unterschiedliche Schriftarten mit drei unterschiedlichen Varianten (Schriftstärke, Kursiv, etc) zu nutzen.

Aus der Sicht der Ladezeiten Optimierung würde ich dir sogar empfehlen, dich auf max. zwei Schriftarten festzulegen und auch nicht mehr als zwei Varianten pro Schriftart zu nutzen.

Auf dieser Website habe ich mich bewusst für nur eine Schriftart (Roboto) in zwei verschiedenen Varianten (Schriftstärke 400 & 700) entschieden.

Google Fonts vs. System Fonts

System Fonts: Ladezeiten und Waterfall Chart
Google Fonts via Google Server: Ladezeiten und Waterfall Chart
Google Fonts lokal gespeichert: Ladezeiten und Waterfall Chart

Fonts unmittelbar anzeigen

Wir haben nun unsere gewünschten Google Schriftarten in Elementor implementiert doch während die Hälfte der Website schon zu sehen ist, ist der Browser im Hintergrund noch ordentlich beschäftigt, unter anderem damit diese Schriften zu laden. Solange eine Schriftart nicht komplett heruntergeladen ist, versteckt der Browser sie. Nach dem vollständigen Laden wird die Webschrift ausgegeben – was auch „Flash Of Invisible Text“ Effekt (kurz: FOIT) genannt wird.

Der Nachteil: Bei einer langsamen Internetverbindung kann es passieren, dass der Benutzer keine Schrift sieht. Standardmäßig wird bei einer Ladezeit, die länger als drei Sekunden ist, eine Fallback-Schrift ausgegeben. Bei Browsern wie Safari müssen Benutzer noch länger warten.

Wir haben nun die Möglichkeit, den Schriftarten ein Attribut zuzuweisen damit der Browser beim Laden der Website weiß, wie er vorgehen soll. Dafür gibt es vier unterschiedliche Werte:

font-display: auto;

Das ist der Default-Wert. Und macht nichts anderes als eine Standardfunktion. Der Text wird erst angezeigt, wenn die Schrift vollständig geladen ist.

font-display: swap;

Dieser Wert wird in den meisten Fällen verwendet und kommt einer Javascript-basierten Lösung am nächsten. Er sorgt dafür, dass der Text unmittelbar mit der gewünschten Font angezeigt wird.

font-display: fallback;

Ist der Spagat zwischen den ersten beiden Werten. Bei einer Verzögerung von 100 Millisekunden wird die Schrift nicht angezeigt, sondern auf die nächste Webschrift in der Erbfolge zurückgegriffen. Sollte zu dem Zeitpunkt die gewünschte Webschrift geladen sein, wird diese auch ausgegeben.

font-display: optional;

Die Funktion ist dieselbe wie bei Fallback, außer das der Browser bei einer zu langsamen Internetverbindung sich dazu entscheidet, die Schrift gar nicht zu laden.

Weitere Beiträge zum Thema