Ab Chrome 83 können „link rel="preload"“ und „font-display: optional“ kombiniert werden, um Ruckler im Layout vollständig zu entfernen.
Durch die Optimierung der Rendering-Zyklen wird in Chrome 83 das Layout-Shifting beim Vorladen optionaler Schriftarten verhindert.
Die Kombination von <link rel="preload"> mit font-display: optional ist die effektivste Methode, um beim Rendern benutzerdefinierter Schriftarten Ruckler im Layout zu vermeiden.
Browserkompatibilität
Aktuelle Informationen zur browserübergreifenden Unterstützung finden Sie in den Daten der MDN:
Schrift-Rendering
Ein Layout-Shift oder ein Neu-Layout tritt auf, wenn sich eine Ressource auf einer Webseite dynamisch ändert, was zu einer „Verschiebung“ der Inhalte führt. Das Abrufen und Rendern von Webschriften kann auf zwei Arten direkt zu Layoutverschiebungen führen:
- Eine Fallback-Schriftart wird durch eine neue Schriftart ersetzt („Blitz von unformatiertem Text“)
- „Unsichtbarer“ Text wird angezeigt, bis eine neue Schriftart auf der Seite gerendert wird („Blitzen des unsichtbaren Texts“).
Mit der CSS-Eigenschaft font-display können Sie das Rendering-Verhalten benutzerdefinierter Schriftarten mithilfe verschiedener unterstützter Werte (auto, block, swap, fallback und optional) ändern. Welchen Wert Sie verwenden, hängt vom gewünschten Verhalten für asynchron geladene Schriftarten ab. Bisher konnte jedoch jeder dieser unterstützten Werte auf eine der beiden oben genannten Arten ein Neu-Layout auslösen.
Optionale Schriftarten
Für die Property font-display wird ein Zeitplan mit drei Zeiträumen verwendet, um Schriftarten zu verarbeiten, die heruntergeladen werden müssen, bevor sie gerendert werden können:
- Blockieren:Der Text wird „unsichtbar“ gerendert, aber sobald er geladen ist, wird zur Webschriftart gewechselt.
- Wechseln:Text wird mit einer Fallback-Systemschriftart gerendert, aber sobald die Webschrift geladen ist, wird zu dieser gewechselt.
- Fehlgeschlagen:Text wird mit einer Fallback-Systemschriftart gerendert.
Bisher hatten Schriftarten, die mit font-display: optional gekennzeichnet waren, eine Blockierungsdauer von 100 ms und keine Auslagerungsdauer. Das bedeutet, dass „unsichtbarer“ Text sehr kurz angezeigt wird, bevor zu einem Fallback-Schriftschnitt gewechselt wird. Wenn die Schriftart nicht innerhalb von 100 Millisekunden heruntergeladen wird, wird die Fallback-Schriftart verwendet und es erfolgt kein Austausch.
font-display: optional-Verhalten in Chrome, wenn der Schriftschnitt nach dem Blockierungszeitraum von 100 ms heruntergeladen wirdWenn der Schriftschnitt jedoch vor Ablauf des Blockierungszeitraums von 100 Millisekunden heruntergeladen wird, wird er gerendert und auf der Seite verwendet.
font-display: optional-Verhalten in Chrome, wenn der Schriftschnitt vor dem Blockierungszeitraum von 100 ms heruntergeladen wirdIn beiden Fällen wird die Seite in Chrome zweimal neu gerendert, unabhängig davon, ob die Fallback-Schriftart verwendet wird oder das Laden der benutzerdefinierten Schriftart rechtzeitig abgeschlossen wird. Dies führt zu einem leichten Flimmern des unsichtbaren Texts und, wenn ein neuer Schriftschnitt gerendert wird, zu einem Ruckeln des Layouts, bei dem sich einige der Inhaltselemente der Seite verschieben. Das passiert auch, wenn die Schriftart im Laufwerkcache des Browsers gespeichert ist und noch vor Ablauf der Blockierungsdauer geladen werden kann.
In Chrome 83 wurden Optimierungen vorgenommen, um den ersten Rendering-Zyklus für optionale Schriftarten, die mit <link rel="preload'> vorab geladen werden, vollständig zu entfernen.
Stattdessen wird das Rendering blockiert, bis der benutzerdefinierte Schriftschnitt geladen ist oder ein bestimmter Zeitraum verstrichen ist. Dieser Zeitlimitzeitraum beträgt derzeit 100 Millisekunden, kann aber in naher Zukunft zur Leistungsoptimierung geändert werden.
font-display: optional-Verhalten in Chrome, wenn Schriftarten vorab geladen und nach dem Blockierungszeitraum von 100 Millisekunden heruntergeladen werden (kein Aufblitzen von unsichtbarem Text)
font-display: optional-Verhalten in Chrome, wenn Schriftarten vorab geladen und vor dem Blockierungszeitraum von 100 Millisekunden heruntergeladen werden (kein Aufblitzen von unsichtbarem Text)Wenn Sie optionale Schriftarten in Chrome vorab laden, können Ruckler im Layout und das Aufblitzen von unformatiertem Text vermieden werden. Das entspricht dem erforderlichen Verhalten gemäß CSS Fonts Module Level 4, in dem optionale Schriftarten niemals zu einem Neulayout führen sollten und User-Agents das Rendern stattdessen für einen angemessenen Zeitraum verzögern können.
Es ist zwar nicht notwendig, eine optionale Schriftart vorab zu laden, aber die Wahrscheinlichkeit, dass sie vor dem ersten Rendering-Zyklus geladen wird, ist dann wesentlich höher, insbesondere wenn sie noch nicht im Cache des Browsers gespeichert ist.
Fazit
Das Chrome-Team würde sich über Feedback zu Ihren Erfahrungen mit dem Vorladen optionaler Schriftarten mit diesen neuen Optimierungen freuen. Wenn Probleme auftreten oder du Funktionsvorschläge hast, kannst du ein Problem melden.