Webfonts optimieren: Schriften schneller laden

Schriften optimieren, Webfonts schneller laden
Wie sichtbar ist Ihr Unternehmen im Internet? Website-Check!
Wer Webfonts nutzt, wird feststellen, dass sie die Ladezeit der Webseiten verlängern können. Mit diesen Tricks holen Sie das Maximum raus.

Warum überhaupt Gedanken über die Ladezeit machen? Das liegt daran, dass eine zu lange Ladezeit dafür sorgt, dass Menschen noch während des Ladens Ihrer Website abspringen und zurück zur Suchergebnisliste gehen. Google wertet dies als sehr negatives Nutzer-Signal. Wenn es häufiger vorkommt, wird Ihre Website abgewertet und in der Suchergebnisliste weit unten angezeigt.

Wie wichtig ist das Optimieren von Webfonts?

Je nachdem, wie gut Ihre Webseiten schon optimiert sind, werden Sie bei den Webschriften nicht mehr viel rausholen. Aber 0,2 Sekunden dürften schon mindestens drin sein. Manchmal auch deutlich mehr.

Webfonts optimieren: vom eigenen Server laden

Nicht nur für die Optimierung wichtig, sondern auch damit Ihre Webseiten die Vorgaben der DSGVO einhalten: Laden Sie Ihre Webfonts nicht über die Server von Google, sondern von Ihrem eigenen Server. Die dazu nötigen Schritte habe ich hier beschrieben: Google Webfonts DSGVO-kompatibel einbinden.

Vor der Optimierung: den Status prüfen

Es gibt verschiedene Tools, die Ihnen die Geschwindigkeit Ihrer Webseiten anzeigen und Optimierungsempfehlungen geben. Persönlich bevorzuge ich GTmetrix wegen seiner Übersichtlichkeit.

URL eingeben, auf Test your site klicken und kurz warten. Im Ergebnisfenster sehen Sie oben die wichtigsten Kennwerte. Wenn Sie hier noch viel Rot oder Orange sehen, ist dieser Artikel noch nichts für Sie. Dann haben Sie zunächst sehr viel wichtigere Baustellen abzuarbeiten. Ein guter Einstieg ist dann dieser Artikel: Wie Sie mit einer schnelleren Website Kunden gewinnen.

Klicken Sie für genauere Informationen zu den verwendeten Webfonts auf den Reiter Waterfall.

Es wird nun ein Wasserfall-Diagramm angezeigt, in dem jedes Element Ihrer Webseite aufgeführt ist, das bei einem Aufruf geladen wird. Hier finden sich auch die verschiedenen Schriften. Das sieht dann beispielsweise so aus:

Interessant ist zunächst die dünne rote Linie. Sie steht für den Onload-Wert, das ist der Zeitpunkt, an dem alle Inhalte auf dem Bildschirm angezeigt werden. Was ab dann noch geladen wird, bekommt der Besucher meist nicht mit, das stört ihn dann auch nicht.

Nach 1,39 Sekunden wird die Beispielseite also komplett angezeigt. In Zeile 8 bis 13 werden die verwendeten Schriften aufgeführt, Catamaran und Roboto Condensed in verschiedenen Schnitten. Die Schriften werden zwar weitgehend parallel geladen, dennoch macht sich ihre Ladezeit bemerkbar.

Der wichtigste Optimierungsschritt: Zahl der Schriften und Schriftschnitte begrenzen

Laden Sie nur die Schriften und die Schriftschnitte (damit sind Normal, Fett, Kursiv, Extrafett, Bold und ähnliches gemeint), die Sie auf Ihrer Website auch wirklich benötigen.

Wenn Sie sich hier beschränken, hat das die größte Auswirkung auf die Ladezeiten Ihrer Website.

Laden Sie nur, was die Site auch benötigt

Um jetzt noch ein wenig weiter abzuspecken, lässt man aus den Schriften alles weg, was man auf seiner Site nicht benötigt. Dazu geht es zum Webfont-Generator auf der Website FontSquirrel. Zunächst laden Sie über Upload Fonts den Inhalt Ihres kompletten Font-Ordners hoch.

Anschließend werden die Schriften angezeigt, die jetzt bearbeitet werden:

Um alle Optionen zu sehen, wechseln wir in den Experten-Modus und ins Custom Subsetting. Als Sprache wähle ich Deutsch aus. Damit wird sichergestellt, dass alle speziellen Zeichen aus anderen Sprachen nicht mitgeladen werden:

Da ich auch die ganzen Sonderzeichen in den Schriften nicht haben will, sorge ich dafür, dass nur Zeichen mitgenommen werden, die ich auch auf meinen Websites verwende. Das sind:

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZöüäÖÜÄ1234567890“"´'‘'`,.;-_:*+=%/&!?()|{}[]#@߀§$

Anschließend kann man sein optimiertes Schriftenset herunterladen. Diese Schriften ersetzen dann die bisherigen Schriften im Fonts-Ordner.

Und was hat die Optimierung gebracht?

Nach der Optimierung der Schriften haben wir zunächst bei der Gesamt-Ladezeit eine 1 vor dem Komma:

Die Onload-Zeit ist auf 1,3 Sekunden gesunken, ein Gewinn von knapp 0,1 Sekunden. Hat in diesem Fall also nicht so viel gebracht, das kann bei Ihnen aber schon wieder ganz anders aussehen.

Jetzt zur Optimierung von Font Awesome

Font Awesome ist ein Zeichensatz, der auf ganz vielen Websites verwendet wird. Er stellt hunderte von Icons zur Verfügung, von denen aber oft nur 2 oder 3 genutzt werden. Da liegt es doch nahe, auch nur diese in seinen Font aufzunehmen.

Zum Vergleich schauen wir uns erst mal die Werte einer Website an, die Font Awesome verwendet:

Die Onload-Zeit ist 1,62 Sekunden. In der viertletzten Zeile sehen wir den Beitrag von Font Awesome daran.

So wird Font Awesome optimiert

Wir gehen auf die Website IcoMoon App. Nach unten scrollen und auf Add Icons From Library… klicken. Hier finden Sie unter anderem Font Awesome, ein Klick auf das +-Zeichen holt den Font in die Auswahl.

In der Icon-Übersicht wählt man sich durch Draufklicken die Symbole aus, die man auf seiner Website benötigt. Unten am Fenster zählt dabei die Selection die ausgewählten Icons mit. Wenn Sie alle haben, unten rechts auf Generate Font klicken und dann auf Download. Die neuen Fonts werden als icomoon.zip heruntergeladen.

Diese Zip-Datei öffnen. Der Inhalt des Ordners Fonts mit Ihrer neuen Schrift IcoMoon gehört auf Ihre Website in den Schriftenordner. In style.css finden Sie den Code, den Sie zum Einbinden des Fonts benötigen.

Und das hat die Optimierung von Font Awesome gebracht

Die Fully-Loaded-Time hat sich um 0,1 Sekunde verbessert. Onload um 0,07 Sekunden.

Nicht allzu viel, aber auch nicht zu ignorieren. Ladezeiten sind immens wichtig für gute Positionen bei Google und diese Font-Optimierungen führt man ein einziges Mal beim Erstellen oder Optimieren einer Website durch.

Wer schreibt hier?

Online-Marketingberater Michael BondzioMein Name ist Michael Bondzio, ich bin Konzeptioner, Texter und Marketingberater. Aus meiner über 20jährigen Tätigkeit für nationale sowie internationale Marken und Unternehmen aller Größenklassen habe ich jede Menge Erfahrungen, die ich in diesem Blog teile.

Den ersten professionellen Kontakt mit dem Internet hatte ich 1996 als Kreativdirektor, heute berate ich Selbständige sowie Management und Unternehmensleitung kleiner und mittelständischer Unternehmen zur automatisierten Neukundengewinnung über das Internet.

Wenn Sie Fragen haben oder Unterstützung brauchen: Rufen Sie mich an – +49 40 22 86 75 40 – oder schicken Sie eine E-Mail. Die Erstberatung ist kostenlos.

Google Fonts einbinden: Sie brauchen Hilfe?

Gerne optimiere ich auch Ihre Website inklusive Einbindung der Google Fonts. Schicken Sie mir einfach eine kurze Mail oder rufen Sie mich an: +49 40 22 86 75 40.

Neue Blogbeiträge? Ich schicke Ihnen eine Mail: