Ab Chrome 83 können link rel="preload" und font-display: optional kombiniert werden, um Layout-Verzögerungen vollständig zu entfernen.
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](https://web.dev/static/articles/preload-optional-fonts/image/diagram-showing-previous-72256d5b2f2c6.png?authuser=6&hl=de)
font-display: optional
in Chrome, wenn die Schriftart nach dem Sperrzeitraum von 100 ms heruntergeladen wirdWenn 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](https://web.dev/static/articles/preload-optional-fonts/image/diagram-showing-previous-1a9e50e1e7c12.png?authuser=6&hl=de)
font-display: optional
in Chrome, wenn die Schriftart vor dem Sperrzeitraum von 100 ms heruntergeladen wirdChrome 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](https://web.dev/static/articles/preload-optional-fonts/image/diagram-showing-preloade-9b1b15b370673.png?authuser=6&hl=de)
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](https://web.dev/static/articles/preload-optional-fonts/image/diagram-showing-preloade-9f41ce5381ce7.png?authuser=6&hl=de)
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.