Schriften sind nach den Bildern der zweitgrößte Ladeposten einer typischen Website und die häufigste Ursache für Layoutsprünge beim Laden. Beides lässt sich mit wenigen Maßnahmen beheben.
Die sechs Maßnahmen
1. Lokal ausliefern
Schriften von einem fremden Server erfordern einen zusätzlichen Verbindungsaufbau, was mehrere hundert Millisekunden kosten kann, und übertragen die IP-Adresse des Besuchers an einen Dritten. Beides entfällt bei lokaler Auslieferung.
Der Ablauf steht in Google Fonts lokal. Der Nebeneffekt ist erheblich: In vielen Fällen entfällt damit der Einwilligungsbanner.
2. Nur WOFF2
WOFF2 ist von allen aktuellen Browsern unterstützt und deutlich kleiner als die älteren Formate. Ältere Formate als Rückfallebene mitzuliefern ist heute unnötiger Ballast.
3. Schnitte begrenzen
Jeder Schnitt ist eine eigene Datei mit 15 bis 40 Kilobyte. Der Bedarf ist meist kleiner als angenommen:
- Regular für Fließtext
- Semibold oder Bold für Hervorhebungen und Überschriften
- Italic, wenn tatsächlich verwendet
- Ein Schnitt für die Überschriftenfamilie
Vier Dateien statt zwölf. Prüfen lässt sich der tatsächliche Bedarf in den Netzwerkangaben der Entwicklerwerkzeuge: Welche Dateien werden geladen, und welche Schnitte kommen im Layout vor?
Keine künstlichen Schnitte erzeugen. Wenn ein Browser einen fehlenden Fettschnitt selbst berechnet, sieht das schlechter aus als eine echte Datei. Wer Fettschrift verwendet, lädt den Schnitt.
4. Zeichensatz begrenzen
Vollständige Schriftdateien enthalten oft mehrere Sprachbereiche. Für deutschsprachige Seiten genügt der lateinische Bereich einschließlich der Umlaute. Das reduziert die Dateigröße erheblich.
Wer die Dateien selbst erzeugt, kann den Zeichenumfang gezielt zuschneiden. Für Schriften, die nur in Überschriften vorkommen, ist ein enger Zeichensatz besonders wirksam.
5. Anzeigeverhalten setzen
Ohne Angabe wartet der Browser eine Zeit lang, bevor er Text darstellt. In dieser Zeit ist die Seite leer, obwohl der Text vorliegt.
Die Einstellung font-display: swap sorgt dafür, dass Text sofort mit einer Ersatzschrift erscheint und beim Laden der Webfont ausgetauscht wird. Text ist damit von Anfang an lesbar. Der Preis ist ein sichtbarer Wechsel, der über Punkt 6 minimiert wird.
Die Alternative font-display: optional verzichtet ganz auf den Austausch, wenn die Schrift nicht schnell genug da ist. Das vermeidet Sprünge vollständig, bedeutet aber, dass manche Besucher die Marke-Schrift nie sehen.
6. Ersatzschrift abstimmen
Der Punkt, der am meisten bringt und am seltensten gemacht wird. Haben Webfont und Ersatzschrift unterschiedliche Maße, verschieben sich Textblöcke beim Austausch. Das verschlechtert den CLS-Wert. Siehe Core Web Vitals.
Zwei Wege:
- Eine Systemschrift mit ähnlichen Maßen als Ersatz wählen und in der Schriftliste nach der Webfont angeben.
- Die Ersatzschrift anpassen, über Angaben zu Größenanpassung und Zeilenmetrik in einer eigenen Deklaration. Damit lässt sich der Sprung praktisch auf null bringen.
Vorladen: einmal, nicht fünfmal
Ein Vorlade-Hinweis für die Schriftdatei, die im ersten Bildschirm gebraucht wird, verkürzt die Zeit bis zur richtigen Darstellung. Das ist in der Regel der Schnitt der Überschriftenfamilie und der Regular-Schnitt des Fließtexts.
Alle Schriften vorzuladen ist kontraproduktiv: Es belegt Bandbreite für Dateien, die noch nicht gebraucht werden, und verzögert damit das Hero-Bild, das den LCP-Wert bestimmt.
Variable Schriften
Eine variable Schriftdatei deckt einen ganzen Bereich an Stärken ab. Sinnvoll, wenn viele Schnitte gebraucht werden: Eine Datei ersetzt dann vier oder fünf.
Bei nur zwei benötigten Schnitten ist eine variable Datei häufig größer als zwei statische, weil sie den gesamten Bereich mitbringt. Es kommt also auf den Bedarf an, nicht auf die Technik.
Systemschriften als Option
Der radikalste Weg: keine Webfont laden, sondern die Schrift des Betriebssystems verwenden. Kosten: null Bytes, kein Sprung, kein Datenschutzthema.
Der Nachteil ist, dass die Seite auf verschiedenen Systemen unterschiedlich aussieht. Für Projekte, bei denen Geschwindigkeit vor Markenauftritt geht, etwa Dokumentation oder interne Werkzeuge, ist das die beste Wahl. Für ein Portal mit eigenem Erscheinungsbild in der Regel nicht.
Prüfliste
- Keine Anfrage an einen fremden Schrifthost in den Netzwerkangaben
- Nur WOFF2-Dateien
- Maximal vier bis fünf Dateien
- Zeichensatz auf den benötigten Bereich begrenzt
font-displaygesetzt- Ersatzschrift in den Maßen abgestimmt, CLS-Wert geprüft
- Genau ein bis zwei Vorlade-Hinweise
- Nach einem Theme-Update erneut geprüft, weil Updates fremde Verweise wieder einfügen können