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 entfernen.

Houssein Djirdeh

Durch die Optimierung der Rendering-Zyklen eliminiert Chrome 83 Layoutverschiebungen beim Vorabladen optionaler Schriftarten. Die Kombination von <link rel="preload"> und font-display: optional ist die effektivste Methode, um sicherzustellen, dass beim Rendern benutzerdefinierter Schriftarten keine Layoutverzögerungen auftreten.

Browserkompatibilität

Aktuelle Informationen zur browserübergreifenden Unterstützung findest du in den Daten von MDN:

Schrift-Rendering

Bei Layoutverschiebungen oder Layoutverschiebungen ändert sich eine Ressource auf einer Webseite dynamisch, was zu einer „Verlagerung“ des Inhalts 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 (nicht formatierter Text im Flash-Format)
  • "Unsichtbarer" Text wird angezeigt, bis eine neue Schriftart auf der Seite gerendert wird ("Blitz von unsichtbarem Text").

Mit der CSS-Eigenschaft font-display kann das Renderingverhalten von benutzerdefinierten Schriftarten über eine Reihe verschiedener unterstützter Werte (auto, block, swap, fallback und optional) geändert werden. Die Wahl des zu verwendenden Werts hängt vom bevorzugten Verhalten für asynchron geladene Schriftarten ab. Bis jetzt kann jedoch jeder dieser unterstützten Werte ein neues Layout auf eine der beiden oben genannten Arten auslösen.

Optionale Schriftarten

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

  • Blockieren:Unsichtbarer Text wird gerendert, aber sobald der Ladevorgang abgeschlossen ist, wird zur Webschriftart gewechselt.
  • Austauschen:Text wird mit einer Schriftart für das Fallback-System gerendert und nach dem Laden zur Webschriftart gewechselt.
  • Fehlgeschlagen:Der Text wird mit einer Schriftart des Fallbacks gerendert.

Bisher hatten Schriftarten, die mit font-display: optional gekennzeichnet sind, einen Blockzeitraum von 100 ms und keinen Auslagerungszeitraum. 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 mit vorherigem optionalen Schriftartverhalten, wenn die Schriftart nicht geladen werden kann
Vorheriges Verhalten von font-display: optional in Chrome, wenn die Schriftart nach dem Sperrzeitraum von 100 ms heruntergeladen wird

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

Diagramm zum vorherigen optionalen Schriftverhalten beim rechtzeitigen Laden der Schriftart
Vorheriges Verhalten von font-display: optional in Chrome, wenn die Schriftart vor dem Sperrzeitraum von 100 ms heruntergeladen wird

Chrome rendert die Seite in beiden Fällen zweimal neu, unabhängig davon, ob die Fallback-Schriftart verwendet wird oder ob die benutzerdefinierte Schriftart rechtzeitig fertig geladen wurde. Dies führt zu einem leichten Flimmern von unsichtbarem Text und, wenn eine neue Schriftart gerendert wird, zu Layout-Verzögerungen, die einen Teil des Seiteninhalts verschieben. Dies geschieht auch dann, wenn die Schriftart im Festplatten-Cache des Browsers gespeichert ist und lange vor Ablauf der Sperrzeit geladen werden kann.

In Chrome 83 sind jetzt Optimierungen verfügbar, durch die der erste Renderingzyklus für optionale Schriftarten, die mit <link rel="preload'> vorinstalliert sind, vollständig entfernt wird. Stattdessen wird das Rendering blockiert, bis die benutzerdefinierte Schriftart vollständig geladen ist oder eine bestimmte Zeit verstrichen ist. Dieses Zeitlimit ist derzeit auf 100 ms festgelegt, kann sich aber in naher Zukunft ändern, um die Leistung zu optimieren.

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

Durch das Vorabladen optionaler Schriftarten in Chrome werden Layoutverzögerungen und Flash von nicht formatiertem Text vermieden. Dies entspricht dem in CSS Fonts Module Level 4 beschriebenen Verhalten, bei dem optionale Schriftarten nie zu einem neuen Layout führen dürfen und User-Agents stattdessen das Rendering für einen angemessenen Zeitraum verzögern können.

Eine optionale Schriftart muss zwar nicht vorab geladen werden, sie erhöht aber die Wahrscheinlichkeit, dass sie vor dem ersten Renderingzyklus geladen wird, erheblich, insbesondere wenn sie noch nicht im Browser-Cache gespeichert ist.

Fazit

Das Chrome-Team interessiert sich für Ihre Erfahrungen mit dem Vorabladen optionaler Schriftarten mit diesen neuen Optimierungen. Wenn Probleme auftreten oder Sie Vorschläge zu Funktionen machen möchten, melden Sie ein Problem.