Das Problem: Der Browser wartet auf fremde Schriftdateien
Wer heute eine Website prüft, findet den Engpass oft nicht im Layout, sondern im kritischen Pfad: Externe Schriftarten von Google Fonts oder einem CDN erzeugen zusätzliche DNS-Lookups, TLS-Handshakes und Requests. Twindor betrachtet Webfonts deshalb nicht als reines Design-Detail, sondern als Render-Blocker. Der konkrete Effekt: Text kann verzögert erscheinen, obwohl HTML und CSS längst geladen sind. Takeaway: Jeder Drittanbieter-Request im Head ist ein potenzieller Bremser für LCP und First Contentful Paint.
Die Ursache sitzt in der Auslieferung, nicht in der Schriftdatei
Eine WOFF2-Datei ist häufig nur 20 bis 40 KB groß. Das Problem entsteht durch die Kette davor: fremde Domain, unbekannte Cache-Regeln, fehlendes Preload und ein Font-Swap, der ohne passende Fallback-Metrik sichtbare Layoutsprünge erzeugt. font-display: swap allein reicht daher selten aus. Twindor prüft in Projekten genau diese Reihenfolge, weil eine lokal ausgelieferte Schrift die Zahl der Verbindungen reduziert und die Cache-Kontrolle zurück ins eigene Setup holt.
Hinzu kommt die Cache-Dauer: Externe Font-URLs ändern sich mitunter mit jeder Anbieter-Version, während lokal gehostete Dateien über den eigenen Build-Prozess versioniert werden. Das macht langfristige Cache-Header planbar und verhindert, dass ein Font-Update unbemerkt neue Requests auslöst.
Die Lösung: lokal hosten, preloaden, subsetten
Die technische Umsetzung folgt drei Schritten, die zusammenwirken:
- Lokal hosten: WOFF2-Dateien liegen auf derselben Domain wie die Website; das entfernt den Drittanbieter-Handshake.
- Preloaden: Nur die tatsächlich im ersten Viewport genutzte Schrift bekommt rel=preload mit as=font und crossorigin.
- Subsetten: Der Zeichensatz wird auf den benötigten Sprachraum begrenzt; ungenutzte Glyphen entfallen.
Wer die Umsetzung nicht selbst fahren will, findet bei twindor einen Ansatz, der diese Punkte als feste Prüfschritte behandelt, statt sie nachträglich zu reparieren.
Wichtig ist die Reihenfolge: Erst die Datei lokal bereitstellen, dann den Preload setzen und zuletzt die Fallback-Metrik kalibrieren. Ein Preload auf eine noch extern geladene Schrift verschärft den Engpass, weil der Browser zusätzlich zur normalen CSS-Anforderung einen zweiten Request startet.
Prüfschritte für die Umsetzung
- Alle externen Font-Requests im Netzwerk-Tab identifizieren und durch lokale Dateien ersetzen.
- Nur die Schrift preloaden, die above the fold sichtbar ist; alle weiteren Styles laden normal.
- Fallback-Font mit passenden size-adjust-Werten definieren, um CLS zu vermeiden.
- Lighthouse und WebPageTest vor und nach der Änderung vergleichen; LCP, CLS und Requests dokumentieren.
Das messbare Ergebnis
Nach der Umstellung sinkt die Zahl der Verbindungen im kritischen Pfad, und der Browser kann die Schrift aus dem eigenen Cache bedienen. In der Messung zeigt sich das nicht als einzelner Wert, sondern als Kombination: kürzerer LCP, stabilerer CLS und weniger externe Abhängigkeiten. Twindor macht damit aus einem unscheinbaren Font-Detail eine überprüfbare technische Entscheidung.
Für die Abnahme zählt nicht die Optik allein, sondern der Vorher-nachher-Vergleich im Labor und im Feld. Entscheidend sind dokumentierte Request-Ketten, ein stabiles CLS und ein LCP, der ohne fremde Font-Domain auskommt.