Was hat das mit mir zu tun?
Schriftarten sind oft große Dateien, deren Laden eine Weile dauert. Um dies zu vermeiden, blenden einige Browser Text aus, bis die Schriftart geladen wird.
Beim Largest Contentful Paint (LCP) kann es zu Verzögerungen beim Rendern von Text kommen. Wenn du die Leistung optimierst, solltest du das „Flash of Invisible Text“ (FOIT) vermeiden und Nutzern Inhalte sofort mithilfe einer Systemschriftart präsentieren, wodurch ein „Flash von unformatierten Text“ (FOUT) entsteht.
Standardbrowser für die Anzeige von Schriftarten
Dies sind die Standardeinstellungen beim Laden von Schriftarten für gängige Browser:
| Browser | Standardeinstellung, wenn die Schriftart nicht bereit ist... |
|---|---|
| Chrome und Edge | Text wird bis zu 3 Sekunden lang ausgeblendet. Wenn der Text immer noch nicht bereit ist, wird eine Systemschriftart verwendet, bis die Schriftart bereit ist. Anschließend wird die Schriftart ausgetauscht. |
| Firefox | Text wird bis zu 3 Sekunden lang ausgeblendet. Wenn der Text immer noch nicht bereit ist, wird eine Systemschriftart verwendet, bis die Schriftart bereit ist. Anschließend wird die Schriftart ausgetauscht. |
| Safari | Blendet Text aus, bis die Schriftart bereit ist. |
Text sofort anzeigen
In diesem Leitfaden werden zwei Möglichkeiten beschrieben, Text so schnell wie möglich anzuzeigen. Die erste Methode ist einfach und bietet eine gute Browserunterstützung. Der zweite Ansatz ist ausführlich, bietet Ihnen möglicherweise jedoch weitere Optionen. Die beste Wahl für Ihre Website hängt von Ihren Anforderungen ab.
Option 1: font-display verwenden
font-display ist eine API zum Festlegen einer Strategie für die Anzeige von Schriftarten. swap teilt dem Browser mit, dass Text in dieser Schriftart sofort angezeigt werden soll. Dabei wird eine Systemschriftart verwendet. Sobald die benutzerdefinierte Schriftart bereit ist, wird die Systemschriftart ausgetauscht.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
Wenn ein Browser font-display nicht unterstützt – obwohl alle modernen Browser dies tun – folgt er weiterhin seinem Standardverhalten zum Laden von Schriftarten.
Option 2: Benutzerdefinierte Schriftarten erst verwenden, wenn diese geladen wurden
Mit etwas mehr Arbeit kann eine individuellere Herangehensweise in Betracht gezogen werden.
Dieser Ansatz besteht aus drei Teilen:
- Verwenden Sie beim ersten Seitenaufbau keine benutzerdefinierte Schriftart, indem Sie den CSS-Code so refaktorieren, dass anfänglich keine benutzerdefinierten Schriftarten verwendet werden. Dadurch wird sichergestellt, dass der Text sofort in einer Systemschriftart angezeigt wird.
- Mit der CSS Font Loading API erkennen, wenn Ihre benutzerdefinierte Schriftart geladen wird
- Aktualisieren Sie den Seitenstil, um die benutzerdefinierte Schriftart zu verwenden.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
Dies ist auch mit der FontFaceObserver-Bibliothek möglich, die für manche eine einfachere API ist.
Dies ermöglicht eine Reihe von zusätzlichen Überlegungen beim Laden der Schriftarten. Beispielsweise können alle Schriftarten gleichzeitig geladen werden, sodass beim Laden jeder Schriftart mehrere Layouts vermieden werden müssen. Es ist auch möglich, dass Websites für Nutzer mit langsamen Verbindungen oder für Nutzer, die die Option Daten speichern verwenden, keine Schriftarten laden.
Bestätigen
Führen Sie Lighthouse aus, um zu prüfen, ob die Website font-display: swap zum Anzeigen von Text verwendet:
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Wahltaste + J auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
- Klicken Sie auf die Schaltfläche Bericht erstellen.
Prüfen Sie, ob das Audit Sicherstellen, dass der Text während des Ladens von Webfonts sichtbar bleibt bestanden hat.