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 Light, Normal, Fett, Kursiv, Extrafett, Bold und ähnliches gemeint), die Sie auf Ihrer Website auch wirklich verwenden.
Gutes Webdesign kommt mit ein oder zwei Schriftfamilien aus und wenigen Schriftschnitten.
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, lassen wir aus den Schriften alles weg, was wir auf unserer Site nicht benötigen. Dazu geht es zum Webfont-Generator auf der Website FontSquirrel. Zunächst laden Sie über Upload Fonts die von Ihnen genutzte Schrift als .ttf-Datei hoch.
(.ttf-Dateien werden heute fürs Web eigentlich nicht mehr benötigt. Falls Sie nur über .woff oder .woff2 verfügen, laden Sie sich bitte zunächst die .ttf-Dateien zu Ihrem Font auf der Website Google Webfonts Helper.)
Anschließend werden die Schriften angezeigt, die jetzt bearbeitet werden:
Um alle Optionen zu sehen, wechseln wir durch Klick auf „Expert“in den Experten-Modus:
Bei den Font Formats reichen für moderne Browser WOFF und WOFF2. Wenn Sie unbedingt auch mit Uralt-Browsern kompatibel sein wollen, wählen Sie noch TrueType, EOT und SVG aus. Ich mache das nicht, diese Browser zeigen dann einfach die Fallback-Schrift an.
Wichtig ist, keine Änderungen und Optimierungen an der Schrift durchzuführen. Also Häkchen wie auf dem Screenshot setzen. Wir nutzen hier als Ausgangsmaterial bereits eine optimierte Webschrift. Weitere Optimierungen durch FontSquirrel führen gern mal dazu, dass die Schriftdateien hinterher größer statt kleiner sind.
Unter dem Punkt „Subsetting“ wird „Custom Subsetting“ ausgewählt, um weitere Einstellungsoptionen anzuzeigen.
Als Sprache wähle ich Deutsch aus. Damit wird sichergestellt, dass alle speziellen Zeichen aus anderen Sprachen nicht mitgeladen werden. Wenn Sie weitere Sprachen auf Ihrer Website benötigen, dann diese zusätzlich auswählen.
Da ich keine für mich unnötigen Sonderzeichen in den Schriften haben will, sorge ich beim Punkt „Single Characters“ dafür, dass nur Zeichen mitgenommen werden, die ich auf meinen Websites verwende. Das sind in meinem Fall:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZöüäÖÜÄ1234567890“"´'‘'`^°,.;-_:*+=%/&!?()|{}[]#@߀§$
Bei den Advanced Options löschen Sie bitte den Text im Feld „Font Name Suffix“, sonst passen die neuen Font-Namen nicht zu Ihrem vorhandenen Stylesheet.
Anschließend können Sie ihr optimiertes Schriftenset herunterladen. Aus diesem benötigen Sie nur die enthaltenen .woff- und .woff2-Dateien, mit denen Sie die bisherigen Schriften im Fonts-Ordner Ihrer Website ersetzen.
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 haben einen Einfluss auf gute Positionen bei Google und diese Font-Optimierungen führt man ein einziges Mal beim Erstellen oder Optimieren einer Website durch.
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.
Über den Autor
Mein Name ist Michael Bondzio, ich bin Konzeptioner, Texter und Marketingberater. In meiner über 25jährigen Tätigkeit für nationale sowie internationale Marken und Unternehmen aller Größen konnte ich jede Menge Erfahrungen sammeln, die ich in diesem Blog und auf meinem LinkedIn-Profil teile.
Seit 2004 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.
