Verhindern von Layoutverschiebungen und Einblenden von unsichtbarem Text (FOIT) durch Vorabladen optionaler Schriftarten

Ab Chrome 83 können `link rel="preload"` und `font-display: optional` kombiniert werden, um Layout-Verzögerungen vollständig zu vermeiden

Houssein Djirdeh

Durch die Optimierung der Renderingzyklen werden in Chrome 83 Layoutverschiebungen beim Vorabladen optionaler Schriftarten vermieden. Die Kombination von <link rel="preload"> mit font-display: optional ist die effektivste Methode, um Layout-Jank beim Rendern benutzerdefinierter Schriftarten zu vermeiden.

Browserkompatibilität

Aktuelle Informationen zur browserübergreifenden Unterstützung finden Sie in den Daten von MDN:

Schriftartenrendering

Layoutverschiebungen oder Layoutänderungen treten auf, wenn sich eine Ressource auf einer Webseite dynamisch ändert, was zu einer Verschiebung von Inhalten führt. Das Abrufen und Rendern von Webschriftarten kann auf zwei Arten direkt zu Layoutverschiebungen führen:

  • Eine Fallback-Schriftart wird durch eine neue Schriftart ersetzt (Flash of Unstyled Text, FOUT).
  • „Unsichtbarer“ Text wird angezeigt, bis eine neue Schriftart auf der Seite gerendert wird (Flash of Invisible Text, FOIT).

Mit der CSS-font-display-Eigenschaft lässt sich das Renderingverhalten benutzerdefinierter Schriftarten über eine Reihe verschiedener unterstützter Werte (auto, block, swap, fallback und optional) ändern. Die Wahl des Werts hängt vom bevorzugten Verhalten für asynchron geladene Schriftarten ab. Bisher konnte jedoch jeder dieser unterstützten Werte auf eine der beiden oben genannten Arten zu einer Layoutänderung führen.

Optionale Schriftarten

Die Eigenschaft font-display verwendet eine Zeitachse mit drei Zeiträumen, um Schriftarten zu verarbeiten, die heruntergeladen werden müssen, bevor sie gerendert werden können:

  • Block:Rendert „unsichtbaren“ Text, wechselt aber zur Webschriftart, sobald sie geladen wurde.
  • Swap:Rendert Text mit einer Fallback-Systemschriftart, wechselt aber zur Webschriftart, sobald sie geladen wurde.
  • Fail:Rendert Text mit einer Fallback-Systemschriftart.

Bisher hatten Schriftarten, die mit font-display: optional gekennzeichnet waren, einen 100-ms-Blockzeitraum und keinen Swap-Zeitraum. Das bedeutet, dass „unsichtbarer“ Text sehr kurz angezeigt wird, bevor zu einer Fallback-Schriftart gewechselt wird. Wenn die Schriftart nicht innerhalb von 100 ms heruntergeladen wird, wird die Fallback-Schriftart verwendet und es findet kein Austausch statt.

Diagramm, das zeigt, dass die Schriftart nicht geladen werden konnte.
Bisheriges Verhalten von font-display: optional in Chrome, wenn die Schriftart nach dem 100-ms-Blockzeitraum heruntergeladen wird

Wenn die Schriftart jedoch vor Ablauf des 100-ms-Blockzeitraums heruntergeladen wird, wird die benutzerdefinierte Schriftart gerendert und auf der Seite verwendet.

Das Diagramm zeigt das bisherige optionale Schriftartverhalten, wenn die Schriftart rechtzeitig geladen wird.
Bisheriges Verhalten von font-display: optional in Chrome, wenn die Schriftart vor dem 100-ms-Blockzeitraum heruntergeladen wird

In beiden Fällen rendert Chrome die Seite zweimal , unabhängig davon, ob die Fallback-Schriftart verwendet wird oder ob die benutzerdefinierte Schriftart rechtzeitig geladen wird. Dies führt zu einem leichten Flackern von unsichtbarem Text und in Fällen, in denen eine neue Schriftart gerendert wird, zu Layout-Verzögerungen, wodurch einige Inhalte der Seite verschoben werden. Das passiert auch dann, wenn die Schriftart im Festplattencache des Browsers gespeichert ist und lange vor Ablauf des Blockzeitraums geladen werden kann.

Optimierungen wurden in Chrome 83 eingeführt, um den ersten Renderingzyklus für optionale Schriftarten vollständig zu entfernen, die mit <link rel="preload'> vorab geladen werden. Stattdessen wird das Rendering blockiert, bis die benutzerdefinierte Schriftart geladen wurde oder ein bestimmter Zeitraum verstrichen ist. Dieser Zeitraum ist derzeit auf 100 ms festgelegt, kann aber in naher Zukunft geändert werden, um die Leistung zu optimieren.

Diagramm, das das neue Verhalten von vorab geladenen optionalen Schriftarten zeigt, wenn eine Schriftart nicht geladen werden kann.
Neues Verhalten von font-display: optional in Chrome, wenn Schriftarten vorab geladen werden und die Schriftart nach dem 100-ms-Blockzeitraum heruntergeladen wird (kein Aufblitzen von unsichtbarem Text)
Diagramm, das das neue Verhalten bei vorab geladenen optionalen Schriftarten darstellt, wenn die Schriftart rechtzeitig geladen wird.
Neues Verhalten von font-display: optional in Chrome, wenn Schriftarten vorab geladen werden und die Schriftart vor dem 100-ms-Blockzeitraum heruntergeladen wird (kein Aufblitzen von unsichtbarem Text)

Durch das Vorabladen optionaler Schriftarten in Chrome werden Layout-Verzögerungen und das Aufblitzen von unformatiertem Text vermieden. Dies entspricht dem erforderlichen Verhalten, das in CSS Fonts Module Level 4 festgelegt ist. Dort heißt es, dass optionale Schriftarten niemals zu Layoutänderungen führen dürfen und User-Agents das Rendering stattdessen für einen geeigneten Zeitraum verzögern können.

Es ist zwar nicht erforderlich, eine optionale Schriftart vorab zu laden, aber es erhöht die Wahrscheinlichkeit, dass sie vor dem ersten Renderingzyklus geladen wird, insbesondere wenn sie noch nicht im Cache des Browsers gespeichert ist.

Fazit

Das Chrome-Team freut sich auf Ihr Feedback zum Vorabladen optionaler Schriftarten mit diesen neuen Optimierungen. Erstellen Sie ein Problem, wenn Sie Probleme haben oder Vorschläge für Funktionen machen möchten.