Das wichtigste in Kürze:
- FOUT (Flash of Unstyled Text) bezieht sich auf den Moment, in dem ein Browser Text auf einer Webseite anzeigt, bevor die Schriftart geladen wurde. Dies kann zu unerwünschten visuellen Effekten führen.
- FOIT (Flash of Invisible Text) beschreibt den Fall, in dem ein Browser Text auf einer Webseite nicht anzeigt, da die Schriftart noch nicht geladen wurde.
- FOFT (Flash of Faux Text) bezieht sich auf den Fall, in dem ein Browser eine Ersatzschriftart verwendet, bevor die gewünschte Schriftart geladen wurde. Dies kann zu unerwünschten visuellen Effekten führen, da die Ersatzschriftart möglicherweise nicht mit der gewünschten Schriftart übereinstimmt.
Inhaltsverzeichnis
Techniken zur Bekämpfung von FOIT
Wenn es um das Optimieren der Ladezeit deiner Webseite geht, ist die Verwendung von benutzerdefinierten Schriften ein wichtiger Faktor. Früher konnten Browser “Flash of Unstyled Text” (FOUT) verursachen, wenn die Schriftart noch nicht geladen war. Heutzutage ist die Technik jedoch anders, und es kann zu “Flash of Invisible Text” (FOIT) kommen, wenn der Text unsichtbar gemacht wird, bis die Schriftart geladen ist. In diesem Blogbeitrag erfährst du, wie du FOIT auf verschiedene Weise bekämpfen und wie du das neue Konzept von “Flash of Faux Text” (FOFT) in deine Webseite einbeziehen kannst.
Eine Technik, die in jüngster Zeit vorgestellt wurde, um FOIT zu bekämpfen, ist die Verwendung einer Bibliothek, die erkennt, ob eine benutzerdefinierte Schriftart geladen wurde und erst dann einen Klassennamen im Dokument zum Setzen des Textes in dieser Schriftart ändert. Dadurch wird das Verhalten wie bei FOUT vermieden – eine Beschleunigung des lesbaren Inhalts auf Kosten von etwas störenden visuellen Änderungen.
Ansatz von Zach Leatherman
Ein anderer Ansatz, der von Zach Leatherman vorgestellt wurde, ist es, auf das Laden der Schriftart zu warten, bevor eine Klasse festgelegt wird, um den Text in dieser Schriftart darzustellen. Er geht auch darauf ein, welche Schritte notwendig sind, um einen Font-Download auszulösen.
Zachs neuester Trick ist FOFT, bei dem man nur darauf wartet, dass die römische Variante der benutzerdefinierten Schriftart geladen wird und den Text sofort in dieser Variante setzt. Der Browser wird dazu gezwungen, bei Bedarf “faux bold” und “faux italic” zu erzeugen, die durch die echten Versionen ersetzt werden, sobald diese heruntergeladen sind.
Ansatz von Vitaly Friedman
Vitaly Friedman hat den Ansatz der Verwendung von localStorage, um die Schriftart zwischenzuspeichern, sobald sie einmal geladen wurde, um sicherzustellen, dass sie beim nächsten Besuch der Seite sofort verfügbar ist.
Es gibt viele Techniken, die du verwenden kannst, um FOIT zu vermeiden und deine Webseite zu optimieren. Einige Ansätze beinhalten die Verwendung von Bibliotheken oder Klassen, um den Text erst anzuzeigen, wenn die Schriftart geladen ist, andere setzen auf FOFT und warten nur auf die römische Variante der Schriftart, bevor sie den Text anzeigen und dadurch “faux bold” und “faux italic” erzeugen.
Es ist wichtig, dass du als Blogger die verschiedenen Techniken verstehst und sie auf deiner Webseite anwendest, um die Ladezeit zu optimieren und eine bessere Benutzererfahrung für deine Besucher zu bieten. Berücksichtige auch, dass es immer noch Herausforderungen bei der Verwendung von benutzerdefinierten Schriften gibt, und es lohnt sich, sich regelmäßig über die neuesten Entwicklungen im Bereich Font-Loading und -Optimierung zu informieren.
Was ist FOIT?
FOIT steht für “Flash of Invisible Text” und beschreibt eine Methode, bei der der Text auf einer Seite nicht angezeigt wird, bis die ursprünglichen Schriftarten geladen wurden. Dies kann bis zu drei Sekunden dauern und kann auch die Ladezeit anderer Elemente wie Bilder beeinflussen.
Was ist FOUT?
FOUT steht für “Flash of Unstyled Text” und beschreibt eine Methode, bei der der Text zwar angezeigt wird, aber mit einer Standard-Schriftart, bis die ursprünglichen Schriftarten geladen wurden. Dies konzentriert sich auf Inhalte, auch wenn die Layout für einen kurzen Moment ignorieren wird.
Was ist der Unterschied zwischen FOIT und FOUT?
Der Unterschied besteht darin, wie der Browser mit dem Text verfährt, wenn die benutzerdefinierte Schriftart noch nicht geladen ist. FOIT versteckt den Text vollständig, während FOUT eine Standardschriftart verwendet, bis die benutzerdefinierte Schriftart geladen ist.
Welche Methode sollte bevorzugt werden, FOIT oder FOUT?
Die Wahl zwischen FOIT und FOUT hängt von den Anforderungen der Seite und der Priorität zwischen Ladezeit und visueller Präsentation ab. FOIT eignet sich besser für Seiten mit kurzen Ladezeiten, während FOUT besser für Seiten geeignet ist, die schnelle Inhaltsdarstellung bevorzugen.
Welche Browser verwenden FOIT als Standardverhalten?
Browser wie Chrome und Firefox verstecken den Text für 3 Sekunden und verwenden dann eine Standardschriftart, bis die benutzerdefinierte Schriftart geladen ist. Safari versteckt den Text vollständig, bis die benutzerdefinierte Schriftart geladen ist.
Wie kann ich vermeiden, dass FOIT auf meiner Website angezeigt wird?
Eine Möglichkeit besteht darin, die Regel “font-display: swap” in Ihrem CSS hinzuzufügen. Eine andere Möglichkeit besteht darin, die Verwendung einer externen Bibliothek namens FontFaceObserver zu erwägen, um zu erkennen, wann die Schriftart geladen ist und die Seitenformatierung entsprechend anzupassen.
Wie werden Web-Schriftarten geladen?
Web-Schriftarten werden geladen, indem der Browser den HTML-Code einer Seite analysiert und einen Renderpfad erstellt. Während dieses Prozesses müssen auch Schriftarten geladen werden. Wenn der Browser beginnt, die Schriftarten zu laden, wird der Renderprozess der Seite blockiert, bis die angeforderten Schriftarten gefunden wurden. Wenn dies nicht der Fall ist, kann die Wahl zwischen FOIT oder FOUT getroffen werden, um den Prozess abzuschließen.
