Schriftartauswahl und CLS

…im Kontext von Core Web Vitals

Das Laden einer benutzerdefinierten Schriftart (eine Schriftart, die nicht standardmäßig allen Browsern bekannt ist) kann leicht zu einigen Verzögerungen in der Ladesequenz und einem CLS-Problem (Cumulative Layout Shift) führen. Dies gilt für den ersten Seitenladevorgang auf Ihrer Site, bis die Schriftart vom Browser zwischengespeichert wird.

Sie können versuchen, die benutzerdefinierte Schriftart vorab zu laden und/oder zu pushen, aber es gibt immer einen Zeitpunkt, an dem der Browser den Textkörper mit einer Standardschriftart rendert. Dies gilt insbesondere für langsame Geräte oder eine langsame Verbindung. Sie können den gesamten Textkörper ausblenden, bis die Schriftart geladen ist, aber dann werden die FCP (First Contentful Paint) und LCP (Largest Contentful Paint) stark benachteiligt.

Sie können auch CSS-Tricks wie font-display: optional verwenden, aber die Schriftart wird bei einer langsamen Verbindung möglicherweise überhaupt nicht geladen: Der Browser hat die Anweisung, sie nach einer bestimmten (kurzen) Verzögerung zu ignorieren.

Diese letzte Lösung verhindert nicht, dass der CLS-Score beeinträchtigt wird: Beim Austauschen der Schriftart kann sich die Größe des Inhalts ändern und das Layout kann sich „verschieben“.

Es gibt einen weiteren Mechanismus, der verwendet werden kann, um diese beiden Probleme zu verhindern (Verzögerung beim Laden der Schriftarten und CLS): Verwenden Sie ein Fallback der Schriftarten.

Die Idee der Schriftartauswahl besteht darin, eine Browser-Standardschriftart so zu skalieren, dass der Inhalt bei Anwendung auf den Inhalt einer Seite denselben „Platz“ bei der Schriftartauswahl und bei der benutzerdefinierten Schriftart einnimmt. Auf diese Weise können Sie ohne Layout-Verschiebung eines mit dem anderen austauschen. Wenn Sie eine Standardschriftart verwenden, die der benutzerdefinierten Schriftart „ähnlich“ ist, sehen diese wenigen Millisekunden beim ersten Laden der Seite wirklich ähnlich wie das Erlebnis aus, das Sie mit der benutzerdefinierten Schriftart bereitstellen möchten. Sie können dann das Laden der benutzerdefinierten Schriftarten aufschieben oder sie in der Ladesequenz zumindest nicht blockieren lassen.

Die Schriftartausfallerweiterung

Wir haben eine Chrome-Erweiterung erstellt, um das Fallback der Schriftarten zu berechnen.

Wenn Sie die Erweiterung auf einer Seite öffnen, werden die auf dieser Seite verwendeten Schriftarten analysiert: Eine Schriftart ist eine Kombination aus Schriftfamilie und Schriftstärke. Jetzt können Sie für jede dieser Schriftarten eine Standard-Browser-Schriftart auswählen und die Berechnung der Schriftartenfallback ausführen. Für jede Schriftart berechnet die Erweiterung, welche size-adjustment der Standard-Browser-Schriftart erforderlich ist, damit der Inhalt bei beiden Schriftarten dieselbe Breite hat.
Die Berechnung erfolgt nur auf der Breite, da die Höhe durch die line-height gesteuert werden soll: Sie sollten eine line-height auf Ihrer Site festlegen, damit die Schriftart nicht entscheidet, wie die Höhe des Textes ist. Dies gilt für Absätze, Überschriften, Listen usw.

Hinweis: Bei Schriftarten-Kits besteht die Tendenz, viele Schriftarten zu laden, die nie verwendet werden (oder an einem anderen Ort auf der Website als auf der aktuellen Seite verwendet werden). Die Erweiterung zeigt auch an, wie viele insgesamt geladen werden. Es ist auch ein guter Indikator, wenn eine gewisse Optimierung durchgeführt werden kann: Optimieren Sie das Schriftartenkit, indem Sie die Schriftarten reduzieren, die es liefert, können Sie eine Menge Byte sparen, um zu übertragen!

Sobald die Berechnung abgeschlossen ist, können Sie das berechnete CSS kopieren und in Ihr Haupt-CSS einfügen.

Die generierten Schriftfamilien müssen nach der benutzerdefinierten Schriftart in Ihrem CSS-font-family hinzugefügt werden: Der Browser findet die benutzerdefinierte Schriftart zunächst nicht, verwendet die Ausweichlösung, bis später die benutzerdefinierte Schriftart geladen wird. Da sie denselben Speicherplatz verwenden, erzeugt der Swap keine CLS!

Um den Schriftartanpassungswert zu optimieren, können Sie auch das Simulationsbedienfeld verwenden.

Wenn Sie das Kontrollkästchen aktivieren, wird die benutzerdefinierte Schriftart durch die berechnete Ersatzschriftart direkt auf der Seite ersetzt. Mit der Texteingabe können Sie den size-adjust ändern und das Ergebnis sofort visualisieren (Sie müssen das Kontrollkästchen jedes Mal umschalten, wenn Sie den Wert ändern).

Edge-Fälle

Die Erweiterung führt eine Berechnung auf der Grundlage einer vorhandenen Site mit vorhandenen Inhalten und CSS-Regeln durch. In einem anderen Kontext passt die size-adjust möglicherweise nicht perfekt, und der Schriftartwechsel kann immer noch CLS erzeugen:

Weitere technische Details und andere Tools finden Sie direkt im Erweiterungs-Repository: https://github.com/adobe/helix-font-fallback-extension