Font Loading Optimierung ohne Layout-Shift

Ein Webfont verursacht Layout-Shift, wenn er nach dem ersten Aufbau der Seite eintrifft und die Ersatzschrift ersetzt. Das Layout springt, weil beide Schriften unterschiedlich breit laufen. Drei Maßnahmen verhindern das zuverlässig: eine Schriftart mit passenden Ersatzmetriken, die frühzeitige Ladepriorisierung der benötigten Datei und der Verzicht auf unnötige Schnitte.

##Was macht font-display?

Der Wert steuert, was passiert, während die Schrift noch lädt. Mit swap wird sofort die Ersatzschrift gezeigt und später getauscht – gut lesbar, aber mit Layout-Shift. Mit optional darf der Browser die Schrift beim ersten Aufruf verwerfen und beim zweiten aus dem Cache nutzen, wodurch der Shift ganz entfällt. Für Fließtext ist optional oft die bessere Wahl, für Überschriften swap.

##Warum verursachen variable Fonts weniger Probleme?

Weil eine Datei alle Schnitte abdeckt. Statt vier einzelner Dateien für normal, fett, kursiv und fett-kursiv laden Sie eine variable Datei, die die Achsen Zwischenstufen erlaubt. Das reduziert die Zahl der Anfragen von vier auf eine und verkleinert die Gesamtmenge – in einem Projekt von 340 auf 118 Kilobyte, bei identischem Schriftbild.

##Wie lädt man die Schrift richtig vor?

Mit einem preload-Verweis auf genau die Datei, die der erste Bildschirm braucht, plus dem passenden type-Attribut. Wichtig ist die Beschränkung auf eine Datei: Jeder weitere Preload verdrängt andere Ressourcen aus der knappen Prioritätsstufe. Wer vier Schriften vorlädt, lädt am Ende keine davon früher.

##Was bringt Subsetting?

Es entfernt Zeichen, die Ihre Seite nicht verwendet. Eine Schrift mit vollständiger lateinischer Abdeckung enthält Ziffern, Sonderzeichen und Akzente, die in einem deutschen Shop selten vorkommen. Ein auf die tatsächlich genutzten Zeichen reduzierter Satz war in einem Fall 41 Kilobyte kleiner als das Original – ohne sichtbaren Unterschied.

##Wie verhindert man den Sprung zwischen Ersatz- und Zielschrift?

Indem die Ersatzschrift so eingestellt wird, dass ihre Buchstabenbreiten und Zeilenhöhen zur Zielschrift passen. Dafür gibt es eine Regel, mit der sich Aufstieg, Abstieg und Größenanpassung der Ersatzschrift setzen lassen. Ist das erledigt, fällt der Tausch kaum auf – die Zeilenlänge bleibt stabil und der Layout-Shift-Wert sinkt.

##Welche Fehler kosten am meisten Zeit?

Drei kehren regelmäßig wieder: Schriften werden über ein fremdes Adresssystem geladen, wodurch zwei Verbindungen nötig sind statt einer. Alle Schnitte werden geladen, obwohl nur zwei verwendet werden. Und die Schrift fehlt im Preload, während ein nachrangiges Skript vorgeladen wird. Jeder dieser Punkte lässt sich in wenigen Minuten prüfen.

##Welche Dateiformate sollte man ausliefern?

Zwei Formate genügen: ein modernes komprimiertes Format und eine Rückfalllinie für alte Browser. Die gängigen Formate sind deutlich kleiner als das ältere TrueType-Format, das viele Projekte noch verwenden. Wer beide ausliefert, verdoppelt die Zahl der Dateien, nicht die übertragene Menge – geladen wird immer nur eine, weil der Browser die erste unterstützte Quelle wählt.

##Wie prüft man, ob die Schrift rechtzeitig ankommt?

Im Netzmitschnitt, nicht im Gefühl. Entscheidend ist der Zeitpunkt, zu dem die Schriftdatei fertig geladen ist, verglichen mit dem Zeitpunkt, an dem der Text sichtbar wird. Liegt die Schrift danach, greift die Ersatzschrift und das Layout arbeitet gegen Sie. Zusätzlich lohnt ein Blick darauf, ob die Schrift überhaupt geladen wird – eine falsch geschriebene Adresse fällt still auf die Systemschrift zurück.

##Was ist mit Schriftsymbolen?

Symbolschriften folgen denselben Regeln, sind aber oft die größten Dateien im Projekt. Wer ein vollständiges Symbolpaket einbindet, um fünf Zeichen zu zeigen, lädt mehrere hundert Kilobyte für nichts. Besser ist eine Auswahl der tatsächlich verwendeten Zeichen oder ein Austausch gegen einzelne Zeichenketten, die ohne Zusatzdatei auskommen.

##Stabile Typografie ist eine Entscheidung

Schriften sind selten der größte Posten im Ladezeitbudget, aber eine der sichtbarsten Störungen. Ein Layout, das beim Laden springt, wirkt unfertig – unabhängig davon, wie schnell die Seite sonst ist. Prüfen Sie die Schriftdateien einmal auf Anzahl, Format und Preload, und lassen Sie die Konfiguration danach unverändert.