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 Sie die Leistung optimieren, sollten Sie das Blitzen von unsichtbarem Text vermeiden. und Inhalte sofort mithilfe einer Systemschriftart zu präsentieren. (FOUT)
Standardbrowser für die Anzeige von Schriftarten
Dies sind die Standardverhalten 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 er verwendet eine Systemschrift, bis die Schriftart bereit ist, und tauscht die Schriftart aus. |
Firefox | Text wird bis zu 3 Sekunden lang ausgeblendet. Wenn der Text immer noch nicht bereit ist, wird er verwendet eine Systemschrift, bis die Schriftart bereit ist, und tauscht die Schriftart aus. |
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 fertig 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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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.
<ph type="x-smartling-placeholder">Dies ermöglicht eine Reihe zusätzlicher Ü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.