Font-Performance-Verbesserung mit Subsetting und Local Storage
Kommentare

Es gibt unzählige verschiedene Schriftarten, die man in seiner Website nutzen kann, wenn man nicht auf die typischen Standardschriftarten zurückgreifen will. So praktisch Web Fonts zwar erscheinen mögen, bieten sie allerdings auch einiges Fehlerpotenzial bei der Benutzung, das sich vor allem negativ auf die Performance auswirken kann.

Um solche Performance-Bremsen zu vermeiden, gibt es verschiedene Techniken – etwa Subsetting und das Speichern im Local Storage. Luis Vieira hat sie in einem kurzen Tutorial zur Verbesserung der Font-Performance vorgestellt.

Subsetting reduziert Font-Dateigröße

Um zu vermeiden, dass Web Fonts die Performance einer Website ausbremsen, bietet es sich an, die Dateigröße der genutzten Schriftarten zu reduzieren, mit base64 zu kodieren und dann im Local Storage zu speichern. Während die Fonts heruntergeladen werden, wird eine System-Schriftart als Fallback-Lösung angezeigt, sodass der User direkt auf den Content zugreifen kann. Da die gewählten Fonts dauerhaft gecached werden, bleiben sie auf dem Gerät des Nutzers – und das sogar über mehrere Sessions und den Geräte-Neustart hinweg.

Die als Subsetting bezeichnete Technik entfernt ungenutzte und unbenötigte Schriftzeichen aus den Font-Dateien, wodurch die Dateigröße um bis zu 50 Prozent reduziert werden kann. Mithilfe von Tools wie Font Squirrel’s Web Font Generator kann man diesen Vorgang besonders leicht durchführen und anschließend die Schriftarten mit base64 in eine einzige Datei zusammenfassen.

Asynchron geladene Fallback-Lösung mit Local Storage

User warten nicht gerne, bis eine Seite fertig geladen ist, sondern wollen direkten Zugriff auf den Content. Um zu vermeiden, dass User zu lange auf den Download der Font-Dateien warten müssen, ist eine asynchron geladene Fallback-Lösung nötig. Dabei wird dem User der Text direkt in einer System-Schriftart angezeigt und erst dann zur eigentlichen Schriftart geändert, wenn die Font-Datei vollständig heruntergeladen wurde. Der Nutzer erfährt so eine bessere User Experience, weil die Seitenperformance flüssiger wirkt.

Eine solche Fallback-Lösung lässt sich mithilfe von Local Storage einrichten, wobei der Fallback-Font-Style dem tatsächlichen Font-Style so ähnlich wie möglich sein sollte, sodass der Übergang möglichst unauffällig ist. Wie man für das Einrichten der Fallback-Lösung vorgehen sollte, erklärt Luis Vieira ausführlicher mit Code-Beispielen in seinem Tutorial. Dort findet sich auch eine Demo, die das Ergebnis in Aktion zeigt.

Aufmacherbild: Old wooden printing type, font characters von Shutterstock / Urheberrecht: simonekesh

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -